Skip to content

Commit fbc541e

Browse files
amanmahajan7github-actions[bot]nstepien
authored
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 <[email protected]> * fix viewport * Remove `--set-upstream` * Update screenshots Co-authored-by: amanmahajan7 * Update test/visual/basicGrid.test.tsx Co-authored-by: Nicolas Stepien <[email protected]> * Try gh cli * Revert "Try gh cli" This reverts commit 6928269. * 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 <[email protected]> Co-authored-by: Nicolas Stepien <[email protected]>
1 parent 9c1bf6b commit fbc541e

File tree

8 files changed

+139
-4
lines changed

8 files changed

+139
-4
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ jobs:
1414
with:
1515
node-version: 25
1616
check-latest: true
17-
- name: npm install
17+
- name: Install dependencies
1818
run: npm i
1919
- name: Biome
2020
run: node --run biome:ci
@@ -33,6 +33,8 @@ jobs:
3333
- name: Test
3434
run: node --run test
3535
timeout-minutes: 4
36+
- name: Visual regression test
37+
run: node --run visual
3638
- name: Upload coverage
3739
uses: codecov/codecov-action@v5
3840
with:

‎.github/workflows/update-screenshots.yml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
name: Update Screenshots
2+
3+
on:
4+
pull_request:
5+
types: [labeled]
6+
workflow_dispatch:
7+
8+
env:
9+
AUTHOR_NAME: 'github-actions[bot]'
10+
AUTHOR_EMAIL: '41898282+github-actions[bot]@users.noreply.github.com'
11+
COMMIT_MESSAGE: |
12+
Update screenshots
13+
14+
Co-authored-by: ${{ github.actor }}
15+
16+
jobs:
17+
update-screenshots:
18+
if: ${{ github.event.label.name == 'Update Screenshots' }}
19+
runs-on: ubuntu-latest
20+
21+
permissions:
22+
contents: write
23+
pull-requests: write
24+
25+
# one at a time per branch
26+
concurrency:
27+
group: update-screenshots@${{ github.head_ref }}
28+
cancel-in-progress: true
29+
30+
steps:
31+
- uses: actions/checkout@v5
32+
with:
33+
ref: ${{ github.head_ref }}
34+
- uses: actions/setup-node@v6
35+
with:
36+
node-version: 25
37+
check-latest: true
38+
- name: Remove label
39+
if: github.event_name == 'pull_request'
40+
run: gh pr edit --remove-label 'Update Screenshots'
41+
env:
42+
GH_TOKEN: ${{ github.token }}
43+
- name: Install dependencies
44+
run: npm i
45+
- name: Install Playwright Browsers
46+
run: npx playwright install chromium firefox
47+
- name: Update screenshots
48+
run: |
49+
rm -r test/visual/__screenshots__
50+
node --run visual:update
51+
- name: Push new screenshots
52+
run: |
53+
git config --global user.name "${{ env.AUTHOR_NAME }}"
54+
git config --global user.email "${{ env.AUTHOR_EMAIL }}"
55+
git add test/visual/__screenshots__/.
56+
git diff-index --quiet HEAD || git commit -m "${{ env.COMMIT_MESSAGE }}"
57+
git push

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/lib
55
/node_modules
66
/package-lock.json
7-
__screenshots__
7+
test/browser/**/__screenshots__
88

99
npm-debug.log
1010
**.orig

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,10 @@
3535
"preview": "vite preview",
3636
"build:website": "vite build",
3737
"build": "rolldown -c",
38-
"test": "vitest run",
39-
"test:watch": "vitest watch",
38+
"test": "vitest run --project browser --project node --coverage.reportsDirectory='./coverage/test'",
39+
"test:watch": "vitest watch --project browser --project node",
40+
"visual": "vitest run --project visual --coverage.reportsDirectory='./coverage/visual'",
41+
"visual:update": "vitest run --project visual --update",
4042
"format": "biome format --write",
4143
"check": "biome check --error-on-warnings",
4244
"biome:ci": "biome ci --error-on-warnings",

‎test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png‎

18.5 KB
Loading

‎test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png‎

23.8 KB
Loading

‎test/visual/basicGrid.test.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { page } from 'vitest/browser';
2+
3+
import { DataGrid, SelectColumn, type Column } from '../../src';
4+
import { getGrid } from '../browser/utils';
5+
6+
interface Row {
7+
id: number;
8+
name: string;
9+
}
10+
11+
const columns: readonly Column<Row, Row>[] = [
12+
SelectColumn,
13+
{
14+
key: 'name',
15+
name: 'Name',
16+
renderSummaryCell(props) {
17+
return props.row.name;
18+
}
19+
}
20+
];
21+
22+
const rows: readonly Row[] = [
23+
{ id: 1, name: 'Row 1' },
24+
{ id: 2, name: 'Row 2' },
25+
{ id: 3, name: 'Row 3' }
26+
];
27+
28+
const topSummaryRows: readonly Row[] = [
29+
{ id: 4, name: 'Top Summary Row 1' },
30+
{ id: 5, name: 'Top Summary Row 2' }
31+
];
32+
33+
const bottomSummaryRows: readonly Row[] = [
34+
{ id: 6, name: 'Bottom Summary Row 1' },
35+
{ id: 7, name: 'Bottom Summary Row 2' }
36+
];
37+
38+
function rowKeyGetter(row: Row) {
39+
return row.id;
40+
}
41+
42+
test('basic grid', async () => {
43+
await page.render(
44+
<DataGrid
45+
rowKeyGetter={rowKeyGetter}
46+
columns={columns}
47+
rows={rows}
48+
topSummaryRows={topSummaryRows}
49+
bottomSummaryRows={bottomSummaryRows}
50+
/>
51+
);
52+
53+
await expect(getGrid()).toMatchScreenshot('basic-grid');
54+
});

‎vite.config.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,26 @@ export default defineConfig(
137137
setupFiles: ['test/setupBrowser.ts']
138138
}
139139
},
140+
{
141+
extends: true,
142+
test: {
143+
name: 'visual',
144+
include: ['test/visual/*.test.*'],
145+
browser: {
146+
enabled: true,
147+
provider: playwright({
148+
contextOptions: {
149+
viewport
150+
}
151+
}),
152+
instances: [{ browser: 'chromium' }, { browser: 'firefox' }],
153+
viewport,
154+
headless: true,
155+
screenshotFailures: false
156+
},
157+
setupFiles: ['test/setupBrowser.ts']
158+
}
159+
},
140160
{
141161
extends: true,
142162
test: {

0 commit comments

Comments
 (0)