From ad6c1d5d1547a990ec4038ba949e4c2f375135f7 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Wed, 24 Jul 2024 00:21:45 +0530 Subject: [PATCH 1/7] Remove run server step --- .github/workflows/tests.yml | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 1b13b21a7..b9a19ce3d 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -64,17 +64,12 @@ jobs: run: | yarn --frozen-lockfile npm rebuild node-sass - - name: Start server + - name: Extract jsdocs and environment info run: | - yarn dev & - sleep 60 && - curl -sSf http://localhost:4000/testing-playground - env: - SHELL: /bin/bash + yarn pregenerate - name: Run visual tests - id: run-visual-tests run: | - yarn test:percy 2>&1 | tee test-output.log + yarn test:visual 2>&1 | tee test-output.log env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - name: Extract Percy build URL From c18b8d5217de30111ef5daf23dec383d6b697912 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Wed, 24 Jul 2024 20:27:55 +0530 Subject: [PATCH 2/7] Remove pipes where not required --- .github/workflows/tests.yml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index b9a19ce3d..cdee7a422 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -65,11 +65,9 @@ jobs: yarn --frozen-lockfile npm rebuild node-sass - name: Extract jsdocs and environment info - run: | - yarn pregenerate + run: yarn pregenerate - name: Run visual tests - run: | - yarn test:visual 2>&1 | tee test-output.log + run: yarn test:visual 2>&1 | tee test-output.log env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - name: Extract Percy build URL From 19654cf4765cec2501e0c56edf0e488adff48f58 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Tue, 6 Aug 2024 08:56:20 +0530 Subject: [PATCH 3/7] Change workflow to run on separate environment --- .github/workflows/tests.yml | 62 ----------------------- .github/workflows/visual_tests.yml | 80 ++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 62 deletions(-) create mode 100644 .github/workflows/visual_tests.yml diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index cdee7a422..347627c03 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -39,65 +39,3 @@ jobs: npm rebuild node-sass - name: Run tests run: yarn test - - visual_tests: - name: Frontend Visual Tests - needs: test - if: ${{ github.event_name == 'pull_request' && needs.test.result == 'success' }} - runs-on: ubuntu-latest - outputs: - percy_url: ${{ steps.extract-url.outputs.percy_url }} - steps: - - uses: actions/checkout@v4 - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version: '18.x' - - name: Cache Node.js modules - uses: actions/cache@v4 - with: - path: '**/node_modules' - key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.OS }}-node- - - name: Install dependencies - run: | - yarn --frozen-lockfile - npm rebuild node-sass - - name: Extract jsdocs and environment info - run: yarn pregenerate - - name: Run visual tests - run: yarn test:visual 2>&1 | tee test-output.log - env: - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - - name: Extract Percy build URL - id: extract-url - run: | - url=$(grep -o 'https://percy.io/[a-zA-Z0-9/_-]*' test-output.log | tail -1) - echo "percy_url=$url" >> $GITHUB_OUTPUT - - comment: - name: Comment Percy results - needs: visual_tests - if: ${{ needs.visual_tests.result == 'success' }} - runs-on: ubuntu-latest - steps: - - name: Post results comment - uses: thollander/actions-comment-pull-request@v2 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - message: | - ### Percy Visual Test Results - **Percy Dashboard:** [View Detailed Report](${{ needs.visual_tests.outputs.percy_url }}) - - **Environment:** - - **Node.js Version:** 18.x - - **OS:** Ubuntu-latest - - **Instructions for Reviewers:** - - Click on the [Percy Dashboard](${{ needs.visual_tests.outputs.percy_url }}) link to view detailed visual diffs. - - Review the visual changes highlighted in the report. - - Approve or request changes based on the visual differences. - comment_tag: execution - mode: recreate \ No newline at end of file diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml new file mode 100644 index 000000000..ab05ef0e1 --- /dev/null +++ b/.github/workflows/visual_tests.yml @@ -0,0 +1,80 @@ +name: Percy Visual Tests + +on: [pull_request_target] + +jobs: + pre_job: + name: Path match check + runs-on: ubuntu-latest + # Map a step output to a job output + outputs: + should_skip: ${{ steps.skip_check.outputs.should_skip }} + steps: + - id: skip_check + uses: fkirc/skip-duplicate-actions@master + with: + github_token: ${{ github.token }} + paths: '["**.vue", "**.js", "yarn.lock"]' + + visual_tests: + name: Frontend Visual Tests + needs: pre_job + if: ${{ needs.pre_job.outputs.should_skip != 'true' }} + runs-on: ubuntu-latest + environment: percy_tests + outputs: + percy_url: ${{ steps.extract-url.outputs.percy_url }} + steps: + - uses: actions/checkout@v4 + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '18.x' + - name: Cache Node.js modules + uses: actions/cache@v4 + with: + path: '**/node_modules' + key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.OS }}-node- + - name: Install dependencies + run: | + yarn --frozen-lockfile + npm rebuild node-sass + - name: Extract jsdocs and environment info + run: yarn pregenerate + - name: Run visual tests + run: yarn test:visual 2>&1 | tee test-output.log + env: + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} + - name: Extract Percy build URL + id: extract-url + run: | + url=$(grep -o 'https://percy.io/[a-zA-Z0-9/_-]*' test-output.log | tail -1) + echo "percy_url=$url" >> $GITHUB_OUTPUT + + comment: + name: Comment Percy results + needs: visual_tests + if: ${{ needs.visual_tests.result == 'success' }} + runs-on: ubuntu-latest + steps: + - name: Post results comment + uses: thollander/actions-comment-pull-request@v2 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + message: | + ### Percy Visual Test Results + **Percy Dashboard:** [View Detailed Report](${{ needs.visual_tests.outputs.percy_url }}) + + **Environment:** + - **Node.js Version:** 18.x + - **OS:** Ubuntu-latest + + **Instructions for Reviewers:** + - Click on the [Percy Dashboard](${{ needs.visual_tests.outputs.percy_url }}) link to view detailed visual diffs. + - Review the visual changes highlighted in the report. + - Approve or request changes based on the visual differences. + comment_tag: execution + mode: recreate From d921297d32077e2652d02d767093778c327fcb18 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Tue, 6 Aug 2024 21:52:25 +0530 Subject: [PATCH 4/7] Add puppeteer config for CI environments --- .github/workflows/visual_tests.yml | 4 ++++ .puppeteerrc.cjs | 8 ++++++++ 2 files changed, 12 insertions(+) create mode 100644 .puppeteerrc.cjs diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index ab05ef0e1..4ed63f11f 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -24,6 +24,8 @@ jobs: environment: percy_tests outputs: percy_url: ${{ steps.extract-url.outputs.percy_url }} + env: + CI: true steps: - uses: actions/checkout@v4 - name: Use Node.js @@ -41,6 +43,8 @@ jobs: run: | yarn --frozen-lockfile npm rebuild node-sass + - name: Download Chromium + run: npx puppeteer browsers install chrome - name: Extract jsdocs and environment info run: yarn pregenerate - name: Run visual tests diff --git a/.puppeteerrc.cjs b/.puppeteerrc.cjs new file mode 100644 index 000000000..803d42815 --- /dev/null +++ b/.puppeteerrc.cjs @@ -0,0 +1,8 @@ +const { join } = require('path'); + +/** + * @type {import("puppeteer").Configuration} + */ +module.exports = { + cacheDirectory: process.env.CI ? join(__dirname, '.cache', 'puppeteer') : undefined, +}; From 2e713bccf1a3f395bf43a7d8cfb155d3bb7991ca Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Wed, 7 Aug 2024 17:05:06 +0530 Subject: [PATCH 5/7] Remove .puppeteerrc.cjs --- .github/workflows/visual_tests.yml | 2 -- .puppeteerrc.cjs | 8 -------- 2 files changed, 10 deletions(-) delete mode 100644 .puppeteerrc.cjs diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index 4ed63f11f..a9b9162dd 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -24,8 +24,6 @@ jobs: environment: percy_tests outputs: percy_url: ${{ steps.extract-url.outputs.percy_url }} - env: - CI: true steps: - uses: actions/checkout@v4 - name: Use Node.js diff --git a/.puppeteerrc.cjs b/.puppeteerrc.cjs deleted file mode 100644 index 803d42815..000000000 --- a/.puppeteerrc.cjs +++ /dev/null @@ -1,8 +0,0 @@ -const { join } = require('path'); - -/** - * @type {import("puppeteer").Configuration} - */ -module.exports = { - cacheDirectory: process.env.CI ? join(__dirname, '.cache', 'puppeteer') : undefined, -}; From 97dbb74a69a2632e5ea1684dd4501d85f5d7cee9 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Wed, 7 Aug 2024 09:07:47 -0500 Subject: [PATCH 6/7] Checkout pr head --- .github/workflows/visual_tests.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index a9b9162dd..131497724 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -25,7 +25,10 @@ jobs: outputs: percy_url: ${{ steps.extract-url.outputs.percy_url }} steps: - - uses: actions/checkout@v4 + - name: Checkout code from PR + uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha }} - name: Use Node.js uses: actions/setup-node@v4 with: From bf8a17204c81c3c04b64fde03bde3fc7086afa78 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Wed, 7 Aug 2024 09:17:55 -0500 Subject: [PATCH 7/7] Update should skip to include style changes --- .github/workflows/visual_tests.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index 131497724..79e99015a 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -14,7 +14,7 @@ jobs: uses: fkirc/skip-duplicate-actions@master with: github_token: ${{ github.token }} - paths: '["**.vue", "**.js", "yarn.lock"]' + paths: '["**.vue", "**.js", "**.css", "**.scss", "yarn.lock"]' visual_tests: name: Frontend Visual Tests