From 2cba1d07c795022f5cabb400f74f58147c16c72c Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 27 Oct 2025 11:07:13 -0500 Subject: [PATCH] Setup VRT (#3894) * Initial commit * Fix typo * Fix typo * Move visual folder inside test folder * Use version instead of SHA * eslint fixes * Fix path * Ignore __screenshots__ in the browser folder * Update screenshots Co-authored-by: amanmahajan7 * Update node version * Delete screenshots * Update screenshots Co-authored-by: amanmahajan7 * Try `workflow_dispatch` * delete screenshots * Add `workflow_dispatch:` * Update screenshots Co-authored-by: amanmahajan7 * Remove `workflow_dispatch:` * try to trigger ci workflow * add test * Update screenshots Co-authored-by: nstepien * add permission * Update screenshots Co-authored-by: nstepien * ci: add workflow_dispatch trigger * geren * Update screenshots Co-authored-by: nstepien * add workflow_dispatch there * Remove the color test * Manually delete screenshots for now * Remove directory before generating screenshots * rename screenshots * Fix command * Update screenshots Co-authored-by: amanmahajan7 * Revert name * Update screenshots Co-authored-by: amanmahajan7 * Update .github/workflows/update-screenshots.yml Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * fix viewport * Remove `--set-upstream` * Update screenshots Co-authored-by: amanmahajan7 * Update test/visual/basicGrid.test.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Try gh cli * Revert "Try gh cli" This reverts commit 6928269354eb704ec95744da2a4563151dfff761. * try `gh pr edit` * Remove invalid token * Add env * Update screenshots Co-authored-by: amanmahajan7 * only remove the label if it's a pr build * nit --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Nicolas Stepien Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- .github/workflows/ci.yml | 4 +- .github/workflows/update-screenshots.yml | 57 ++++++++++++++++++ .gitignore | 2 +- package.json | 6 +- .../basic-grid-chromium-linux.png | Bin 0 -> 18924 bytes .../basic-grid-firefox-linux.png | Bin 0 -> 24416 bytes test/visual/basicGrid.test.tsx | 54 +++++++++++++++++ vite.config.ts | 20 ++++++ 8 files changed, 139 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/update-screenshots.yml create mode 100644 test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png create mode 100644 test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png create mode 100644 test/visual/basicGrid.test.tsx diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 96b0653fdb..579172773d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,7 +14,7 @@ jobs: with: node-version: 25 check-latest: true - - name: npm install + - name: Install dependencies run: npm i - name: Biome run: node --run biome:ci @@ -33,6 +33,8 @@ jobs: - name: Test run: node --run test timeout-minutes: 4 + - name: Visual regression test + run: node --run visual - name: Upload coverage uses: codecov/codecov-action@v5 with: diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml new file mode 100644 index 0000000000..6c87f04775 --- /dev/null +++ b/.github/workflows/update-screenshots.yml @@ -0,0 +1,57 @@ +name: Update Screenshots + +on: + pull_request: + types: [labeled] + workflow_dispatch: + +env: + AUTHOR_NAME: 'github-actions[bot]' + AUTHOR_EMAIL: '41898282+github-actions[bot]@users.noreply.github.com' + COMMIT_MESSAGE: | + Update screenshots + + Co-authored-by: ${{ github.actor }} + +jobs: + update-screenshots: + if: ${{ github.event.label.name == 'Update Screenshots' }} + runs-on: ubuntu-latest + + permissions: + contents: write + pull-requests: write + + # one at a time per branch + concurrency: + group: update-screenshots@${{ github.head_ref }} + cancel-in-progress: true + + steps: + - uses: actions/checkout@v5 + with: + ref: ${{ github.head_ref }} + - uses: actions/setup-node@v6 + with: + node-version: 25 + check-latest: true + - name: Remove label + if: github.event_name == 'pull_request' + run: gh pr edit --remove-label 'Update Screenshots' + env: + GH_TOKEN: ${{ github.token }} + - name: Install dependencies + run: npm i + - name: Install Playwright Browsers + run: npx playwright install chromium firefox + - name: Update screenshots + run: | + rm -r test/visual/__screenshots__ + node --run visual:update + - name: Push new screenshots + run: | + git config --global user.name "${{ env.AUTHOR_NAME }}" + git config --global user.email "${{ env.AUTHOR_EMAIL }}" + git add test/visual/__screenshots__/. + git diff-index --quiet HEAD || git commit -m "${{ env.COMMIT_MESSAGE }}" + git push diff --git a/.gitignore b/.gitignore index 202fe72c65..47ab83bf80 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,7 @@ /lib /node_modules /package-lock.json -__screenshots__ +test/browser/**/__screenshots__ npm-debug.log **.orig diff --git a/package.json b/package.json index 1ca8a236cf..6f66018925 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,10 @@ "preview": "vite preview", "build:website": "vite build", "build": "rolldown -c", - "test": "vitest run", - "test:watch": "vitest watch", + "test": "vitest run --project browser --project node --coverage.reportsDirectory='./coverage/test'", + "test:watch": "vitest watch --project browser --project node", + "visual": "vitest run --project visual --coverage.reportsDirectory='./coverage/visual'", + "visual:update": "vitest run --project visual --update", "format": "biome format --write", "check": "biome check --error-on-warnings", "biome:ci": "biome ci --error-on-warnings", diff --git a/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png b/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b055c80eb5a394a63a8ee7b54d5ec616da1184ba GIT binary patch literal 18924 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 literal 0 HcmV?d00001 diff --git a/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png b/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bcfa819d45ce37b1c8d36f50ea5beb7c2d0b56b0 GIT binary patch literal 24416 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[] = [ + SelectColumn, + { + key: 'name', + name: 'Name', + renderSummaryCell(props) { + return props.row.name; + } + } +]; + +const rows: readonly Row[] = [ + { id: 1, name: 'Row 1' }, + { id: 2, name: 'Row 2' }, + { id: 3, name: 'Row 3' } +]; + +const topSummaryRows: readonly Row[] = [ + { id: 4, name: 'Top Summary Row 1' }, + { id: 5, name: 'Top Summary Row 2' } +]; + +const bottomSummaryRows: readonly Row[] = [ + { id: 6, name: 'Bottom Summary Row 1' }, + { id: 7, name: 'Bottom Summary Row 2' } +]; + +function rowKeyGetter(row: Row) { + return row.id; +} + +test('basic grid', async () => { + await page.render( + + ); + + await expect(getGrid()).toMatchScreenshot('basic-grid'); +}); diff --git a/vite.config.ts b/vite.config.ts index 9c3cf13f04..8512ec3602 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -137,6 +137,26 @@ export default defineConfig( setupFiles: ['test/setupBrowser.ts'] } }, + { + extends: true, + test: { + name: 'visual', + include: ['test/visual/*.test.*'], + browser: { + enabled: true, + provider: playwright({ + contextOptions: { + viewport + } + }), + instances: [{ browser: 'chromium' }, { browser: 'firefox' }], + viewport, + headless: true, + screenshotFailures: false + }, + setupFiles: ['test/setupBrowser.ts'] + } + }, { extends: true, test: {