playwright.yml

name: Playwright Tests + Prettier (reviewdog) + test-flow chart

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write

    steps:
    #---------------------------------------------------
    # 0 – Checkout
    #---------------------------------------------------
    - name: Checkout code
      uses: actions/checkout@v3
      with:
        fetch-depth: 0
        ref: ${{ github.event.pull_request.head.ref }} # Crucial for pushing back to PR branch

    #---------------------------------------------------
    # 1 – reviewdog CLI
    #---------------------------------------------------
    - name: Setup reviewdog
      uses: reviewdog/action-setup@v1
      with: { reviewdog_version: latest }

    #---------------------------------------------------
    # 2 – Prettier → inline review comments
    #---------------------------------------------------
    - name: Prettier style check (reviewdog)
      shell: bash
      env:
        REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      run: |
        npx prettier --write '**/*.{js,ts,tsx,jsx,json,yml,yaml,md}'
        git diff -U0 --no-color > prettier.patch || true
        if [ -s prettier.patch ]; then
          cat prettier.patch | reviewdog -f=diff \
                                         -name="prettier" \
                                         -reporter=github-pr-review \
                                         -filter-mode=diff_context \
                                         -level=warning
        else
          echo "No Prettier issues found."
        fi

    #---------------------------------------------------
    # 3 – Node & deps
    #---------------------------------------------------
    - name: Set up Node.js
      uses: actions/setup-node@v4
      with: { node-version: 18 }

    - name: Install dependencies
      run: npm install

    # --- IMPORTANT FIX: Install Playwright browsers early ---
    - name: Install Playwright and browsers
      run: npx playwright install --with-deps

    ## NEW STEP: Create a directory for "before" screenshots (this will be the Playwright output dir)
    - name: Create "before" screenshots directory
      run: mkdir -p published-screenshots-before

    ## NEW STEP: Save current PR's test files (before checking out main)
    - name: Save PR test files
      run: |
        mkdir -p tests_pr_backup/
        cp -r tests/* tests_pr_backup/ # Copy contents, not the directory itself
        ls -la tests_pr_backup/ # Debugging: verify backup content

    ## NEW STEP: Checkout Main branch for "before" tests
    - name: Checkout Main branch for "before" screenshots
      run: |
        git config user.name "github-actions[bot]"
        git config user.email "github-actions[bot]@users.noreply.github.com"
        git fetch origin main # Ensure main branch is fetched
        git reset --hard origin/main # Reset to main, discard local changes (tests_pr_backup is safe outside)

    ## NEW STEP: Run Playwright tests on Main (for "before" screenshots)
    - name: Run Playwright "before" tests
      run: |
        # Playwright will output its results (including screenshots) directly into PLAYWRIGHT_SCREENSHOT_DIR.
        # Ensure your playwright.config.js uses process.env.PLAYWRIGHT_SCREENSHOT_DIR for 'output' in 'use'.
        PLAYWRIGHT_SCREENSHOT_DIR="published-screenshots-before" npx playwright test

    ## NEW STEP: Restore PR test files
    - name: Restore PR test files
      run: |
        git reset --hard ${{ github.event.pull_request.head.ref }} # Reset to PR branch's state
        # Now, replace the 'tests/' directory with the backup
        rm -rf tests/ # Remove current tests/ directory
        mv tests_pr_backup/ tests/ # Move the backup directory to become the new tests/
        ls -la tests/ # Debugging: verify restored content

    #---------------------------------------------------
    # 5 – Run Playwright tests (This now runs on the PR branch's tests, generates to 'published-screenshots/')
    #---------------------------------------------------
    - name: Run Playwright tests
      run: npx playwright test --output=playwright-report-pr/ --reporter=html,json # This will create results.json
      # Playwright will output screenshots into the default location defined in playwright.config.js (e.g., test-results/)
      # We will then move them to 'published-screenshots/' in the next step.

    # --- Debugging: Verify Playwright Report Existence AFTER tests ---
    - name: Verify Playwright Report Existence
      run: |
        echo "Listing contents of the workspace:"
        ls -la
        echo "Listing contents of playwright-report-pr/:"
        ls -la playwright-report-pr/
        # Check if the results.json exists
        if [ -f "playwright-report-pr/results.json" ]; then # FIXED: Check for results.json
          echo "playwright-report-pr/results.json exists."
        else
          echo "ERROR: playwright-report-pr/results.json DOES NOT EXIST."
          exit 1
        fi
    # --- End Debugging ---

    # --- START OF SCREENSHOT PUBLISHING FOR BOTH BEFORE AND AFTER ---

    # Prepare directories for PR-specific screenshots on GitHub Pages
    - name: Prepare PR Screenshots for GitHub Pages (After)
      if: github.event_name == 'pull_request'
      run: |
        PR_DIR="docs/pr/${{ github.event.pull_request.number }}/screenshots"
        mkdir -p "$PR_DIR"
        # Find all .png files within the default Playwright output directory (e.g., test-results/)
        # and copy them to the target PR_DIR.
        # This assumes your playwright.config.js sets `output` to 'test-results' for the main run.
        find test-results/ -name "*.png" -exec cp {} "$PR_DIR/" \; || true # The '|| true' prevents failure if no files are found
        echo "Copied 'after' screenshots to $PR_DIR/"
        ls -lh "$PR_DIR/" # For debugging

    - name: Prepare PR Screenshots for GitHub Pages (Before)
      if: github.event_name == 'pull_request'
      run: |
        PR_BEFORE_DIR="docs/pr/${{ github.event.pull_request.number }}/before-screenshots"
        mkdir -p "$PR_BEFORE_DIR"
        # Find all .png files within the 'published-screenshots-before/' directory (Playwright's output for before tests)
        # and copy them to the target PR_BEFORE_DIR.
        find published-screenshots-before/ -name "*.png" -exec cp {} "$PR_BEFORE_DIR/" \; || true
        echo "Copied 'before' screenshots to $PR_BEFORE_DIR/"
        ls -lh "$PR_BEFORE_DIR/" # For debugging

    # Commit and Push PR Screenshots to GitHub Pages
    - name: Commit and Push PR Screenshots to GitHub Pages
      if: github.event_name == 'pull_request'
      uses: EndBug/add-and-commit@v9
      with:
        add: 'docs/pr/${{ github.event.pull_request.number }}/screenshots/ docs/pr/${{ github.event.pull_request.number }}/before-screenshots/'
        message: 'Docs: Publish Playwright screenshots for PR #${{ github.event.pull_request.number }} [skip ci]'
        default_author: github_actions
        push: true

    # Generate Markdown for screenshots with their public URLs
    - name: Generate Screenshot Markdown for PR Comment
      id: generate_screenshot_markdown
      if: github.event_name == 'pull_request'
      run: |
        REPO_OWNER=$(echo "${{ github.repository }}" | cut -d'/' -f1)
        REPO_NAME=$(echo "${{ github.repository }}" | cut -d'/' -f2)
        PR_NUMBER="${{ github.event.pull_request.number }}"
        PR_SCREENSHOTS_LOCAL_DIR_AFTER="docs/pr/${PR_NUMBER}/screenshots"
        PR_SCREENSHOTS_LOCAL_DIR_BEFORE="docs/pr/${PR_NUMBER}/before-screenshots"

        GITHUB_PAGES_BASE_URL_AFTER="https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/pr/${PR_NUMBER}/screenshots/"
        GITHUB_PAGES_BASE_URL_BEFORE="https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/pr/${PR_NUMBER}/before-screenshots/"

        IMAGE_MARKDOWN=""

        # Add "Before" screenshots section
        IMAGE_MARKDOWN+="### Before (Main Branch)\n\n"
        if [ -d "$PR_SCREENSHOTS_LOCAL_DIR_BEFORE" ]; then
            shopt -s nullglob
            # Look for .png files directly in the directory
            declare -a IMG_FILES_BEFORE=("$PR_SCREENSHOTS_LOCAL_DIR_BEFORE"/*.png)
            shopt -u nullglob

            if [ ${#IMG_FILES_BEFORE[@]} -gt 0 ]; then
                for img_path in "${IMG_FILES_BEFORE[@]}"; do
                    img_name=$(basename "$img_path")
                    img_url="${GITHUB_PAGES_BASE_URL_BEFORE}${img_name}"
                    IMAGE_MARKDOWN+="![Before - ${img_name}](${img_url})\n\n"
                done
            else
                IMAGE_MARKDOWN+="*No 'before' screenshots found.*\n\n"
            fi
        else
            IMAGE_MARKDOWN+="*'Before' screenshots directory not found.*\n\n"
        fi

        # Add "After" screenshots section
        IMAGE_MARKDOWN+="### After (PR Branch)\n\n"
        if [ -d "$PR_SCREENSHOTS_LOCAL_DIR_AFTER" ]; then
            shopt -s nullglob
            # Look for .png files directly in the directory
            declare -a IMG_FILES_AFTER=("$PR_SCREENSHOTS_LOCAL_DIR_AFTER"/*.png)
            shopt -u nullglob

            if [ ${#IMG_FILES_AFTER[@]} -gt 0 ]; then
                for img_path in "${IMG_FILES_AFTER[@]}"; do
                    img_name=$(basename "$img_path")
                    img_url="${GITHUB_PAGES_BASE_URL_AFTER}${img_name}"
                    IMAGE_MARKDOWN+="![After - ${img_name}](${img_url})\n\n"
                done
            else
                IMAGE_MARKDOWN+="*No 'after' screenshots found.*\n\n"
            fi
        else
            IMAGE_MARKDOWN+="*'After' screenshots directory not found.*\n\n"
        fi

        echo "pr_screenshots_markdown<<EOF" >> $GITHUB_OUTPUT
        echo "$IMAGE_MARKDOWN" >> $GITHUB_OUTPUT
        echo "EOF" >> $GITHUB_OUTPUT
      shell: bash

    # --- END OF SCREENSHOT PUBLISHING FOR BOTH BEFORE AND AFTER ---

    #---------------------------------------------------
    # 6 – Upload HTML report
    #---------------------------------------------------
    - name: Upload HTML report
      if: always()
      uses: actions/upload-artifact@v4
      with:
        name: playwright-report
        path: playwright-report-pr/

    #---------------------------------------------------
    # 7 – Extract test summary
    #---------------------------------------------------
    - name: Extract test summary
      id: summary
      run: |
        # Playwright's JSON report contains the summary statistics
        REPORT_FILE=playwright-report-pr/results.json # FIXED: Path to results.json
        if [ ! -f "$REPORT_FILE" ]; then
          echo "Error: Playwright report file not found at $REPORT_FILE"
          exit 1
        fi
        
        TOTAL=$(jq '.stats.total' "$REPORT_FILE")
        PASSED=$(jq '.stats.expected' "$REPORT_FILE")
        FAILED=$(jq '.stats.failures' "$REPORT_FILE")
        SKIPPED=$(jq '.stats.skipped' "$REPORT_FILE")
        DURATION=$(jq '.stats.duration' "$REPORT_FILE") # Playwright duration is already in ms
        PASS_RATE=$(awk "BEGIN{printf \"%.2f\", ($TOTAL==0)?0:($PASSED/$TOTAL)*100}")
        
        echo "total=$TOTAL" >> $GITHUB_OUTPUT
        echo "passed=$PASSED" >> $GITHUB_OUTPUT
        echo "failed=$FAILED" >> $GITHUB_OUTPUT
        echo "skipped=$SKIPPED" >> $GITHUB_OUTPUT
        echo "duration=$DURATION" >> $GITHUB_OUTPUT
        echo "passrate=$PASS_RATE" >> $GITHUB_OUTPUT

    #---------------------------------------------------
    # 8 – ESLint (tests only)
    #---------------------------------------------------
    - name: Run ESLint on GUI tests
      shell: bash
      run: |
        # Run ESLint and redirect output to a file. The `|| true` prevents the step from failing if lint issues are found.
        npx eslint "tests/**/*.{js,ts,tsx}" -f stylish > eslint-tests.txt || true

    - name: Upload ESLint report
      if: always()
      uses: actions/upload-artifact@v4
      with:
        name: eslint-test-report
        path: eslint-tests.txt

    - name: Read ESLint report (preview)
      id: lint_summary
      run: |
        # Only read if the file exists, to prevent errors
        if [ -f "eslint-tests.txt" ]; then
          echo 'summary<<EOF' >> $GITHUB_OUTPUT
          head -n 20 eslint-tests.txt >> $GITHUB_OUTPUT
          echo 'EOF' >> $GITHUB_OUTPUT
        else
          echo 'summary<<EOF' >> $GITHUB_OUTPUT
          echo 'ESLint report not generated or found.' >> $GITHUB_OUTPUT
          echo 'EOF' >> $GITHUB_OUTPUT
        fi

    #---------------------------------------------------
    # 9 – Generate Suite→Spec Mermaid chart (flowchart.png)
    #---------------------------------------------------
    - name: Generate test-flow chart
      shell: bash
      run: |
        set -e
        REPORT_FILE=playwright-report-pr/results.json # FIXED: Path to results.json
        if [ ! -f "$REPORT_FILE" ]; then
          echo "Error: Playwright report file not found at $REPORT_FILE for flowchart generation. Skipping chart."
          exit 0 # Exit successfully if report not found, but log message
        fi
        
        echo "graph TD" > flowchart.mmd

        jq -r '
          .suites[] as $file |
          ($file.title // "NO_FILE_TITLE") as $fileTitle |
          $file.suites[]? as $suite |
            ($suite.title // "NO_SUITE_TITLE") as $suiteTitle |
            $suite.specs[]? as $spec |
              ($spec.title // "NO_SPEC_TITLE") as $specTitle |
              [$fileTitle, $suiteTitle, $specTitle] | @tsv
        ' "$REPORT_FILE" |
        while IFS=$'\t' read -r fileTitle suiteTitle specTitle; do
          # Build unique, safe IDs by combining parent and child
          fileId=$(echo "$fileTitle" | tr -c 'A-Za-z0-9' '_' | sed 's/^_*\|_*$//g')
          suiteId=$(echo "${fileTitle}_${suiteTitle}" | tr -c 'A-Za-z0-9' '_' | sed 's/^_*\|_*$//g')
          specId=$(echo "${fileTitle}_${suiteTitle}_${specTitle}" | tr -c 'A-Za-Z0-9' '_' | sed 's/^_*\|_*$//g')

          # File node
          if ! grep -q "^  ${fileId}\[" flowchart.mmd; then
            echo "  ${fileId}[\"${fileTitle}\"]" >> flowchart.mmd
          fi
          # Suite node
          if ! grep -q "^  ${suiteId}\[" flowchart.mmd; then
            echo "  ${suiteId}[\"${suiteTitle}\"]" >> flowchart.mmd
            echo "  ${fileId} --> ${suiteId}" >> flowchart.mmd
          fi
          # Spec node/edge
          echo "  ${suiteId} --> ${specId}[\"${specTitle}\"]" >> flowchart.mmd
        done

        printf '{ "args": ["--no-sandbox","--disable-setuid-sandbox"] }\n' > puppeteer.json

        npx -y @mermaid-js/mermaid-cli@10.6.1 \
          -p puppeteer.json \
          -i flowchart.mmd \
          -o flowchart.png

        ls -lh flowchart.png

    - name: Show flowchart.mmd for debugging
      run: cat flowchart.mmd

    - name: Upload test-flow chart
      if: always() # Removed fileExists: This ensures the step runs and actions/upload-artifact will warn if file is missing.
      uses: actions/upload-artifact@v4
      with:
        name: test-flow-chart
        path: flowchart.png

    #---------------------------------------------------
    # 10 – Sticky PR comment
    #---------------------------------------------------
    - name: Comment on PR with results
      uses: marocchino/sticky-pull-request-comment@v2
      with:
        message: |
          ## Playwright Test Metrics
          *Total:* **${{ steps.summary.outputs.total }}**
          *Passed:* **${{ steps.summary.outputs.passed }}**
          *Failed:* **${{ steps.summary.outputs.failed }}**
          *Skipped:* **${{ steps.summary.outputs.skipped }}**

          Duration: **${{ steps.summary.outputs.duration }} ms**
          Pass Rate: **${{ steps.summary.outputs.passrate }} %**

          ## ESLint (GUI tests)
          ```
          ${{ steps.lint_summary.outputs.summary }}
          ```

          ## Test-Flow Chart
          # Note: The flowchart.png is uploaded as an artifact. To embed it directly like screenshots,
          # you would also need to copy it into the 'published-screenshots' directory in step 9,
          # and then reference it using the PR-specific GitHub Pages URL.
          Artifact: **test-flow-chart → flowchart.png**

          ## Playwright Screenshots for this PR
          ${{ steps.generate_screenshot_markdown.outputs.pr_screenshots_markdown }}

          _Full run details:_ [link](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})