diff --git a/test/definitions/visual/app-layout-content-paddings.ts b/test/definitions/visual/app-layout-content-paddings.ts index eaf0c3e003..1f7ed1d500 100644 --- a/test/definitions/visual/app-layout-content-paddings.ts +++ b/test/definitions/visual/app-layout-content-paddings.ts @@ -3,26 +3,31 @@ import { TestSuite } from '../types'; const suite: TestSuite = { - description: 'Content paddings', + description: 'AppLayout', 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', + { + description: 'Content paddings', + 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, - 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' }, - })), + configuration: { width }, + queryParams: { splitPanelOpen: 'true', splitPanelPosition: 'side' }, + })), + ], + }, ], }; diff --git a/test/definitions/visual/app-layout-drawers.ts b/test/definitions/visual/app-layout-drawers.ts index 08c525181f..1cf5e778e1 100644 --- a/test/definitions/visual/app-layout-drawers.ts +++ b/test/definitions/visual/app-layout-drawers.ts @@ -3,65 +3,70 @@ import { TestSuite } from '../types'; const suite: TestSuite = { - description: 'Drawers', + description: 'AppLayout', 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', + description: 'Drawers', + 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', + }, + ], }, ], }; diff --git a/test/definitions/visual/app-layout-flashbar.ts b/test/definitions/visual/app-layout-flashbar.ts index 5db8a93ebb..bd8bb7004d 100644 --- a/test/definitions/visual/app-layout-flashbar.ts +++ b/test/definitions/visual/app-layout-flashbar.ts @@ -3,36 +3,41 @@ import { TestSuite } from '../types'; const suite: TestSuite = { - description: 'Flashbar', + description: 'AppLayout', 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"]'); - }, - })) - ) - ) - ), + tests: [ + { + description: 'Flashbar', + 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 index 8e1e332021..abb1345182 100644 --- a/test/definitions/visual/app-layout-header.ts +++ b/test/definitions/visual/app-layout-header.ts @@ -3,10 +3,9 @@ import { TestDefinition, TestSuite } from '../types'; const suite: TestSuite = { - description: 'Headers', + description: 'AppLayout', componentName: 'app-layout', tests: [ - // ── Headers ─────────────────────────────────────────────────────────── { description: 'Headers', tests: [600, 1280].flatMap(width => [ diff --git a/test/definitions/visual/app-layout-multi.ts b/test/definitions/visual/app-layout-multi.ts index 5cba6eba87..30fd81e13e 100644 --- a/test/definitions/visual/app-layout-multi.ts +++ b/test/definitions/visual/app-layout-multi.ts @@ -3,22 +3,27 @@ import { TestSuite } from '../types'; const suite: TestSuite = { - description: 'Multiple instances', + description: 'AppLayout', componentName: 'app-layout', - tests: [600, 1280].flatMap(width => [ + tests: [ { - description: `simple (${width}px)`, - path: 'app-layout/multi-layout-simple', - screenshotType: 'viewport' as const, - configuration: { width }, + description: 'Multiple instances', + 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 }, + }, + ]), }, - { - 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-tests.ts b/test/definitions/visual/app-layout-responsive-tests.ts index 1d9954ad1e..7b7062a376 100644 --- a/test/definitions/visual/app-layout-responsive-tests.ts +++ b/test/definitions/visual/app-layout-responsive-tests.ts @@ -9,7 +9,6 @@ import { TestSuite } from '../types'; export function responsiveTests(width: number): TestSuite { return { description: `AppLayout responsive width ${width}px`, - componentName: 'app-layout', tests: [ { description: 'default', diff --git a/test/definitions/visual/app-layout-responsive.ts b/test/definitions/visual/app-layout-responsive.ts index 9620dd6be1..1be555e154 100644 --- a/test/definitions/visual/app-layout-responsive.ts +++ b/test/definitions/visual/app-layout-responsive.ts @@ -4,9 +4,14 @@ import { TestSuite } from '../types'; import { responsiveTests } from './app-layout-responsive-tests'; const suite: TestSuite = { - description: 'Responsive', + description: 'AppLayout', componentName: 'app-layout', - tests: [600, 1280, 1400, 1920, 2540].map(width => responsiveTests(width)), + tests: [ + { + description: 'Responsive', + tests: [600, 1280, 1400, 1920, 2540].map(width => responsiveTests(width)), + }, + ], }; export default suite; 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 index 63707a4362..704c1f15cb 100644 --- a/test/definitions/visual/app-layout-sticky-table-header-split-panel.ts +++ b/test/definitions/visual/app-layout-sticky-table-header-split-panel.ts @@ -3,73 +3,78 @@ import { TestSuite } from '../types'; const suite: TestSuite = { - description: 'Sticky header with split panel', + description: 'AppLayout', 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"]'); - }, + description: 'Sticky header with split panel', + 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"]'); + }, + }, + ], }, ], }; diff --git a/test/definitions/visual/app-layout-toolbar.ts b/test/definitions/visual/app-layout-toolbar.ts index 074bc6f7a7..1a5d5f4b31 100644 --- a/test/definitions/visual/app-layout-toolbar.ts +++ b/test/definitions/visual/app-layout-toolbar.ts @@ -3,18 +3,23 @@ import { TestSuite } from '../types'; const suite: TestSuite = { - description: 'Toolbar', + description: 'AppLayout', 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', + description: 'Toolbar', + 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', + }, + ], }, ], }; diff --git a/test/definitions/visual/app-layout-z-index.ts b/test/definitions/visual/app-layout-z-index.ts index 6b06cf3836..5f225a8918 100644 --- a/test/definitions/visual/app-layout-z-index.ts +++ b/test/definitions/visual/app-layout-z-index.ts @@ -3,77 +3,82 @@ import { TestDefinition, TestSuite } from '../types'; const suite: TestSuite = { - description: 'Z-index', + description: 'AppLayout', 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 }); + { + description: 'Z-index', + 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 }); + }, }, - } 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 }); + { + 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 }); + }, }, - } 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"]'); - }, + { + 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"]'); + }, + }, + ], }, ], };