chore: Add visual tests for more components (C-E)

.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,19 @@ 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 expandableSectionSuite from './visual/expandable-section';
 import tableSuite from './visual/table';
 
 // Per-component exports (grouped by component)
@@ -57,6 +70,17 @@ 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 table: TestSuite[] = [tableSuite];
 
 export const allSuites: TestSuite[] = [
@@ -73,5 +97,16 @@ export const allSuites: TestSuite[] = [
   ...button,
   ...buttonDropdown,
   ...buttonGroup,
+  ...cards,
+  ...checkbox,
+  ...collectionPreferences,
+  ...columnLayout,
+  ...container,
+  ...contentLayout,
+  ...copyToClipboard,
+  ...dateInput,
+  ...datePicker,
+  ...dateRangePicker,
+  ...expandableSection,
   ...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/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;

test/definitions/visual/container-sticky.ts

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestDefinition, TestSuite } from '../types';
+
+function stickyTest(
+  width: number,
+  description: string,
+  params?: Record<string, string>,
+  withScroll = true
+): TestDefinition {
+  return {
+    description,
+    path: 'container/sticky-permutations',
+    screenshotType: 'viewport',
+    configuration: { width },
+    ...(params && { queryParams: params }),
+    ...(withScroll && {
+      setup: async ({ page }) => {
+        await page.windowScrollTo({ top: 200 });
+      },
+    }),
+  };
+}
+
+const suite: TestSuite = {
+  description: 'Container sticky permutations',
+  componentName: 'container',
+  tests: [1400, 600].flatMap<TestDefinition>(width => [
+    stickyTest(width, `simple - at ${width}px`),
+    stickyTest(width, `with notifications - at ${width}px`, { hasNotifications: 'true' }),
+    stickyTest(width, `with breadcrumbs - at ${width}px`, { hasBreadcrumbs: 'true' }),
+    stickyTest(width, `with an alert - at ${width}px`, { hasNotifications: 'true', hasAlert: 'true' }),
+    stickyTest(
+      width,
+      `with an alert - at ${width}px without scroll`,
+      { hasNotifications: 'true', hasAlert: 'true' },
+      false
+    ),
+    stickyTest(width, `with high-contrast header - at ${width}px`, { hasNotifications: 'true', highContrast: 'true' }),
+  ]),
+};
+
+export default suite;