From e82737cd62ccd4bc3c8e29498c6c1a5291372cc9 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Fri, 10 Jul 2026 13:22:49 +0200 Subject: [PATCH 1/3] test: Add visual regression tests for app layout --- test/definitions/index.ts | 50 +++++- test/definitions/types.ts | 4 +- .../visual/app-layout-content-paddings.ts | 29 ++++ test/definitions/visual/app-layout-drawers.ts | 69 ++++++++ .../definitions/visual/app-layout-flashbar.ts | 38 ++++ test/definitions/visual/app-layout-header.ts | 92 ++++++++++ test/definitions/visual/app-layout-multi.ts | 24 +++ .../visual/app-layout-responsive-1280.ts | 7 + .../visual/app-layout-responsive-1400.ts | 7 + .../visual/app-layout-responsive-1920.ts | 7 + .../visual/app-layout-responsive-2540.ts | 7 + .../visual/app-layout-responsive-600.ts | 7 + .../visual/app-layout-responsive-tests.ts | 164 ++++++++++++++++++ ...-layout-sticky-table-header-split-panel.ts | 77 ++++++++ test/definitions/visual/app-layout-toolbar.ts | 22 +++ test/definitions/visual/app-layout-z-index.ts | 81 +++++++++ test/definitions/visual/app-layout.ts | 101 +++++++++++ .../app-layout-content-paddings.test.ts | 6 + test/visual/app-layout-drawers.test.ts | 6 + test/visual/app-layout-flashbar.test.ts | 6 + test/visual/app-layout-header.test.ts | 6 + test/visual/app-layout-multi.test.ts | 6 + .../visual/app-layout-responsive-1280.test.ts | 6 + .../visual/app-layout-responsive-1400.test.ts | 6 + .../visual/app-layout-responsive-1920.test.ts | 6 + .../visual/app-layout-responsive-2540.test.ts | 6 + test/visual/app-layout-responsive-600.test.ts | 6 + ...ut-sticky-table-header-split-panel.test.ts | 6 + test/visual/app-layout-toolbar.test.ts | 6 + test/visual/app-layout-z-index.test.ts | 6 + test/visual/app-layout.test.ts | 6 + 31 files changed, 867 insertions(+), 3 deletions(-) create mode 100644 test/definitions/visual/app-layout-content-paddings.ts create mode 100644 test/definitions/visual/app-layout-drawers.ts create mode 100644 test/definitions/visual/app-layout-flashbar.ts create mode 100644 test/definitions/visual/app-layout-header.ts create mode 100644 test/definitions/visual/app-layout-multi.ts create mode 100644 test/definitions/visual/app-layout-responsive-1280.ts create mode 100644 test/definitions/visual/app-layout-responsive-1400.ts create mode 100644 test/definitions/visual/app-layout-responsive-1920.ts create mode 100644 test/definitions/visual/app-layout-responsive-2540.ts create mode 100644 test/definitions/visual/app-layout-responsive-600.ts create mode 100644 test/definitions/visual/app-layout-responsive-tests.ts create mode 100644 test/definitions/visual/app-layout-sticky-table-header-split-panel.ts create mode 100644 test/definitions/visual/app-layout-toolbar.ts create mode 100644 test/definitions/visual/app-layout-z-index.ts create mode 100644 test/definitions/visual/app-layout.ts create mode 100644 test/visual/app-layout-content-paddings.test.ts create mode 100644 test/visual/app-layout-drawers.test.ts create mode 100644 test/visual/app-layout-flashbar.test.ts create mode 100644 test/visual/app-layout-header.test.ts create mode 100644 test/visual/app-layout-multi.test.ts create mode 100644 test/visual/app-layout-responsive-1280.test.ts create mode 100644 test/visual/app-layout-responsive-1400.test.ts create mode 100644 test/visual/app-layout-responsive-1920.test.ts create mode 100644 test/visual/app-layout-responsive-2540.test.ts create mode 100644 test/visual/app-layout-responsive-600.test.ts create mode 100644 test/visual/app-layout-sticky-table-header-split-panel.test.ts create mode 100644 test/visual/app-layout-toolbar.test.ts create mode 100644 test/visual/app-layout-z-index.test.ts create mode 100644 test/visual/app-layout.test.ts diff --git a/test/definitions/index.ts b/test/definitions/index.ts index 8765da5dc6..27ec0772c6 100644 --- a/test/definitions/index.ts +++ b/test/definitions/index.ts @@ -5,7 +5,55 @@ // Import them here manually to form the full test suite. import { TestSuite } from './types'; export { TestSuite, TestDefinition, ScreenshotType, ScreenshotTestConfiguration } from './types'; +export { default as actionCard } from './visual/action-card'; +export { default as alert } from './visual/alert'; +export { default as appLayout } from './visual/app-layout'; +export { default as appLayoutContentPaddings } from './visual/app-layout-content-paddings'; +export { default as appLayoutDrawers } from './visual/app-layout-drawers'; +export { default as appLayoutFlashbar } from './visual/app-layout-flashbar'; +export { default as appLayoutHeader } from './visual/app-layout-header'; +export { default as appLayoutMulti } from './visual/app-layout-multi'; +export { default as appLayoutResponsive600 } from './visual/app-layout-responsive-600'; +export { default as appLayoutResponsive1280 } from './visual/app-layout-responsive-1280'; +export { default as appLayoutResponsive1400 } from './visual/app-layout-responsive-1400'; +export { default as appLayoutResponsive1920 } from './visual/app-layout-responsive-1920'; +export { default as appLayoutResponsive2540 } from './visual/app-layout-responsive-2540'; +export { default as appLayoutStickyTableHeaderSplitPanel } from './visual/app-layout-sticky-table-header-split-panel'; +export { default as appLayoutToolbar } from './visual/app-layout-toolbar'; +export { default as appLayoutZIndex } from './visual/app-layout-z-index'; + import actionCard from './visual/action-card'; import alert from './visual/alert'; +import appLayout from './visual/app-layout'; +import appLayoutContentPaddings from './visual/app-layout-content-paddings'; +import appLayoutDrawers from './visual/app-layout-drawers'; +import appLayoutFlashbar from './visual/app-layout-flashbar'; +import appLayoutHeader from './visual/app-layout-header'; +import appLayoutMulti from './visual/app-layout-multi'; +import appLayoutResponsive600 from './visual/app-layout-responsive-600'; +import appLayoutResponsive1280 from './visual/app-layout-responsive-1280'; +import appLayoutResponsive1400 from './visual/app-layout-responsive-1400'; +import appLayoutResponsive1920 from './visual/app-layout-responsive-1920'; +import appLayoutResponsive2540 from './visual/app-layout-responsive-2540'; +import appLayoutStickyTableHeaderSplitPanel from './visual/app-layout-sticky-table-header-split-panel'; +import appLayoutToolbar from './visual/app-layout-toolbar'; +import appLayoutZIndex from './visual/app-layout-z-index'; -export const allSuites: TestSuite[] = [actionCard, alert]; +export const allSuites: TestSuite[] = [ + actionCard, + alert, + appLayout, + appLayoutContentPaddings, + appLayoutDrawers, + appLayoutFlashbar, + appLayoutHeader, + appLayoutMulti, + appLayoutResponsive600, + appLayoutResponsive1280, + appLayoutResponsive1400, + appLayoutResponsive1920, + appLayoutResponsive2540, + appLayoutStickyTableHeaderSplitPanel, + appLayoutToolbar, + appLayoutZIndex, +]; diff --git a/test/definitions/types.ts b/test/definitions/types.ts index 020b6efc5a..94b723bc08 100644 --- a/test/definitions/types.ts +++ b/test/definitions/types.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { Browser } from 'webdriverio'; -import type { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects'; +import type { ScreenshotBasePageObject } from '@cloudscape-design/browser-test-tools/page-objects'; import type createWrapper from '../../lib/components/test-utils/selectors'; @@ -23,7 +23,7 @@ export interface TestDefinition { screenshotType: ScreenshotType; queryParams?: Record; configuration?: ScreenshotTestConfiguration; - setup?: ({ page, wrapper, browser }: { page: BasePageObject; wrapper: Wrapper; browser?: Browser }) => void; + setup?: ({ page, wrapper, browser }: { page: ScreenshotBasePageObject; wrapper: Wrapper; browser?: Browser }) => void; } export interface TestSuite { diff --git a/test/definitions/visual/app-layout-content-paddings.ts b/test/definitions/visual/app-layout-content-paddings.ts new file mode 100644 index 0000000000..eaf0c3e003 --- /dev/null +++ b/test/definitions/visual/app-layout-content-paddings.ts @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Content paddings', + componentName: 'app-layout', + tests: [ + ...(['true', 'false'] as const).flatMap(toolsEnabled => + (['true', 'false'] as const).flatMap(splitPanelEnabled => + (['bottom', 'side'] as const).map(splitPanelPosition => ({ + description: `toolsEnabled=${toolsEnabled} splitPanelEnabled=${splitPanelEnabled} splitPanelPosition=${splitPanelPosition}`, + path: 'app-layout/with-split-panel', + screenshotType: 'viewport' as const, + queryParams: { toolsEnabled, splitPanelEnabled, splitPanelPosition }, + })) + ) + ), + ...[1500, 600].map(width => ({ + description: `with split panel and disabled content paddings - width=${width}`, + path: 'app-layout/disable-paddings-with-split-panel', + screenshotType: 'viewport' as const, + configuration: { width }, + queryParams: { splitPanelOpen: 'true', splitPanelPosition: 'side' }, + })), + ], +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-drawers.ts b/test/definitions/visual/app-layout-drawers.ts new file mode 100644 index 0000000000..08c525181f --- /dev/null +++ b/test/definitions/visual/app-layout-drawers.ts @@ -0,0 +1,69 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Drawers', + componentName: 'app-layout', + tests: [ + { + description: 'popover can be displayed outside split panel', + path: 'app-layout/with-full-page-table-and-split-panel', + screenshotType: 'viewport', + queryParams: { splitPanelPosition: 'side' }, + setup: async ({ page, wrapper }) => { + await page.click(wrapper.findPopover('[data-testid="split-panel"]').toSelector()); + }, + }, + { + description: 'popover can be displayed outside help panel', + path: 'app-layout/with-full-page-table-and-split-panel', + screenshotType: 'viewport', + setup: async ({ page, wrapper }) => { + await page.click(wrapper.findAppLayout().findToolsToggle().toSelector()); + await page.click(wrapper.findPopover('[data-testid="help-panel"]').toSelector()); + }, + }, + { + description: 'with split panel', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + setup: async ({ page, wrapper }) => { + await page.click(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector()); + }, + }, + { + description: 'with tooltip on hover', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + setup: async ({ page, wrapper }) => { + await page.hoverElement(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector()); + }, + }, + { + description: 'with custom scrollable drawer content', + path: 'app-layout/with-drawers-scrollable', + screenshotType: 'viewport', + queryParams: { sideNavFill: 'false' }, + setup: async ({ page, wrapper }) => { + await page.click(wrapper.findAppLayout().findDrawerTriggerById('chat').toSelector()); + }, + }, + { + description: 'with full height drawer content', + path: 'app-layout/with-drawers-scrollable', + screenshotType: 'viewport', + queryParams: { sideNavFill: 'true' }, + setup: async ({ page }) => { + await page.click('[data-testid="open-global-drawer-button"]'); + }, + }, + { + description: 'with only global drawers', + path: 'app-layout/runtime-drawers-with-only-global', + screenshotType: 'viewport', + }, + ], +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-flashbar.ts b/test/definitions/visual/app-layout-flashbar.ts new file mode 100644 index 0000000000..5db8a93ebb --- /dev/null +++ b/test/definitions/visual/app-layout-flashbar.ts @@ -0,0 +1,38 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Flashbar', + componentName: 'app-layout', + tests: [true, false].flatMap(disableContentPaddings => + [true, false].flatMap(stickyNotifications => + [true, false].flatMap(stickyTableHeader => + [true, false].map(stackNotifications => ({ + description: `disableContentPaddings: ${disableContentPaddings}, stickyNotifications: ${stickyNotifications}, stickyTableHeader: ${stickyTableHeader}, stackNotifications: ${stackNotifications}`, + path: 'app-layout/with-stacked-notifications-and-table', + screenshotType: 'screenshotArea' as const, + configuration: { width: 1280, height: 900 }, + setup: async ({ page }) => { + if (!disableContentPaddings) { + await page.click('[data-id="toggle-content-paddings"]'); + } + if (stickyNotifications) { + await page.click('[data-id="toggle-sticky-notifications"]'); + } + if (!stickyTableHeader) { + await page.click('[data-id="toggle-sticky-table-header"]'); + } + if (!stackNotifications) { + await page.click('[data-id="toggle-stack-items"]'); + } + await page.click('[data-id="add-notification"]'); + await page.click('[data-id="add-notification"]'); + }, + })) + ) + ) + ), +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-header.ts b/test/definitions/visual/app-layout-header.ts new file mode 100644 index 0000000000..8e1e332021 --- /dev/null +++ b/test/definitions/visual/app-layout-header.ts @@ -0,0 +1,92 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestDefinition, TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Headers', + componentName: 'app-layout', + tests: [ + // ── Headers ─────────────────────────────────────────────────────────── + { + description: 'Headers', + tests: [600, 1280].flatMap(width => [ + { + description: `alignment with full-page table (${width}px)`, + path: 'app-layout/with-table', + screenshotType: 'viewport' as const, + configuration: { width }, + }, + { + description: `alignment with full-page table in sticky state (${width}px)`, + path: 'app-layout/with-table', + screenshotType: 'viewport' as const, + configuration: { width }, + setup: async ({ page }) => { + await page.windowScrollTo({ top: 200 }); + }, + }, + { + description: `alignment with full-page table in sticky state with sticky notifications (${width}px)`, + path: 'app-layout/with-table', + screenshotType: 'viewport' as const, + configuration: { width }, + queryParams: { stickyNotifications: 'true' }, + setup: async ({ page }) => { + await page.windowScrollTo({ top: 200 }); + }, + }, + { + description: `high contrast header variant in landing page (${width}px)`, + path: 'app-layout/landing-page', + screenshotType: 'viewport' as const, + configuration: { width }, + }, + { + description: `high contrast header variant in landing page with notification dismissed (${width}px)`, + path: 'app-layout/landing-page', + screenshotType: 'viewport' as const, + configuration: { width }, + setup: async ({ page, wrapper }) => { + await page.click(wrapper.findFlashbar().findItems().get(1).findDismissButton().toSelector()); + }, + }, + ]), + }, + // ── High contrast header variant ────────────────────────────────────── + { + description: 'High contrast header variant', + tests: [ + ...[1400, 600].flatMap(width => [ + { + description: `with breadcrumbs and notifications at ${width}px`, + path: 'app-layout/high-contrast-header-variant', + screenshotType: 'screenshotArea' as const, + configuration: { width }, + queryParams: { hasBreadcrumbs: 'true', hasNotifications: 'true', hasContainer: 'true' }, + } as TestDefinition, + { + description: `without overlap at ${width}px`, + path: 'app-layout/high-contrast-header-variant', + screenshotType: 'screenshotArea' as const, + configuration: { width }, + queryParams: { disableOverlap: 'true' }, + } as TestDefinition, + { + description: `with content layout at ${width}px`, + path: 'app-layout/high-contrast-header-variant', + screenshotType: 'screenshotArea' as const, + configuration: { width }, + queryParams: { + hasBreadcrumbs: 'true', + hasNotifications: 'true', + hasContainer: 'true', + hasContentLayout: 'true', + }, + } as TestDefinition, + ]), + ], + }, + ], +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-multi.ts b/test/definitions/visual/app-layout-multi.ts new file mode 100644 index 0000000000..5cba6eba87 --- /dev/null +++ b/test/definitions/visual/app-layout-multi.ts @@ -0,0 +1,24 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Multiple instances', + componentName: 'app-layout', + tests: [600, 1280].flatMap(width => [ + { + description: `simple (${width}px)`, + path: 'app-layout/multi-layout-simple', + screenshotType: 'viewport' as const, + configuration: { width }, + }, + { + description: `iframe (${width}px)`, + path: 'app-layout/multi-layout-iframe', + screenshotType: 'viewport' as const, + configuration: { width }, + }, + ]), +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-responsive-1280.ts b/test/definitions/visual/app-layout-responsive-1280.ts new file mode 100644 index 0000000000..46a4dbec91 --- /dev/null +++ b/test/definitions/visual/app-layout-responsive-1280.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { responsiveTests } from './app-layout-responsive-tests'; + +const suite = responsiveTests(1280); + +export default suite; diff --git a/test/definitions/visual/app-layout-responsive-1400.ts b/test/definitions/visual/app-layout-responsive-1400.ts new file mode 100644 index 0000000000..ed5a5318e4 --- /dev/null +++ b/test/definitions/visual/app-layout-responsive-1400.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { responsiveTests } from './app-layout-responsive-tests'; + +const suite = responsiveTests(1400); + +export default suite; diff --git a/test/definitions/visual/app-layout-responsive-1920.ts b/test/definitions/visual/app-layout-responsive-1920.ts new file mode 100644 index 0000000000..bd93da763d --- /dev/null +++ b/test/definitions/visual/app-layout-responsive-1920.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { responsiveTests } from './app-layout-responsive-tests'; + +const suite = responsiveTests(1920); + +export default suite; diff --git a/test/definitions/visual/app-layout-responsive-2540.ts b/test/definitions/visual/app-layout-responsive-2540.ts new file mode 100644 index 0000000000..95515c29f7 --- /dev/null +++ b/test/definitions/visual/app-layout-responsive-2540.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { responsiveTests } from './app-layout-responsive-tests'; + +const suite = responsiveTests(2540); + +export default suite; diff --git a/test/definitions/visual/app-layout-responsive-600.ts b/test/definitions/visual/app-layout-responsive-600.ts new file mode 100644 index 0000000000..f358b753e3 --- /dev/null +++ b/test/definitions/visual/app-layout-responsive-600.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { responsiveTests } from './app-layout-responsive-tests'; + +const suite = responsiveTests(600); + +export default suite; diff --git a/test/definitions/visual/app-layout-responsive-tests.ts b/test/definitions/visual/app-layout-responsive-tests.ts new file mode 100644 index 0000000000..1d9954ad1e --- /dev/null +++ b/test/definitions/visual/app-layout-responsive-tests.ts @@ -0,0 +1,164 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +/** + * Shared responsive test scenarios for app-layout. Each width gets its own + * definition file and test runner so that Jest sharding can parallelize them. + */ +export function responsiveTests(width: number): TestSuite { + return { + description: `AppLayout responsive width ${width}px`, + componentName: 'app-layout', + tests: [ + { + description: 'default', + path: 'app-layout/default', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'default – screenshot with scroll', + path: 'app-layout/default', + screenshotType: 'screenshotArea', + configuration: { width }, + }, + { + description: 'navigation drawer is open', + path: 'app-layout/with-wizard', + screenshotType: 'viewport', + configuration: { width }, + setup: async ({ page }) => { + await page.click('[aria-label="Open navigation"]'); + }, + }, + { + description: 'wizard', + path: 'app-layout/with-wizard', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'with wizard and table', + path: 'app-layout/with-wizard-and-table', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'with wizard, table, and breadcrumbs', + path: 'app-layout/with-wizard-and-table', + screenshotType: 'viewport', + configuration: { width }, + queryParams: { hasBreadcrumbs: 'true' }, + }, + { + description: 'notifications', + path: 'app-layout/with-notifications', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'breadcrumbs', + path: 'app-layout/with-breadcrumbs', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'notifications and breadcrumbs', + path: 'app-layout/with-breadcrumbs-notifications', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'dashboard content type', + path: 'app-layout/dashboard-content-type', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'fixed header and footer', + path: 'app-layout/with-fixed-header-footer', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'disableBodyScroll - empty', + path: 'app-layout/legacy-nav-empty', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'disableBodyScroll - with content', + path: 'app-layout/legacy-nav-scrollable', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'disableBodyScroll - with split panel', + path: 'app-layout/legacy-nav-scrollable-with-split-panel', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'disable paddings', + path: 'app-layout/disable-paddings', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'disable paddings with breadcrumbs', + path: 'app-layout/disable-paddings-breadcrumbs', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'sticky notifications', + path: 'app-layout/with-sticky-notifications', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'sticky notifications scrolled down', + path: 'app-layout/with-sticky-notifications', + screenshotType: 'viewport', + configuration: { width }, + setup: async ({ page }) => { + await page.windowScrollTo({ top: 2000 }); + }, + }, + { + description: 'layout without panels', + path: 'app-layout/no-panels', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'layout without panels but with notifications', + path: 'app-layout/no-panels-with-notifications', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'with drawers', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'with empty drawers', + path: 'app-layout/with-drawers-empty', + screenshotType: 'viewport', + configuration: { width }, + }, + { + description: 'with open drawer', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + configuration: { width }, + setup: async ({ page }) => { + await page.click('[aria-label="Security trigger button"]'); + }, + }, + ], + }; +} diff --git a/test/definitions/visual/app-layout-sticky-table-header-split-panel.ts b/test/definitions/visual/app-layout-sticky-table-header-split-panel.ts new file mode 100644 index 0000000000..63707a4362 --- /dev/null +++ b/test/definitions/visual/app-layout-sticky-table-header-split-panel.ts @@ -0,0 +1,77 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Sticky header with split panel', + componentName: 'app-layout', + tests: [ + { + description: 'scrolling to bottom with closed split panel (1 table row)', + path: 'app-layout/with-sticky-table-and-split-panel', + screenshotType: 'viewport', + configuration: { width: 1280, height: 900 }, + setup: async ({ page }) => { + await page.click('[data-testid="set-item-count-to-1"]'); + await page.scrollToBottom('html'); + }, + }, + { + description: 'scrolling to bottom with closed split panel (30 table rows)', + path: 'app-layout/with-sticky-table-and-split-panel', + screenshotType: 'viewport', + configuration: { width: 1280, height: 900 }, + setup: async ({ page }) => { + await page.click('[data-testid="set-item-count-to-30"]'); + await page.scrollToBottom('html'); + }, + }, + { + description: 'header stays sticky with open split panel (1 table row)', + path: 'app-layout/with-sticky-table-and-split-panel', + screenshotType: 'viewport', + configuration: { width: 1280, height: 900 }, + setup: async ({ page }) => { + await page.click('[data-testid="set-item-count-to-1"]'); + await page.click('aria/Open panel'); + await page.scrollToBottom('html'); + }, + }, + { + description: 'header stays sticky with open split panel (30 table rows)', + path: 'app-layout/with-sticky-table-and-split-panel', + screenshotType: 'viewport', + configuration: { width: 1280, height: 900 }, + setup: async ({ page }) => { + await page.click('[data-testid="set-item-count-to-30"]'); + await page.click('aria/Open panel'); + await page.scrollToBottom('html'); + }, + }, + { + description: 'header stays sticky when mounting and unmounting a second table', + path: 'app-layout/with-sticky-table-and-split-panel', + screenshotType: 'viewport', + configuration: { width: 1280, height: 900 }, + setup: async ({ page }) => { + await page.click('[data-testid="set-item-count-to-30"]'); + await page.click('aria/Open panel'); + await page.windowScrollTo({ top: 0 }); + await page.click('aria/Close panel'); + await page.scrollToBottom('html'); + }, + }, + // ── Max content width ───────────────────────────────────────────────── + { + description: 'maxContentWidth set to Number.MAX_VALUE', + path: 'app-layout/refresh-content-width', + screenshotType: 'viewport', + configuration: { width: 1280, height: 700 }, + setup: async ({ page }) => { + await page.click('[data-test-id="button_width-number-max_value"]'); + }, + }, + ], +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-toolbar.ts b/test/definitions/visual/app-layout-toolbar.ts new file mode 100644 index 0000000000..074bc6f7a7 --- /dev/null +++ b/test/definitions/visual/app-layout-toolbar.ts @@ -0,0 +1,22 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Toolbar', + componentName: 'app-layout', + tests: [ + { + description: 'multiple nested instances (no breadcrumbs dedup)', + path: 'app-layout-toolbar/multi-layout-with-hidden-instances', + screenshotType: 'viewport', + }, + { + description: 'no toolbar', + path: 'app-layout-toolbar/without-toolbar', + screenshotType: 'viewport', + }, + ], +}; + +export default suite; diff --git a/test/definitions/visual/app-layout-z-index.ts b/test/definitions/visual/app-layout-z-index.ts new file mode 100644 index 0000000000..6b06cf3836 --- /dev/null +++ b/test/definitions/visual/app-layout-z-index.ts @@ -0,0 +1,81 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestDefinition, TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'Z-index', + componentName: 'app-layout', + tests: [ + ...[600, 1280].flatMap(width => [ + { + description: `button dropdown (${width}px)`, + path: 'app-layout/with-absolute-components', + screenshotType: 'viewport' as const, + configuration: { width }, + setup: async ({ page }) => { + await page.click('button=Button dropdown'); + await page.click('[data-testid="2"]'); + await page.windowScrollTo({ top: 300 }); + }, + } as TestDefinition, + { + description: `select (${width}px)`, + path: 'app-layout/with-absolute-components', + screenshotType: 'viewport' as const, + configuration: { width, height: 800 }, + setup: async ({ page }) => { + await page.click('[data-testid="select-demo"] button'); + await page.windowScrollTo({ top: 300 }); + }, + } as TestDefinition, + { + description: `split-panel and full-page table (${width}px)`, + path: 'app-layout/with-full-page-table-and-split-panel', + screenshotType: 'viewport' as const, + configuration: { width }, + }, + ]), + // ── With sticky notifications ───────────────────────────────────────── + { + description: 'with sticky notifications - button dropdown', + path: 'app-layout/with-absolute-components', + screenshotType: 'viewport', + setup: async ({ page }) => { + await page.click('button=Toggle sticky notifications'); + await page.click('button=Button dropdown'); + await page.click('[data-testid="2"]'); + await page.windowScrollTo({ top: 250 }); + }, + }, + { + description: 'with sticky notifications - select', + path: 'app-layout/with-absolute-components', + screenshotType: 'viewport', + setup: async ({ page }) => { + await page.click('button=Toggle sticky notifications'); + await page.click('[data-testid="select-demo"] button'); + await page.windowScrollTo({ top: 250 }); + }, + }, + { + description: 'split-panel and full-page with open navigation (600px)', + path: 'app-layout/with-full-page-table-and-split-panel', + screenshotType: 'viewport' as const, + configuration: { width: 600 }, + setup: async ({ page }) => { + await page.click('button[aria-label="Open navigation"]'); + }, + }, + { + description: 'split-panel and full-page with open tools (600px)', + path: 'app-layout/with-full-page-table-and-split-panel', + screenshotType: 'viewport' as const, + configuration: { width: 600 }, + setup: async ({ page }) => { + await page.click('button[aria-label="Open tools"]'); + }, + }, + ], +}; + +export default suite; diff --git a/test/definitions/visual/app-layout.ts b/test/definitions/visual/app-layout.ts new file mode 100644 index 0000000000..22e22db9ec --- /dev/null +++ b/test/definitions/visual/app-layout.ts @@ -0,0 +1,101 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; + +const suite: TestSuite = { + description: 'AppLayout', + componentName: 'app-layout', + tests: [ + { + description: 'no scrollbars at 320px', + path: 'app-layout/default', + screenshotType: 'viewport', + configuration: { width: 320 }, + }, + { + description: 'drawer buttons alignment', + path: 'app-layout/default', + screenshotType: 'viewport', + configuration: { width: 800 }, + setup: async ({ page }) => { + await page.click('[aria-label="Open tools"]'); + }, + }, + { + description: 'disable paddings - navigation closed', + path: 'app-layout/disable-paddings', + screenshotType: 'viewport', + configuration: { width: 1280 }, + setup: async ({ page }) => { + await page.click('[aria-label="Close navigation"]'); + }, + }, + { + description: 'panels stacking on mobile', + path: 'app-layout/all-panels-open', + screenshotType: 'viewport', + configuration: { width: 600 }, + }, + { + description: 'wrapping long words', + path: 'app-layout/text-wrap', + screenshotType: 'viewport', + }, + { + description: 'fill content area', + path: 'app-layout/fill-content-area', + screenshotType: 'viewport', + }, + { + description: 'with tools and drawers', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + queryParams: { hasTools: 'true' }, + }, + { + description: 'with open drawer and open side split panel', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + configuration: { width: 1400 }, + queryParams: { splitPanelPosition: 'side' }, + setup: async ({ page }) => { + await page.click('[aria-label="Security trigger button"]'); + await page.click('[aria-label="Open panel"]'); + }, + }, + // regression for https://github.com/cloudscape-design/components/pull/1612 + { + description: 'with open drawer and open side split panel after resize', + path: 'app-layout/with-drawers', + screenshotType: 'viewport', + configuration: { width: 1500 }, + queryParams: { splitPanelPosition: 'side' }, + setup: async ({ page }) => { + await page.click('[aria-label="Security trigger button"]'); + await page.click('[aria-label="Open panel"]'); + await page.setWindowSize({ width: 1400, height: 800 }); + }, + }, + // ── Transitions ─────────────────────────────────────────────────────── + { + description: 'transition from 400px to 1800px', + path: 'app-layout/default', + screenshotType: 'viewport', + configuration: { width: 400, height: 400 }, + setup: async ({ page }) => { + await page.setWindowSize({ width: 1800, height: 400 }); + }, + }, + { + description: 'transition from 1800px to 400px', + path: 'app-layout/default', + screenshotType: 'viewport', + configuration: { width: 1800, height: 400 }, + setup: async ({ page }) => { + await page.setWindowSize({ width: 400, height: 400 }); + }, + }, + ], +}; + +export default suite; diff --git a/test/visual/app-layout-content-paddings.test.ts b/test/visual/app-layout-content-paddings.test.ts new file mode 100644 index 0000000000..e566d79817 --- /dev/null +++ b/test/visual/app-layout-content-paddings.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-content-paddings'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-drawers.test.ts b/test/visual/app-layout-drawers.test.ts new file mode 100644 index 0000000000..c66454010d --- /dev/null +++ b/test/visual/app-layout-drawers.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-drawers'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-flashbar.test.ts b/test/visual/app-layout-flashbar.test.ts new file mode 100644 index 0000000000..333642e5f3 --- /dev/null +++ b/test/visual/app-layout-flashbar.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-flashbar'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-header.test.ts b/test/visual/app-layout-header.test.ts new file mode 100644 index 0000000000..682f71ffe2 --- /dev/null +++ b/test/visual/app-layout-header.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-header'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-multi.test.ts b/test/visual/app-layout-multi.test.ts new file mode 100644 index 0000000000..244019c8fb --- /dev/null +++ b/test/visual/app-layout-multi.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-multi'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-1280.test.ts b/test/visual/app-layout-responsive-1280.test.ts new file mode 100644 index 0000000000..0324b2bf39 --- /dev/null +++ b/test/visual/app-layout-responsive-1280.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-responsive-1280'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-1400.test.ts b/test/visual/app-layout-responsive-1400.test.ts new file mode 100644 index 0000000000..745372c34e --- /dev/null +++ b/test/visual/app-layout-responsive-1400.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-responsive-1400'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-1920.test.ts b/test/visual/app-layout-responsive-1920.test.ts new file mode 100644 index 0000000000..bee5fc8763 --- /dev/null +++ b/test/visual/app-layout-responsive-1920.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-responsive-1920'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-2540.test.ts b/test/visual/app-layout-responsive-2540.test.ts new file mode 100644 index 0000000000..48bc8580da --- /dev/null +++ b/test/visual/app-layout-responsive-2540.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-responsive-2540'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-600.test.ts b/test/visual/app-layout-responsive-600.test.ts new file mode 100644 index 0000000000..cd9243cb32 --- /dev/null +++ b/test/visual/app-layout-responsive-600.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-responsive-600'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-sticky-table-header-split-panel.test.ts b/test/visual/app-layout-sticky-table-header-split-panel.test.ts new file mode 100644 index 0000000000..c1ad3016a1 --- /dev/null +++ b/test/visual/app-layout-sticky-table-header-split-panel.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-sticky-table-header-split-panel'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-toolbar.test.ts b/test/visual/app-layout-toolbar.test.ts new file mode 100644 index 0000000000..398d6386f8 --- /dev/null +++ b/test/visual/app-layout-toolbar.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-toolbar'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout-z-index.test.ts b/test/visual/app-layout-z-index.test.ts new file mode 100644 index 0000000000..5f69f77b71 --- /dev/null +++ b/test/visual/app-layout-z-index.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout-z-index'; + +runTestSuites([suite]); diff --git a/test/visual/app-layout.test.ts b/test/visual/app-layout.test.ts new file mode 100644 index 0000000000..21c3a6ce25 --- /dev/null +++ b/test/visual/app-layout.test.ts @@ -0,0 +1,6 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { runTestSuites } from '../definitions/utils'; +import suite from '../definitions/visual/app-layout'; + +runTestSuites([suite]); From 1654fea5b9d242bf6040150802cae87b3d0ae1ce Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Fri, 10 Jul 2026 14:00:27 +0200 Subject: [PATCH 2/3] Refactor exports --- test/definitions/index.ts | 33 ++++++++++----------------------- 1 file changed, 10 insertions(+), 23 deletions(-) diff --git a/test/definitions/index.ts b/test/definitions/index.ts index 27ec0772c6..c7f3a79a63 100644 --- a/test/definitions/index.ts +++ b/test/definitions/index.ts @@ -5,26 +5,10 @@ // Import them here manually to form the full test suite. import { TestSuite } from './types'; export { TestSuite, TestDefinition, ScreenshotType, ScreenshotTestConfiguration } from './types'; -export { default as actionCard } from './visual/action-card'; -export { default as alert } from './visual/alert'; -export { default as appLayout } from './visual/app-layout'; -export { default as appLayoutContentPaddings } from './visual/app-layout-content-paddings'; -export { default as appLayoutDrawers } from './visual/app-layout-drawers'; -export { default as appLayoutFlashbar } from './visual/app-layout-flashbar'; -export { default as appLayoutHeader } from './visual/app-layout-header'; -export { default as appLayoutMulti } from './visual/app-layout-multi'; -export { default as appLayoutResponsive600 } from './visual/app-layout-responsive-600'; -export { default as appLayoutResponsive1280 } from './visual/app-layout-responsive-1280'; -export { default as appLayoutResponsive1400 } from './visual/app-layout-responsive-1400'; -export { default as appLayoutResponsive1920 } from './visual/app-layout-responsive-1920'; -export { default as appLayoutResponsive2540 } from './visual/app-layout-responsive-2540'; -export { default as appLayoutStickyTableHeaderSplitPanel } from './visual/app-layout-sticky-table-header-split-panel'; -export { default as appLayoutToolbar } from './visual/app-layout-toolbar'; -export { default as appLayoutZIndex } from './visual/app-layout-z-index'; -import actionCard from './visual/action-card'; -import alert from './visual/alert'; -import appLayout from './visual/app-layout'; +import actionCardSuite from './visual/action-card'; +import alertSuite from './visual/alert'; +import appLayoutGeneral from './visual/app-layout'; import appLayoutContentPaddings from './visual/app-layout-content-paddings'; import appLayoutDrawers from './visual/app-layout-drawers'; import appLayoutFlashbar from './visual/app-layout-flashbar'; @@ -39,10 +23,11 @@ import appLayoutStickyTableHeaderSplitPanel from './visual/app-layout-sticky-tab import appLayoutToolbar from './visual/app-layout-toolbar'; import appLayoutZIndex from './visual/app-layout-z-index'; -export const allSuites: TestSuite[] = [ - actionCard, - alert, - appLayout, +// Per-component exports (grouped by component) +export const actionCard: TestSuite[] = [actionCardSuite]; +export const alert: TestSuite[] = [alertSuite]; +export const appLayout: TestSuite[] = [ + appLayoutGeneral, appLayoutContentPaddings, appLayoutDrawers, appLayoutFlashbar, @@ -57,3 +42,5 @@ export const allSuites: TestSuite[] = [ appLayoutToolbar, appLayoutZIndex, ]; + +export const allSuites: TestSuite[] = [...actionCard, ...alert, ...appLayout]; From 51e92db0a29b457ea17aa0f789816e6c84cc69d8 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Fri, 10 Jul 2026 18:44:01 +0200 Subject: [PATCH 3/3] Group app layout tests --- test/definitions/index.ts | 12 ++---------- .../definitions/visual/app-layout-responsive-1280.ts | 7 ------- .../definitions/visual/app-layout-responsive-1400.ts | 7 ------- .../definitions/visual/app-layout-responsive-1920.ts | 7 ------- .../definitions/visual/app-layout-responsive-2540.ts | 7 ------- test/definitions/visual/app-layout-responsive-600.ts | 7 ------- test/definitions/visual/app-layout-responsive.ts | 12 ++++++++++++ test/visual/app-layout-responsive-1280.test.ts | 6 ------ test/visual/app-layout-responsive-1400.test.ts | 6 ------ test/visual/app-layout-responsive-1920.test.ts | 6 ------ test/visual/app-layout-responsive-2540.test.ts | 6 ------ ...ive-600.test.ts => app-layout-responsive.test.ts} | 2 +- 12 files changed, 15 insertions(+), 70 deletions(-) delete mode 100644 test/definitions/visual/app-layout-responsive-1280.ts delete mode 100644 test/definitions/visual/app-layout-responsive-1400.ts delete mode 100644 test/definitions/visual/app-layout-responsive-1920.ts delete mode 100644 test/definitions/visual/app-layout-responsive-2540.ts delete mode 100644 test/definitions/visual/app-layout-responsive-600.ts create mode 100644 test/definitions/visual/app-layout-responsive.ts delete mode 100644 test/visual/app-layout-responsive-1280.test.ts delete mode 100644 test/visual/app-layout-responsive-1400.test.ts delete mode 100644 test/visual/app-layout-responsive-1920.test.ts delete mode 100644 test/visual/app-layout-responsive-2540.test.ts rename test/visual/{app-layout-responsive-600.test.ts => app-layout-responsive.test.ts} (73%) diff --git a/test/definitions/index.ts b/test/definitions/index.ts index c7f3a79a63..48ffebbca1 100644 --- a/test/definitions/index.ts +++ b/test/definitions/index.ts @@ -14,11 +14,7 @@ import appLayoutDrawers from './visual/app-layout-drawers'; import appLayoutFlashbar from './visual/app-layout-flashbar'; import appLayoutHeader from './visual/app-layout-header'; import appLayoutMulti from './visual/app-layout-multi'; -import appLayoutResponsive600 from './visual/app-layout-responsive-600'; -import appLayoutResponsive1280 from './visual/app-layout-responsive-1280'; -import appLayoutResponsive1400 from './visual/app-layout-responsive-1400'; -import appLayoutResponsive1920 from './visual/app-layout-responsive-1920'; -import appLayoutResponsive2540 from './visual/app-layout-responsive-2540'; +import appLayoutResponsive from './visual/app-layout-responsive'; import appLayoutStickyTableHeaderSplitPanel from './visual/app-layout-sticky-table-header-split-panel'; import appLayoutToolbar from './visual/app-layout-toolbar'; import appLayoutZIndex from './visual/app-layout-z-index'; @@ -33,11 +29,7 @@ export const appLayout: TestSuite[] = [ appLayoutFlashbar, appLayoutHeader, appLayoutMulti, - appLayoutResponsive600, - appLayoutResponsive1280, - appLayoutResponsive1400, - appLayoutResponsive1920, - appLayoutResponsive2540, + appLayoutResponsive, appLayoutStickyTableHeaderSplitPanel, appLayoutToolbar, appLayoutZIndex, diff --git a/test/definitions/visual/app-layout-responsive-1280.ts b/test/definitions/visual/app-layout-responsive-1280.ts deleted file mode 100644 index 46a4dbec91..0000000000 --- a/test/definitions/visual/app-layout-responsive-1280.ts +++ /dev/null @@ -1,7 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { responsiveTests } from './app-layout-responsive-tests'; - -const suite = responsiveTests(1280); - -export default suite; diff --git a/test/definitions/visual/app-layout-responsive-1400.ts b/test/definitions/visual/app-layout-responsive-1400.ts deleted file mode 100644 index ed5a5318e4..0000000000 --- a/test/definitions/visual/app-layout-responsive-1400.ts +++ /dev/null @@ -1,7 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { responsiveTests } from './app-layout-responsive-tests'; - -const suite = responsiveTests(1400); - -export default suite; diff --git a/test/definitions/visual/app-layout-responsive-1920.ts b/test/definitions/visual/app-layout-responsive-1920.ts deleted file mode 100644 index bd93da763d..0000000000 --- a/test/definitions/visual/app-layout-responsive-1920.ts +++ /dev/null @@ -1,7 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { responsiveTests } from './app-layout-responsive-tests'; - -const suite = responsiveTests(1920); - -export default suite; diff --git a/test/definitions/visual/app-layout-responsive-2540.ts b/test/definitions/visual/app-layout-responsive-2540.ts deleted file mode 100644 index 95515c29f7..0000000000 --- a/test/definitions/visual/app-layout-responsive-2540.ts +++ /dev/null @@ -1,7 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { responsiveTests } from './app-layout-responsive-tests'; - -const suite = responsiveTests(2540); - -export default suite; diff --git a/test/definitions/visual/app-layout-responsive-600.ts b/test/definitions/visual/app-layout-responsive-600.ts deleted file mode 100644 index f358b753e3..0000000000 --- a/test/definitions/visual/app-layout-responsive-600.ts +++ /dev/null @@ -1,7 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { responsiveTests } from './app-layout-responsive-tests'; - -const suite = responsiveTests(600); - -export default suite; diff --git a/test/definitions/visual/app-layout-responsive.ts b/test/definitions/visual/app-layout-responsive.ts new file mode 100644 index 0000000000..9620dd6be1 --- /dev/null +++ b/test/definitions/visual/app-layout-responsive.ts @@ -0,0 +1,12 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { TestSuite } from '../types'; +import { responsiveTests } from './app-layout-responsive-tests'; + +const suite: TestSuite = { + description: 'Responsive', + componentName: 'app-layout', + tests: [600, 1280, 1400, 1920, 2540].map(width => responsiveTests(width)), +}; + +export default suite; diff --git a/test/visual/app-layout-responsive-1280.test.ts b/test/visual/app-layout-responsive-1280.test.ts deleted file mode 100644 index 0324b2bf39..0000000000 --- a/test/visual/app-layout-responsive-1280.test.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { runTestSuites } from '../definitions/utils'; -import suite from '../definitions/visual/app-layout-responsive-1280'; - -runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-1400.test.ts b/test/visual/app-layout-responsive-1400.test.ts deleted file mode 100644 index 745372c34e..0000000000 --- a/test/visual/app-layout-responsive-1400.test.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { runTestSuites } from '../definitions/utils'; -import suite from '../definitions/visual/app-layout-responsive-1400'; - -runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-1920.test.ts b/test/visual/app-layout-responsive-1920.test.ts deleted file mode 100644 index bee5fc8763..0000000000 --- a/test/visual/app-layout-responsive-1920.test.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { runTestSuites } from '../definitions/utils'; -import suite from '../definitions/visual/app-layout-responsive-1920'; - -runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-2540.test.ts b/test/visual/app-layout-responsive-2540.test.ts deleted file mode 100644 index 48bc8580da..0000000000 --- a/test/visual/app-layout-responsive-2540.test.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { runTestSuites } from '../definitions/utils'; -import suite from '../definitions/visual/app-layout-responsive-2540'; - -runTestSuites([suite]); diff --git a/test/visual/app-layout-responsive-600.test.ts b/test/visual/app-layout-responsive.test.ts similarity index 73% rename from test/visual/app-layout-responsive-600.test.ts rename to test/visual/app-layout-responsive.test.ts index cd9243cb32..668d4b3522 100644 --- a/test/visual/app-layout-responsive-600.test.ts +++ b/test/visual/app-layout-responsive.test.ts @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import { runTestSuites } from '../definitions/utils'; -import suite from '../definitions/visual/app-layout-responsive-600'; +import suite from '../definitions/visual/app-layout-responsive'; runTestSuites([suite]);