chore: Add visual tests for more components (D-R)

.github/workflows/visual-regression.yml

@@ -33,7 +33,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2]
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     steps:
       - uses: actions/checkout@v4
 
@@ -111,7 +111,7 @@ jobs:
       - name: Run visual regression tests
         run: |
           echo "NEW_HOST=${NEW_HOST}"
-          NODE_OPTIONS=--experimental-vm-modules node_modules/.bin/jest -c jest.visual.config.js --shard="${SHARD}/2"
+          NODE_OPTIONS=--experimental-vm-modules node_modules/.bin/jest -c jest.visual.config.js --shard="${SHARD}/10"
         env:
           TZ: UTC
           SHARD: ${{ matrix.shard }}

test/definitions/index.ts

@@ -29,6 +29,38 @@ import breadcrumbGroupSuite from './visual/breadcrumb-group';
 import buttonSuite from './visual/button';
 import buttonDropdownSuite from './visual/button-dropdown';
 import buttonGroupSuite from './visual/button-group';
+import cardsSuite from './visual/cards';
+import checkboxSuite from './visual/checkbox';
+import collectionPreferencesSuite from './visual/collection-preferences';
+import columnLayoutSuite from './visual/column-layout';
+import containerSuite from './visual/container';
+import containerStickySuite from './visual/container-sticky';
+import contentLayoutSuite from './visual/content-layout';
+import contentLayoutPermutationsSuite from './visual/content-layout-permutations';
+import copyToClipboardSuite from './visual/copy-to-clipboard';
+import dateInputSuite from './visual/date-input';
+import datePickerSuite from './visual/date-picker';
+import dateRangePickerSuite from './visual/date-range-picker';
+import dividerSuite from './visual/divider';
+import errorBoundarySuite from './visual/error-boundary';
+import expandableSectionSuite from './visual/expandable-section';
+import fileDropzoneSuite from './visual/file-dropzone';
+import fileInputSuite from './visual/file-input';
+import fileTokenGroupSuite from './visual/file-token-group';
+import fileUploadSuite from './visual/file-upload';
+import flashbarSuite from './visual/flashbar';
+import flashbarStackedSuite from './visual/flashbar-stacked';
+import formSuite from './visual/form';
+import formFieldSuite from './visual/form-field';
+import gridSuite from './visual/grid';
+import headerSuite from './visual/header';
+import helpPanelSuite from './visual/help-panel';
+import iconSuite from './visual/icon';
+import inputSuite from './visual/input';
+import linkSuite from './visual/link';
+import paginationSuite from './visual/pagination';
+import progressBarSuite from './visual/progress-bar';
+import radioGroupSuite from './visual/radio-group';
 import tableSuite from './visual/table';
 
 // Per-component exports (grouped by component)
@@ -57,6 +89,35 @@ export const breadcrumbGroup: TestSuite[] = [breadcrumbGroupSuite];
 export const button: TestSuite[] = [buttonSuite];
 export const buttonDropdown: TestSuite[] = [buttonDropdownSuite];
 export const buttonGroup: TestSuite[] = [buttonGroupSuite];
+export const cards: TestSuite[] = [cardsSuite];
+export const checkbox: TestSuite[] = [checkboxSuite];
+export const collectionPreferences: TestSuite[] = [collectionPreferencesSuite];
+export const columnLayout: TestSuite[] = [columnLayoutSuite];
+export const container: TestSuite[] = [containerSuite, containerStickySuite];
+export const contentLayout: TestSuite[] = [contentLayoutSuite, contentLayoutPermutationsSuite];
+export const copyToClipboard: TestSuite[] = [copyToClipboardSuite];
+export const dateInput: TestSuite[] = [dateInputSuite];
+export const datePicker: TestSuite[] = [datePickerSuite];
+export const dateRangePicker: TestSuite[] = [dateRangePickerSuite];
+export const expandableSection: TestSuite[] = [expandableSectionSuite];
+export const divider: TestSuite[] = [dividerSuite];
+export const errorBoundary: TestSuite[] = [errorBoundarySuite];
+export const fileDropzone: TestSuite[] = [fileDropzoneSuite];
+export const fileInput: TestSuite[] = [fileInputSuite];
+export const fileTokenGroup: TestSuite[] = [fileTokenGroupSuite];
+export const fileUpload: TestSuite[] = [fileUploadSuite];
+export const flashbar: TestSuite[] = [flashbarSuite, flashbarStackedSuite];
+export const form: TestSuite[] = [formSuite];
+export const formField: TestSuite[] = [formFieldSuite];
+export const grid: TestSuite[] = [gridSuite];
+export const header: TestSuite[] = [headerSuite];
+export const helpPanel: TestSuite[] = [helpPanelSuite];
+export const icon: TestSuite[] = [iconSuite];
+export const input: TestSuite[] = [inputSuite];
+export const link: TestSuite[] = [linkSuite];
+export const pagination: TestSuite[] = [paginationSuite];
+export const progressBar: TestSuite[] = [progressBarSuite];
+export const radioGroup: TestSuite[] = [radioGroupSuite];
 export const table: TestSuite[] = [tableSuite];
 
 export const allSuites: TestSuite[] = [
@@ -73,5 +134,34 @@ export const allSuites: TestSuite[] = [
   ...button,
   ...buttonDropdown,
   ...buttonGroup,
+  ...cards,
+  ...checkbox,
+  ...collectionPreferences,
+  ...columnLayout,
+  ...container,
+  ...contentLayout,
+  ...copyToClipboard,
+  ...dateInput,
+  ...datePicker,
+  ...dateRangePicker,
+  ...expandableSection,
+  ...divider,
+  ...errorBoundary,
+  ...fileDropzone,
+  ...fileInput,
+  ...fileTokenGroup,
+  ...fileUpload,
+  ...flashbar,
+  ...form,
+  ...formField,
+  ...grid,
+  ...header,
+  ...helpPanel,
+  ...icon,
+  ...input,
+  ...link,
+  ...pagination,
+  ...progressBar,
+  ...radioGroup,
   ...table,
 ];

test/definitions/page-object.ts

@@ -22,4 +22,17 @@ export default class VisualTestPageObject extends RawScreenshotPageObject {
     });
     await this.waitForJsTimers(500);
   }
+
+  async doubleClick(selector: string): Promise<void> {
+    const element = this.browser.$(selector);
+    await element.doubleClick();
+  }
+
+  /**
+   * Scrolls the element matching the given selector into view.
+   */
+  async scrollIntoView(selector: string): Promise<void> {
+    const element = this.browser.$(selector);
+    await element.scrollIntoView();
+  }
 }

test/definitions/visual/app-layout-z-index.ts

@@ -9,11 +9,11 @@ const suite: TestSuite = {
     {
       description: 'Z-index',
       tests: [
-        ...[600, 1280].flatMap(width => [
+        ...[600, 1280].flatMap<TestDefinition>(width => [
           {
             description: `button dropdown (${width}px)`,
             path: 'app-layout/with-absolute-components',
-            screenshotType: 'viewport' as const,
+            screenshotType: 'viewport',
             configuration: { width },
             setup: async ({ page }) => {
               await page.click('button=Button dropdown');
@@ -24,7 +24,7 @@ const suite: TestSuite = {
           {
             description: `select (${width}px)`,
             path: 'app-layout/with-absolute-components',
-            screenshotType: 'viewport' as const,
+            screenshotType: 'viewport',
             configuration: { width, height: 800 },
             setup: async ({ page }) => {
               await page.click('[data-testid="select-demo"] button');
@@ -34,7 +34,7 @@ const suite: TestSuite = {
           {
             description: `split-panel and full-page table (${width}px)`,
             path: 'app-layout/with-full-page-table-and-split-panel',
-            screenshotType: 'viewport' as const,
+            screenshotType: 'viewport',
             configuration: { width },
           },
         ]),
@@ -63,7 +63,7 @@ const suite: TestSuite = {
         {
           description: 'split-panel and full-page with open navigation (600px)',
           path: 'app-layout/with-full-page-table-and-split-panel',
-          screenshotType: 'viewport' as const,
+          screenshotType: 'viewport',
           configuration: { width: 600 },
           setup: async ({ page }) => {
             await page.click('button[aria-label="Open navigation"]');
@@ -72,7 +72,7 @@ const suite: TestSuite = {
         {
           description: 'split-panel and full-page with open tools (600px)',
           path: 'app-layout/with-full-page-table-and-split-panel',
-          screenshotType: 'viewport' as const,
+          screenshotType: 'viewport',
           configuration: { width: 600 },
           setup: async ({ page }) => {
             await page.click('button[aria-label="Open tools"]');

test/definitions/visual/area-chart.ts

@@ -89,7 +89,8 @@ const suite: TestSuite = {
         await page.keys(['Tab']);
         await page.keys(['Tab']);
         await page.keys(['ArrowRight']);
-        await page.keys(['Shift', 'Tab']);
+        // 'Null' releases Shift so the next ArrowRight isn't interpreted as Shift+ArrowRight in Safari.
+        await page.keys(['Shift', 'Tab', 'Null']);
         await page.keys(['ArrowRight']);
         await page.waitForVisible(TEST_CHART_TOOLTIP_HEADER);
       },

test/definitions/visual/cards.ts

@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Cards',
+  componentName: 'cards',
+  tests: [2200, 1920, 1400, 1200, 992, 768].map(width => ({
+    description: `permutations at ${width}`,
+    path: 'cards/permutations',
+    screenshotType: 'permutations',
+    configuration: { width },
+  })),
+};
+
+export default suite;

test/definitions/visual/checkbox.ts

@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Checkbox',
+  componentName: 'checkbox',
+  tests: [
+    {
+      description: 'Permutations',
+      path: 'checkbox/permutations',
+      screenshotType: 'permutations',
+    },
+    {
+      description: 'Checkbox is focused',
+      path: 'checkbox/focus-test',
+      screenshotType: 'screenshotArea',
+      setup: async ({ page }) => {
+        await page.click('#focus-target');
+        await page.focusNextElement();
+      },
+    },
+    {
+      description: 'Checkbox has label with a correct width',
+      path: 'checkbox/labels-highlight',
+      screenshotType: 'screenshotArea',
+    },
+    {
+      description: 'Style custom page',
+      path: 'checkbox/style-custom',
+      screenshotType: 'screenshotArea',
+    },
+  ],
+};
+
+export default suite;

test/definitions/visual/collection-preferences.ts

@@ -0,0 +1,71 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'CollectionPreferences',
+  componentName: 'collection-preferences',
+  tests: [
+    ...[
+      [600, 1100],
+      [1280, 700],
+    ].map<TestSuite>(([width, height]) => ({
+      description: `width ${width}px, height ${height}px`,
+      tests: [
+        {
+          description: `complete at ${width}x${height}`,
+          path: 'collection-preferences/simple',
+          screenshotType: 'viewport',
+          configuration: { width, height },
+          setup: async ({ page }) => {
+            await page.click('.cp-1 button');
+          },
+        },
+        {
+          description: `visible content only at ${width}x${height}`,
+          path: 'collection-preferences/simple',
+          screenshotType: 'viewport',
+          setup: async ({ page }) => {
+            await page.click('.cp-4 button');
+          },
+        },
+      ],
+    })),
+    {
+      description: 'custom',
+      path: 'collection-preferences/simple',
+      screenshotType: 'viewport',
+      setup: async ({ page }) => {
+        await page.click('.cp-2 button');
+      },
+    },
+    {
+      description: 'Content reordering',
+      tests: [
+        {
+          description: 'drag handle focused',
+          path: 'collection-preferences/reorder-content',
+          screenshotType: 'viewport',
+          configuration: { width: 900, height: 650 },
+          setup: async ({ page }) => {
+            await page.click('.cp-1 button');
+            await page.keys(Array(5).fill('Tab'));
+          },
+        },
+        {
+          description: 'reordering active',
+          path: 'collection-preferences/reorder-content',
+          screenshotType: 'viewport',
+          configuration: { width: 900, height: 650 },
+          setup: async ({ page }) => {
+            await page.click('.cp-1 button');
+            await page.keys(Array(5).fill('Tab'));
+            await page.keys(['Space']);
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default suite;

test/definitions/visual/column-layout.ts

@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestDefinition, TestSuite } from '../types';
+
+const TEST_WIDTHS: [string, number][] = [
+  ['default', 400],
+  ['xxs', 500],
+  ['xs', 800],
+  ['m', 1200],
+];
+
+const suite: TestSuite = {
+  description: 'ColumnLayout',
+  componentName: 'column-layout',
+  tests: TEST_WIDTHS.flatMap<TestDefinition>(([breakpoint, width]) => [
+    {
+      description: `column-layout at "${breakpoint}"`,
+      path: 'column-layout/simple',
+      screenshotType: 'screenshotArea',
+      configuration: { width },
+    },
+    {
+      description: `permutations at "${breakpoint}"`,
+      path: 'column-layout/permutations',
+      screenshotType: 'permutations',
+      configuration: { width },
+    },
+  ]),
+};
+
+export default suite;