diff --git a/.github/githubUtils.js b/.github/githubUtils.js new file mode 100644 index 000000000..18381ab78 --- /dev/null +++ b/.github/githubUtils.js @@ -0,0 +1,43 @@ +async function generateComment(percyUrl) { + return ` +### Percy Visual Test Results + +**Percy Dashboard:** [View Detailed Report](${percyUrl}) + +**Environment:** +- **Node.js Version:** 18.x +- **OS:** Ubuntu-latest + +**Instructions for Reviewers:** +- Click on the [Percy Dashboard](${percyUrl}) link to view detailed visual diffs. +- Review the visual changes highlighted in the report. +- Approve or request changes based on the visual differences. +`; +} + +async function findComment(github, context, issue_number) { + let comment; + let page = 1 + while (!comment) { + const request = await github.rest.issues.listComments({ + issue_number, + owner: context.repo.owner, + repo: context.repo.repo, + page, + }) + const comments = request.data + if (!comments.length) { + return; + } + comment = comments.find(c => c.body && c.body.includes('### Percy Visual Test Results')); + if (comment) { + return comment.id.toString() + } + page += 1; + } +} + +module.exports = { + findComment, + generateComment, +} diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index 79e99015a..39c6b64fb 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -64,22 +64,46 @@ jobs: 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 }} + - name: Checkout code from PR + uses: actions/checkout@v4 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 + ref: ${{ github.event.pull_request.head.sha }} + - name: Define comment body + id: comment-text + uses: actions/github-script@v7 + with: + script: | + const percyUrl = "${{ needs.visual_tests.outputs.percy_url }}"; + const utils = require('./.github/githubUtils.js'); + return await utils.generateComment(percyUrl); + - name: Find existing comment + id: find-comment + uses: actions/github-script@v7 + with: + script: | + const utils = require('./.github/githubUtils.js'); + return await utils.findComment(github, context, context.issue.number); + - name: Create build comment + if: ${{!steps.find-comment.outputs.result}} + uses: actions/github-script@v7 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: ${{ steps.comment-text.outputs.result }} + }) + - name: Update build comment + if: ${{steps.find-comment.outputs.result}} + uses: actions/github-script@v7 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: ${{steps.find-comment.outputs.result}}, + body: ${{ steps.comment-text.outputs.result }} + })