@public-ui/visual-tests 4.0.0-alpha.1 → 4.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +3 -2
  2. package/package.json +11 -9
  3. package/playwright.config.js +11 -1
  4. package/src/index.js +5 -5
  5. package/tests/axe-snapshots.spec.js +37 -27
  6. package/tests/sample-app.routes.js +216 -69
  7. package/tests/theme-snapshots.spec.js +1 -1
package/README.md CHANGED
@@ -45,7 +45,7 @@ Add the following npm scripts to the theme's `package.json`:
45
45
  {
46
46
  "scripts": {
47
47
  "test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
48
- "test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots=changed"
48
+ "test:update:e2e": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots=changed"
49
49
  }
50
50
  }
51
51
  ```
@@ -56,10 +56,11 @@ Add the following npm scripts to the theme's `package.json`:
56
56
  - `THEME_EXPERT`: Define the name of the export within the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
57
57
  - `KOLIBRI_VISUAL_TESTS_TIMEOUT`: Define the Playwright [test timeout](https://playwright.dev/docs/test-timeouts).
58
58
  - `KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT`: Define the Playwright [expect timeout](https://playwright.dev/docs/test-timeouts).
59
+ - `KOLIBRI_VISUAL_TESTS_COLOR_SCHEME`: Choose the [CSS color scheme](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) for the browser context. Supported values are `light` (default) and `dark`.
59
60
 
60
61
  Run the tests with `npm test`. The first time, this will create a new folder `snapshots` which is supposed to be committed to the repository.
61
62
  In the following runs, new screenshots will be compared to this reference.
62
63
 
63
- To update the reference screenshots call `npm run test-update`.
64
+ To update the reference screenshots call `npm run test:update`.
64
65
 
65
66
  For details on theming see the [default theme README](../../themes/default/README.md).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/visual-tests",
3
- "version": "4.0.0-alpha.1",
3
+ "version": "4.0.0-alpha.11",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -25,22 +25,24 @@
25
25
  "kolibri-visual-test": "src/index.js"
26
26
  },
27
27
  "dependencies": {
28
- "axe-playwright": "2.2.2",
28
+ "@axe-core/playwright": "4.11.0",
29
+ "axe-html-reporter": "2.2.11",
29
30
  "portfinder": "1.0.38",
30
31
  "serve": "14.2.5",
31
- "@public-ui/sample-react": "4.0.0-alpha.1"
32
+ "@public-ui/sample-react": "4.0.0-alpha.11"
32
33
  },
33
34
  "devDependencies": {
34
- "@babel/eslint-parser": "7.28.4",
35
+ "@babel/eslint-parser": "7.28.5",
35
36
  "@babel/plugin-syntax-import-attributes": "7.27.1",
36
- "@babel/preset-env": "7.28.3",
37
- "@playwright/test": "1.55.1",
37
+ "@babel/preset-env": "7.28.5",
38
+ "@playwright/test": "1.57.0",
38
39
  "eslint": "8.57.1",
39
- "knip": "5.64.1",
40
- "prettier": "3.6.2"
40
+ "knip": "5.73.4",
41
+ "prettier": "3.7.4",
42
+ "prettier-plugin-organize-imports": "4.3.0"
41
43
  },
42
44
  "peerDependencies": {
43
- "@playwright/test": "1.55.1"
45
+ "@playwright/test": "1.57.0"
44
46
  },
45
47
  "files": [
46
48
  "playwright.config.js",
package/playwright.config.js CHANGED
@@ -12,6 +12,16 @@ const EXPECT_TIMEOUT = parseInt(process.env.KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT
12
12
  const BUILD_PATH = process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH ?? '';
13
13
  const THEME = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
14
14
 
15
+ const VALID_COLOR_SCHEMES = ['light', 'dark'];
16
+ const colorSchemeInput = process.env.KOLIBRI_VISUAL_TESTS_COLOR_SCHEME;
17
+ const colorSchema = (colorSchemeInput || 'light').toLocaleLowerCase();
18
+
19
+ if (!VALID_COLOR_SCHEMES.includes(colorSchema)) {
20
+ throw new Error(
21
+ `Environment variable KOLIBRI_VISUAL_TESTS_COLOR_SCHEME must be one of "${VALID_COLOR_SCHEMES.join('", "')}" (received "${colorSchemeInput}").`,
22
+ );
23
+ }
24
+
15
25
  /**
16
26
  * See https://playwright.dev/docs/test-configuration.
17
27
  */
@@ -68,5 +78,5 @@ export default defineConfig({
68
78
  url: BASE_URL,
69
79
  reuseExistingServer: false,
70
80
  },
71
- snapshotPathTemplate: `{snapshotDir}/theme-${THEME}/{arg}-{projectName}-{platform}{ext}`,
81
+ snapshotPathTemplate: `{snapshotDir}/theme-${THEME}${colorSchema === 'light' ? '' : `-${colorSchema}`}/{arg}-{projectName}-{platform}{ext}`,
72
82
  });
package/src/index.js CHANGED
@@ -1,12 +1,12 @@
1
- import child_process from 'node:child_process';
2
- import path from 'node:path';
3
- import { fileURLToPath, pathToFileURL } from 'url';
4
1
  import * as crypto from 'crypto';
5
- import { readFile } from 'fs/promises';
6
2
  import * as fs from 'fs';
3
+ import { readFile } from 'fs/promises';
4
+ import child_process from 'node:child_process';
5
+ import os from 'node:os';
6
+ import path from 'node:path';
7
7
  import portfinder from 'portfinder';
8
8
  import * as process from 'process';
9
- import os from 'node:os';
9
+ import { fileURLToPath, pathToFileURL } from 'url';
10
10
 
11
11
  const tempDir = process.env.RUNNER_TEMP || process.env.TMPDIR || os.tmpdir(); // TODO: Check on Windows
12
12
 
package/tests/axe-snapshots.spec.js CHANGED
@@ -1,7 +1,12 @@
1
+ import AxeBuilder from '@axe-core/playwright';
1
2
  import { test } from '@playwright/test';
2
- import { checkA11y, injectAxe } from 'axe-playwright';
3
- import { ROUTES } from './sample-app.routes.js';
3
+ import axeHtmlReporter from 'axe-html-reporter';
4
4
  import process from 'process';
5
+ import { ROUTES } from './sample-app.routes.js';
6
+
7
+ const { createHtmlReport } = axeHtmlReporter;
8
+
9
+ const AXE_TAGS = ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'];
5
10
 
6
11
  const themeName = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
7
12
  const rename = (snapshotName) => {
@@ -25,6 +30,25 @@ const rename = (snapshotName) => {
25
30
  return result;
26
31
  };
27
32
 
33
+ const sanitizeRouteForReport = (route) => route.replace(/[/?]/g, '-').replace(/^-+/, '') || 'root';
34
+
35
+ const buildReportOptions = (testInfo, route) => ({
36
+ projectKey: `axe-${themeName}`,
37
+ reportFileName: `${sanitizeRouteForReport(route)}.html`,
38
+ outputDirPath: rename(testInfo.outputDir),
39
+ outputDir: `axe-${themeName}`,
40
+ });
41
+
42
+ const logViolations = (route, violations) => {
43
+ if (!violations?.length) {
44
+ return;
45
+ }
46
+ console.warn(`Axe found ${violations.length} violation(s) on ${route}`);
47
+ for (const violation of violations) {
48
+ console.warn(`- ${violation.id}: ${violation.help} (${violation.nodes.length} nodes)`);
49
+ }
50
+ };
51
+
28
52
  // https://playwright.dev/docs/emulation
29
53
  test.use({
30
54
  colorScheme: 'light',
@@ -43,7 +67,6 @@ ROUTES.forEach((options, route) => {
43
67
  return;
44
68
  }
45
69
  test(`snapshot for ${route}`, async ({ page }, testInfo) => {
46
- const outputPath = rename(testInfo.outputDir);
47
70
  const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
48
71
  await page.goto(`/#${route}${hideMenusParam}`);
49
72
  await page.waitForLoadState('networkidle');
@@ -62,29 +85,16 @@ ROUTES.forEach((options, route) => {
62
85
  await page.waitForTimeout(options?.snapshot?.waitForTimeout);
63
86
  }
64
87
 
65
- await injectAxe(page);
66
- await checkA11y(
67
- page,
68
- undefined,
69
- {
70
- axeOptions: {
71
- runOnly: {
72
- type: 'tag',
73
- values: ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'],
74
- },
75
- },
76
- detailedReport: true,
77
- detailedReportOptions: {
78
- html: true,
79
- },
80
- },
81
- true, // options?.axe?.skipFailures ?? false,
82
- 'html',
83
- {
84
- outputDirPath: outputPath.replace(/\/[^/]+$/, ''),
85
- outputDir: `axe-${themeName}`,
86
- reportFileName: `${route.replace(/[/?]/g, '-')}.html`,
87
- },
88
- );
88
+ const builder = new AxeBuilder({ page }).withTags(AXE_TAGS);
89
+ const results = await builder.analyze();
90
+ await testInfo.attach('axe-results', {
91
+ body: JSON.stringify(results, null, 2),
92
+ contentType: 'application/json',
93
+ });
94
+ createHtmlReport({
95
+ results,
96
+ options: buildReportOptions(testInfo, route),
97
+ });
98
+ logViolations(route, results.violations);
89
99
  });
90
100
  });
package/tests/sample-app.routes.js CHANGED
@@ -15,7 +15,7 @@ export const ROUTES = new Map();
15
15
  * - skip: boolean (Default: false)
16
16
  * - viewportSize:
17
17
  * - width (Default: 800)
18
- * - height (Default: 600)
18
+ * - height (Default: 100)
19
19
  * - waitForTimeout: number (Default: 15000)
20
20
  * - zoom:
21
21
  * - options:
@@ -119,57 +119,49 @@ ROUTES.set('button-link/image', {
119
119
  },
120
120
  },
121
121
  });
122
- ROUTES.set('button/basic', {
122
+ ROUTES.set('button/variants', {
123
123
  snapshot: {
124
124
  zoom: {
125
125
  skip: true,
126
126
  },
127
127
  },
128
128
  });
129
- ROUTES.set('button/icons', {
129
+ ROUTES.set('button/disabled', {
130
130
  snapshot: {
131
- skip: true,
132
131
  zoom: {
133
132
  skip: true,
134
133
  },
135
134
  },
136
135
  });
137
- ROUTES.set('button/width', {
136
+ ROUTES.set('button/hide-label', {
138
137
  snapshot: {
139
- skip: true,
140
138
  zoom: {
141
139
  skip: true,
142
140
  },
143
141
  },
144
142
  });
145
- ROUTES.set('button/access-key', {
143
+ ROUTES.set('button/icons', {
146
144
  snapshot: {
147
- skip: true,
148
145
  zoom: {
149
146
  skip: true,
150
147
  },
151
148
  },
152
149
  });
153
- ROUTES.set('button/baselined', {
150
+ ROUTES.set('button/short-key', {
154
151
  snapshot: {
155
- skip: true,
156
152
  zoom: {
157
153
  skip: true,
158
154
  },
159
155
  },
160
156
  });
161
- ROUTES.set('button/short-key', {
157
+ ROUTES.set('card/basic', {
162
158
  snapshot: {
163
- viewportSize: {
164
- width: 800,
165
- height: 434,
166
- },
167
159
  zoom: {
168
160
  skip: true,
169
161
  },
170
162
  },
171
163
  });
172
- ROUTES.set('card/basic', {
164
+ ROUTES.set('card/headlines', {
173
165
  snapshot: {
174
166
  zoom: {
175
167
  skip: true,
@@ -297,7 +289,18 @@ ROUTES.set('icon/basic', {
297
289
  snapshot: {
298
290
  viewportSize: {
299
291
  width: 60,
300
- height: 80,
292
+ height: 200,
293
+ },
294
+ zoom: {
295
+ skip: true,
296
+ },
297
+ },
298
+ });
299
+ ROUTES.set('icon/font-awesome', {
300
+ snapshot: {
301
+ viewportSize: {
302
+ width: 250,
303
+ height: 345,
301
304
  },
302
305
  zoom: {
303
306
  skip: true,
@@ -319,7 +322,7 @@ ROUTES.set('input-checkbox/basic?noColumns', {
319
322
  snapshot: {
320
323
  viewportSize: {
321
324
  width: 500,
322
- height: 100,
325
+ height: 0,
323
326
  },
324
327
  zoom: {
325
328
  skip: true,
@@ -333,7 +336,7 @@ ROUTES.set('input-checkbox/button?noColumns', {
333
336
  snapshot: {
334
337
  viewportSize: {
335
338
  width: 500,
336
- height: 100,
339
+ height: 0,
337
340
  },
338
341
  zoom: {
339
342
  skip: true,
@@ -347,7 +350,7 @@ ROUTES.set('input-checkbox/switch?noColumns', {
347
350
  snapshot: {
348
351
  viewportSize: {
349
352
  width: 500,
350
- height: 100,
353
+ height: 0,
351
354
  },
352
355
  zoom: {
353
356
  skip: true,
@@ -358,7 +361,7 @@ ROUTES.set('input-color/basic?noColumns', {
358
361
  snapshot: {
359
362
  viewportSize: {
360
363
  width: 500,
361
- height: 100,
364
+ height: 0,
362
365
  },
363
366
  zoom: {
364
367
  skip: true,
@@ -369,7 +372,7 @@ ROUTES.set('input-date/basic?noColumns', {
369
372
  snapshot: {
370
373
  viewportSize: {
371
374
  width: 500,
372
- height: 100,
375
+ height: 0,
373
376
  },
374
377
  zoom: {
375
378
  skip: true,
@@ -380,7 +383,7 @@ ROUTES.set('input-email/basic?noColumns', {
380
383
  snapshot: {
381
384
  viewportSize: {
382
385
  width: 500,
383
- height: 100,
386
+ height: 0,
384
387
  },
385
388
  zoom: {
386
389
  skip: true,
@@ -391,7 +394,7 @@ ROUTES.set('input-file/basic?noColumns', {
391
394
  snapshot: {
392
395
  viewportSize: {
393
396
  width: 500,
394
- height: 100,
397
+ height: 0,
395
398
  },
396
399
  zoom: {
397
400
  skip: true,
@@ -402,7 +405,18 @@ ROUTES.set('input-number/basic?noColumns', {
402
405
  snapshot: {
403
406
  viewportSize: {
404
407
  width: 500,
405
- height: 100,
408
+ height: 0,
409
+ },
410
+ zoom: {
411
+ skip: true,
412
+ },
413
+ },
414
+ });
415
+ ROUTES.set('input-number/number-formatter', {
416
+ snapshot: {
417
+ viewportSize: {
418
+ width: 500,
419
+ height: 0,
406
420
  },
407
421
  zoom: {
408
422
  skip: true,
@@ -413,7 +427,7 @@ ROUTES.set('input-password/basic?noColumns', {
413
427
  snapshot: {
414
428
  viewportSize: {
415
429
  width: 500,
416
- height: 100,
430
+ height: 0,
417
431
  },
418
432
  zoom: {
419
433
  skip: true,
@@ -424,7 +438,7 @@ ROUTES.set('input-password/show-password?noColumns', {
424
438
  snapshot: {
425
439
  viewportSize: {
426
440
  width: 500,
427
- height: 100,
441
+ height: 0,
428
442
  },
429
443
  zoom: {
430
444
  skip: true,
@@ -438,7 +452,7 @@ ROUTES.set('input-radio/basic?noColumns', {
438
452
  snapshot: {
439
453
  viewportSize: {
440
454
  width: 500,
441
- height: 100,
455
+ height: 0,
442
456
  },
443
457
  zoom: {
444
458
  skip: true,
@@ -449,7 +463,7 @@ ROUTES.set('input-radio/horizontal?noColumns', {
449
463
  snapshot: {
450
464
  viewportSize: {
451
465
  width: 500,
452
- height: 100,
466
+ height: 0,
453
467
  },
454
468
  zoom: {
455
469
  skip: true,
@@ -460,7 +474,7 @@ ROUTES.set('input-radio/object?noColumns', {
460
474
  snapshot: {
461
475
  viewportSize: {
462
476
  width: 500,
463
- height: 100,
477
+ height: 0,
464
478
  },
465
479
  zoom: {
466
480
  skip: true,
@@ -471,7 +485,7 @@ ROUTES.set('input-range/basic?noColumns', {
471
485
  snapshot: {
472
486
  viewportSize: {
473
487
  width: 500,
474
- height: 100,
488
+ height: 0,
475
489
  },
476
490
  zoom: {
477
491
  skip: true,
@@ -479,10 +493,130 @@ ROUTES.set('input-range/basic?noColumns', {
479
493
  },
480
494
  });
481
495
  ROUTES.set('input-text/basic?noColumns', {
496
+ snapshot: {
497
+ skip: true,
498
+ zoom: {
499
+ skip: true,
500
+ },
501
+ },
502
+ });
503
+ ROUTES.set('input-text/message-types?noColumns', {
504
+ snapshot: {
505
+ viewportSize: {
506
+ width: 500,
507
+ height: 0,
508
+ },
509
+ zoom: {
510
+ skip: true,
511
+ },
512
+ },
513
+ });
514
+ ROUTES.set('input-text/placeholder?noColumns', {
515
+ snapshot: {
516
+ viewportSize: {
517
+ width: 500,
518
+ height: 0,
519
+ },
520
+ zoom: {
521
+ skip: true,
522
+ },
523
+ },
524
+ });
525
+ ROUTES.set('input-text/disabled?noColumns', {
526
+ snapshot: {
527
+ viewportSize: {
528
+ width: 500,
529
+ height: 0,
530
+ },
531
+ zoom: {
532
+ skip: true,
533
+ },
534
+ },
535
+ });
536
+ ROUTES.set('input-text/readonly?noColumns', {
537
+ snapshot: {
538
+ viewportSize: {
539
+ width: 500,
540
+ height: 0,
541
+ },
542
+ zoom: {
543
+ skip: true,
544
+ },
545
+ },
546
+ });
547
+ ROUTES.set('input-text/access-short-key?noColumns', {
482
548
  snapshot: {
483
549
  viewportSize: {
484
550
  width: 500,
485
- height: 100,
551
+ height: 0,
552
+ },
553
+ zoom: {
554
+ skip: true,
555
+ },
556
+ },
557
+ });
558
+ ROUTES.set('input-text/hide-label?noColumns', {
559
+ snapshot: {
560
+ viewportSize: {
561
+ width: 800,
562
+ height: 0,
563
+ },
564
+ zoom: {
565
+ skip: true,
566
+ },
567
+ },
568
+ });
569
+ ROUTES.set('input-text/hide-msg?noColumns', {
570
+ snapshot: {
571
+ viewportSize: {
572
+ width: 800,
573
+ height: 0,
574
+ },
575
+ zoom: {
576
+ skip: true,
577
+ },
578
+ },
579
+ });
580
+ ROUTES.set('input-text/text-formatter?noColumns', {
581
+ snapshot: {
582
+ skip: true,
583
+ zoom: {
584
+ skip: true,
585
+ },
586
+ },
587
+ });
588
+ ROUTES.set('input-text/smart-button?noColumns', {
589
+ snapshot: {
590
+ viewportSize: {
591
+ width: 500,
592
+ height: 0,
593
+ },
594
+ zoom: {
595
+ skip: true,
596
+ },
597
+ },
598
+ });
599
+ ROUTES.set('input-text/expert-slot?noColumns', {
600
+ snapshot: {
601
+ skip: true,
602
+ zoom: {
603
+ skip: true,
604
+ },
605
+ },
606
+ });
607
+ ROUTES.set('input-text/select-range?noColumns', {
608
+ snapshot: {
609
+ skip: true,
610
+ zoom: {
611
+ skip: true,
612
+ },
613
+ },
614
+ });
615
+ ROUTES.set('input-text/background?noColumns', {
616
+ snapshot: {
617
+ viewportSize: {
618
+ width: 250,
619
+ height: 0,
486
620
  },
487
621
  zoom: {
488
622
  skip: true,
@@ -558,7 +692,7 @@ ROUTES.set('nav/basic', {
558
692
  snapshot: {
559
693
  viewportSize: {
560
694
  width: 400,
561
- height: 100,
695
+ height: 0,
562
696
  },
563
697
  zoom: {
564
698
  skip: true,
@@ -572,6 +706,20 @@ ROUTES.set('pagination/basic', {
572
706
  },
573
707
  },
574
708
  });
709
+ ROUTES.set('popover-button/basic', {
710
+ snapshot: {
711
+ zoom: {
712
+ skip: true,
713
+ },
714
+ viewportSize: {
715
+ width: 200,
716
+ height: 220,
717
+ },
718
+ },
719
+ });
720
+ ROUTES.set('popover-button/inline', {
721
+ snapshot: {},
722
+ });
575
723
  ROUTES.set('progress/basic', {
576
724
  snapshot: {
577
725
  zoom: {
@@ -595,7 +743,7 @@ ROUTES.set('select/basic?noColumns', {
595
743
  snapshot: {
596
744
  viewportSize: {
597
745
  width: 500,
598
- height: 100,
746
+ height: 0,
599
747
  },
600
748
  zoom: {
601
749
  skip: true,
@@ -604,7 +752,6 @@ ROUTES.set('select/basic?noColumns', {
604
752
  });
605
753
  ROUTES.set('skip-nav/basic', {
606
754
  snapshot: {
607
- skip: true,
608
755
  zoom: {
609
756
  skip: true,
610
757
  },
@@ -614,7 +761,7 @@ ROUTES.set('spin/basic', {
614
761
  snapshot: {
615
762
  viewportSize: {
616
763
  width: 100,
617
- height: 100,
764
+ height: 0,
618
765
  },
619
766
  zoom: {
620
767
  skip: true,
@@ -628,7 +775,7 @@ ROUTES.set('single-select/basic?noColumns', {
628
775
  snapshot: {
629
776
  viewportSize: {
630
777
  width: 500,
631
- height: 100,
778
+ height: 0,
632
779
  },
633
780
  zoom: {
634
781
  skip: true,
@@ -639,7 +786,7 @@ ROUTES.set('spin/custom', {
639
786
  snapshot: {
640
787
  viewportSize: {
641
788
  width: 100,
642
- height: 100,
789
+ height: 0,
643
790
  },
644
791
  zoom: {
645
792
  skip: true,
@@ -650,7 +797,7 @@ ROUTES.set('spin/cycle', {
650
797
  snapshot: {
651
798
  viewportSize: {
652
799
  width: 100,
653
- height: 100,
800
+ height: 0,
654
801
  },
655
802
  zoom: {
656
803
  skip: true,
@@ -661,7 +808,7 @@ ROUTES.set('split-button/basic', {
661
808
  snapshot: {
662
809
  viewportSize: {
663
810
  width: 300,
664
- height: 100,
811
+ height: 0,
665
812
  },
666
813
  zoom: {
667
814
  skip: true,
@@ -849,7 +996,7 @@ ROUTES.set('tabs/icons-only', {
849
996
  snapshot: {
850
997
  viewportSize: {
851
998
  width: 200,
852
- height: 100,
999
+ height: 0,
853
1000
  },
854
1001
  zoom: {
855
1002
  skip: true,
@@ -867,7 +1014,7 @@ ROUTES.set('textarea/basic?noColumns', {
867
1014
  snapshot: {
868
1015
  viewportSize: {
869
1016
  width: 500,
870
- height: 100,
1017
+ height: 0,
871
1018
  },
872
1019
  zoom: {
873
1020
  skip: true,
@@ -894,7 +1041,7 @@ ROUTES.set('textarea/with-counter', {
894
1041
  snapshot: {
895
1042
  viewportSize: {
896
1043
  width: 200,
897
- height: 100,
1044
+ height: 0,
898
1045
  },
899
1046
  zoom: {
900
1047
  skip: true,
@@ -916,7 +1063,7 @@ ROUTES.set('toolbar/basic', {
916
1063
  snapshot: {
917
1064
  viewportSize: {
918
1065
  width: 600,
919
- height: 100,
1066
+ height: 0,
920
1067
  },
921
1068
  zoom: {
922
1069
  skip: true,
@@ -927,7 +1074,7 @@ ROUTES.set('toolbar/disabled', {
927
1074
  snapshot: {
928
1075
  viewportSize: {
929
1076
  width: 300,
930
- height: 100,
1077
+ height: 0,
931
1078
  },
932
1079
  zoom: {
933
1080
  skip: true,
@@ -941,7 +1088,7 @@ ROUTES.set('tree/basic/home', {
941
1088
  snapshot: {
942
1089
  viewportSize: {
943
1090
  width: 300,
944
- height: 100,
1091
+ height: 0,
945
1092
  },
946
1093
  zoom: {
947
1094
  skip: true,
@@ -952,7 +1099,7 @@ ROUTES.set('version/basic', {
952
1099
  snapshot: {
953
1100
  viewportSize: {
954
1101
  width: 150,
955
- height: 100,
1102
+ height: 0,
956
1103
  },
957
1104
  zoom: {
958
1105
  skip: true,
@@ -1017,7 +1164,7 @@ ROUTES.set('scenarios/focus-elements?component=accordion', {
1017
1164
  snapshot: {
1018
1165
  viewportSize: {
1019
1166
  width: 300,
1020
- height: 100,
1167
+ height: 0,
1021
1168
  },
1022
1169
  zoom: {
1023
1170
  skip: true,
@@ -1028,7 +1175,7 @@ ROUTES.set('scenarios/focus-elements?component=button', {
1028
1175
  snapshot: {
1029
1176
  viewportSize: {
1030
1177
  width: 300,
1031
- height: 100,
1178
+ height: 0,
1032
1179
  },
1033
1180
  zoom: {
1034
1181
  skip: true,
@@ -1039,7 +1186,7 @@ ROUTES.set('scenarios/focus-elements?component=buttonLink', {
1039
1186
  snapshot: {
1040
1187
  viewportSize: {
1041
1188
  width: 300,
1042
- height: 100,
1189
+ height: 0,
1043
1190
  },
1044
1191
  zoom: {
1045
1192
  skip: true,
@@ -1050,7 +1197,7 @@ ROUTES.set('scenarios/focus-elements?component=combobox', {
1050
1197
  snapshot: {
1051
1198
  viewportSize: {
1052
1199
  width: 300,
1053
- height: 100,
1200
+ height: 0,
1054
1201
  },
1055
1202
  zoom: {
1056
1203
  skip: true,
@@ -1061,7 +1208,7 @@ ROUTES.set('scenarios/focus-elements?component=details', {
1061
1208
  snapshot: {
1062
1209
  viewportSize: {
1063
1210
  width: 300,
1064
- height: 100,
1211
+ height: 0,
1065
1212
  },
1066
1213
  zoom: {
1067
1214
  skip: true,
@@ -1072,7 +1219,7 @@ ROUTES.set('scenarios/focus-elements?component=inputCheckbox', {
1072
1219
  snapshot: {
1073
1220
  viewportSize: {
1074
1221
  width: 300,
1075
- height: 100,
1222
+ height: 0,
1076
1223
  },
1077
1224
  zoom: {
1078
1225
  skip: true,
@@ -1083,7 +1230,7 @@ ROUTES.set('scenarios/focus-elements?component=inputColor', {
1083
1230
  snapshot: {
1084
1231
  viewportSize: {
1085
1232
  width: 300,
1086
- height: 100,
1233
+ height: 0,
1087
1234
  },
1088
1235
  zoom: {
1089
1236
  skip: true,
@@ -1094,7 +1241,7 @@ ROUTES.set('scenarios/focus-elements?component=inputDate', {
1094
1241
  snapshot: {
1095
1242
  viewportSize: {
1096
1243
  width: 300,
1097
- height: 100,
1244
+ height: 0,
1098
1245
  },
1099
1246
  zoom: {
1100
1247
  skip: true,
@@ -1105,7 +1252,7 @@ ROUTES.set('scenarios/focus-elements?component=inputEmail', {
1105
1252
  snapshot: {
1106
1253
  viewportSize: {
1107
1254
  width: 300,
1108
- height: 100,
1255
+ height: 0,
1109
1256
  },
1110
1257
  zoom: {
1111
1258
  skip: true,
@@ -1116,7 +1263,7 @@ ROUTES.set('scenarios/focus-elements?component=inputFile', {
1116
1263
  snapshot: {
1117
1264
  viewportSize: {
1118
1265
  width: 300,
1119
- height: 100,
1266
+ height: 0,
1120
1267
  },
1121
1268
  zoom: {
1122
1269
  skip: true,
@@ -1127,7 +1274,7 @@ ROUTES.set('scenarios/focus-elements?component=inputFileMultiple', {
1127
1274
  snapshot: {
1128
1275
  viewportSize: {
1129
1276
  width: 300,
1130
- height: 100,
1277
+ height: 0,
1131
1278
  },
1132
1279
  zoom: {
1133
1280
  skip: true,
@@ -1138,7 +1285,7 @@ ROUTES.set('scenarios/focus-elements?component=inputNumber', {
1138
1285
  snapshot: {
1139
1286
  viewportSize: {
1140
1287
  width: 300,
1141
- height: 100,
1288
+ height: 0,
1142
1289
  },
1143
1290
  zoom: {
1144
1291
  skip: true,
@@ -1149,7 +1296,7 @@ ROUTES.set('scenarios/focus-elements?component=inputPassword', {
1149
1296
  snapshot: {
1150
1297
  viewportSize: {
1151
1298
  width: 300,
1152
- height: 100,
1299
+ height: 0,
1153
1300
  },
1154
1301
  zoom: {
1155
1302
  skip: true,
@@ -1160,7 +1307,7 @@ ROUTES.set('scenarios/focus-elements?component=inputRadio', {
1160
1307
  snapshot: {
1161
1308
  viewportSize: {
1162
1309
  width: 300,
1163
- height: 100,
1310
+ height: 0,
1164
1311
  },
1165
1312
  zoom: {
1166
1313
  skip: true,
@@ -1171,7 +1318,7 @@ ROUTES.set('scenarios/focus-elements?component=inputRange', {
1171
1318
  snapshot: {
1172
1319
  viewportSize: {
1173
1320
  width: 300,
1174
- height: 100,
1321
+ height: 0,
1175
1322
  },
1176
1323
  zoom: {
1177
1324
  skip: true,
@@ -1182,7 +1329,7 @@ ROUTES.set('scenarios/focus-elements?component=inputText', {
1182
1329
  snapshot: {
1183
1330
  viewportSize: {
1184
1331
  width: 300,
1185
- height: 100,
1332
+ height: 0,
1186
1333
  },
1187
1334
  zoom: {
1188
1335
  skip: true,
@@ -1193,7 +1340,7 @@ ROUTES.set('scenarios/focus-elements?component=link', {
1193
1340
  snapshot: {
1194
1341
  viewportSize: {
1195
1342
  width: 300,
1196
- height: 100,
1343
+ height: 0,
1197
1344
  },
1198
1345
  zoom: {
1199
1346
  skip: true,
@@ -1204,7 +1351,7 @@ ROUTES.set('scenarios/focus-elements?component=linkButton', {
1204
1351
  snapshot: {
1205
1352
  viewportSize: {
1206
1353
  width: 300,
1207
- height: 100,
1354
+ height: 0,
1208
1355
  },
1209
1356
  zoom: {
1210
1357
  skip: true,
@@ -1215,7 +1362,7 @@ ROUTES.set('scenarios/focus-elements?component=select', {
1215
1362
  snapshot: {
1216
1363
  viewportSize: {
1217
1364
  width: 300,
1218
- height: 100,
1365
+ height: 0,
1219
1366
  },
1220
1367
  zoom: {
1221
1368
  skip: true,
@@ -1226,7 +1373,7 @@ ROUTES.set('scenarios/focus-elements?component=selectMultiple', {
1226
1373
  snapshot: {
1227
1374
  viewportSize: {
1228
1375
  width: 300,
1229
- height: 100,
1376
+ height: 0,
1230
1377
  },
1231
1378
  zoom: {
1232
1379
  skip: true,
@@ -1239,7 +1386,7 @@ ROUTES.set('scenarios/focus-elements?component=singleSelect', {
1239
1386
  },
1240
1387
  viewportSize: {
1241
1388
  width: 300,
1242
- height: 100,
1389
+ height: 0,
1243
1390
  },
1244
1391
  zoom: {
1245
1392
  skip: true,
@@ -1249,7 +1396,7 @@ ROUTES.set('scenarios/focus-elements?component=textarea', {
1249
1396
  snapshot: {
1250
1397
  viewportSize: {
1251
1398
  width: 300,
1252
- height: 100,
1399
+ height: 0,
1253
1400
  },
1254
1401
  zoom: {
1255
1402
  skip: true,
package/tests/theme-snapshots.spec.js CHANGED
@@ -1,4 +1,4 @@
1
- import { test, expect } from '@playwright/test';
1
+ import { expect, test } from '@playwright/test';
2
2
  import { ROUTES } from './sample-app.routes.js';
3
3
 
4
4
  // https://playwright.dev/docs/emulation