Skip to content

πŸ‘€ Visual Regression Diff Finish #131

πŸ‘€ Visual Regression Diff Finish

πŸ‘€ Visual Regression Diff Finish #131

# Each PR will visual-regression diff that help to check code is work as expect.
name: πŸ‘€ Visual Regression Diff Finish
on:
workflow_run:
workflows: [πŸ‘€ Visual Regression Diff Build]
types:
- completed
permissions:
contents: read
jobs:
upstream-workflow-summary:
name: upstream workflow summary
runs-on: ubuntu-latest
outputs:
jobs: ${{ steps.visual_diff_build_job_status.outputs.result }}
upstream-job-link: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}/job/${{ steps.visual_diff_build_job_status.outputs.job-id }}
build-status: ${{ steps.visual_diff_build_job_status.outputs.build-status }}
steps:
- name: summary jobs status
uses: actions/github-script@v7
id: visual_diff_build_job_status
with:
script: |
const response = await github.rest.actions.listJobsForWorkflowRun({
owner: context.repo.owner,
repo: context.repo.repo,
run_id: ${{ github.event.workflow_run.id }},
});
// { [name]: [conclusion] }, e.g. { 'test image': 'success' }
const jobs = (response.data?.jobs ?? []).reduce((acc, job) => {
if(job?.status === 'completed' && 'name' in job && 'conclusion' in job) {
acc[job.name] = {
id: job.id,
status: job.conclusion,
};
}
return acc;
}, {});
const total = Object.keys(jobs).length;
if(total === 0) core.setFailed('no jobs found');
// the name here must be the same as `jobs.xxx.{name}`
console.log('visual-diff report job status: %s', jobs['visual-diff report'].status);
// set output
core.setOutput('job-id', jobs['visual-diff report'].id);
core.setOutput('build-status', jobs['visual-diff report'].status);
return jobs;
download-visual-regression-report:
name: download visual-regression report
permissions:
actions: read # for dawidd6/action-download-artifact to query and download artifacts
issues: write # for actions-cool/maintain-one-comment to modify or create issue comments
pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments
statuses: write
runs-on: ubuntu-latest
needs: [upstream-workflow-summary]
steps:
- uses: actions/checkout@v4
- uses: oven-sh/setup-bun@v2
# We need get persist-index first
- name: download image snapshot artifact
uses: dawidd6/action-download-artifact@v6
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
name: visual-regression-diff-ref
path: ./tmp
# Save PR id to output
- name: save PR id
id: pr
run: |
pr_id=$(<tmp/visual-regression-pr-id.txt)
if ! [[ "$pr_id" =~ ^[0-9]+$ ]]; then
echo "Error: pr-id.txt does not contain a valid numeric PR id. Please check."
exit 1
fi
echo "id=$pr_id" >> $GITHUB_OUTPUT
# Download report artifact
- name: download report artifact
id: download_report
if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
uses: dawidd6/action-download-artifact@v6
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
name: visual-regression-report
path: ./tmp
# unzip report and then upload them to oss
- name: upload visual-regression report
id: report
env:
ALI_OSS_AK_ID: ${{ secrets.ALI_OSS_AK_ID }}
ALI_OSS_AK_SECRET: ${{ secrets.ALI_OSS_AK_SECRET }}
PR_ID: ${{ steps.pr.outputs.id }}
run: |
mkdir ./visualRegressionReport
tar -xzvf tmp/visualRegressionReport.tar.gz -C ./visualRegressionReport
echo "βœ… Uncompress Finished"
rm package.json
bun add ali-oss --no-save
echo "βœ… Install `ali-oss` Finished"
echo "πŸ€– Uploading"
node scripts/visual-regression/upload.js ./visualRegressionReport --ref=pr-$PR_ID
echo "βœ… Uploaded"
delimiter="$(openssl rand -hex 8)"
echo "content<<${delimiter}" >> "${GITHUB_OUTPUT}"
echo "$(<visualRegressionReport/report.md)" >> "${GITHUB_OUTPUT}"
echo "${delimiter}" >> "${GITHUB_OUTPUT}"
- name: success comment
uses: actions-cool/maintain-one-comment@v3
if: ${{ steps.report.outcome == 'success' }}
with:
token: ${{ secrets.GITHUB_TOKEN }}
body: |
${{ steps.report.outputs.content }}
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
body-include: <!-- VISUAL_DIFF_REGRESSION_HOOK -->
number: ${{ steps.pr.outputs.id }}
- name: failed comment
if: ${{ steps.download_report.outcome == 'failure' || steps.report.outcome == 'failure' || failure() }}
uses: actions-cool/maintain-one-comment@v3
with:
token: ${{ secrets.GITHUB_TOKEN }}
body: |
## Visual Regression Build for PR #${{ steps.pr.outputs.id }} Failed ❌
Potential causes:
- `upstream workflow` status: ${{ needs.upstream-workflow-summary.outputs.build-status }} [upstream job link](${{ needs.upstream-workflow-summary.outputs.upstream-job-link }})
- `current workflow` summary:
- `download report artifact` status: ${{ steps.download_report.outcome }}
- `report upload` status: ${{ steps.report.outcome }}
- workflow url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
body-include: <!-- VISUAL_DIFF_REGRESSION_HOOK -->
number: ${{ steps.pr.outputs.id }}
# Resync commit status. This will be also reset by `visual-regression-diff-approver`
- name: Reset Commit Status
uses: actions/github-script@v7
if: ${{ steps.report.outcome == 'success' }}
env:
PR_ID: ${{ steps.pr.outputs.id }}
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const prResponse = await github.rest.pulls.get({
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: process.env.PR_ID,
});
const prHeadSha = prResponse.data.head.sha;
const fullContent = `${{ toJSON(steps.report.outputs.content) }}`;
const hasVisualDiffSuccess = fullContent.includes('VISUAL_DIFF_SUCCESS');
const hasVisualDiffFailed = fullContent.includes('VISUAL_DIFF_FAILED');
const mergedStatus = hasVisualDiffSuccess ? 'success' : hasVisualDiffFailed ? 'failure' : 'pending';
await github.rest.repos.createCommitStatus({
owner: context.repo.owner,
repo: context.repo.repo,
sha: prHeadSha,
state: mergedStatus,
context: 'Visual Regression Diff Wait Approve',
description: hasVisualDiffSuccess ? 'Visual diff check pass' : 'Visual diff check failed',
});