diff --git a/package.json b/package.json index b21e5ee808..ff4fd72f1c 100644 --- a/package.json +++ b/package.json @@ -216,7 +216,6 @@ "dev:dl": "ng serve dev-dl --port 3003", "dev:dropdown": "ng serve dev-dropdown --port 3003", "dev:dynamic-translation": "ng serve dev-dynamic-translation --port 3003", - "dev:e2e": "ng serve dev-e2e", "dev:empty-state": "ng serve dev-empty-state --port 3003", "dev:experimental-form-field": "ng serve dev-experimental-form-field --port 3003", "dev:file-upload": "ng serve dev-file-upload --port 3003", @@ -284,6 +283,7 @@ "unit:koobiq-docs": "ng test koobiq-docs", "unit:api-gen": "jest --roots tools/api-gen", "-----E2E_TESTS-----": "--------------------------------------------------------------------------------------", + "dev:e2e": "ng serve dev-e2e", "e2e:setup": "playwright install chromium --with-deps && playwright install webkit --with-deps", "e2e:components": "playwright test", "-----API-----": "--------------------------------------------------------------------------------------------", diff --git a/packages/components/accordion/__screenshots__/KbqAccordionModule-E2eAccordionStates-accordion-dark-theme-1.png b/packages/components/accordion/__screenshots__/01-dark.png similarity index 100% rename from packages/components/accordion/__screenshots__/KbqAccordionModule-E2eAccordionStates-accordion-dark-theme-1.png rename to packages/components/accordion/__screenshots__/01-dark.png diff --git a/packages/components/accordion/__screenshots__/KbqAccordionModule-E2eAccordionStates-accordion-default-1.png b/packages/components/accordion/__screenshots__/01-light.png similarity index 100% rename from packages/components/accordion/__screenshots__/KbqAccordionModule-E2eAccordionStates-accordion-default-1.png rename to packages/components/accordion/__screenshots__/01-light.png diff --git a/packages/components/accordion/e2e.playwright-spec.ts b/packages/components/accordion/e2e.playwright-spec.ts index fe761cbbbe..00c726732e 100644 --- a/packages/components/accordion/e2e.playwright-spec.ts +++ b/packages/components/accordion/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqAccordionModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eAccordionStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('accordion default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eAccordionStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('accordion (dark theme)', async ({ page }) => { - await page.goto('/E2eAccordionStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/actions-panel/__screenshots__/1-light.png b/packages/components/actions-panel/__screenshots__/1-light.png new file mode 100644 index 0000000000..2a73df9a34 Binary files /dev/null and b/packages/components/actions-panel/__screenshots__/1-light.png differ diff --git a/packages/components/actions-panel/__screenshots__/2-dark.png b/packages/components/actions-panel/__screenshots__/2-dark.png new file mode 100644 index 0000000000..b13342d501 Binary files /dev/null and b/packages/components/actions-panel/__screenshots__/2-dark.png differ diff --git a/packages/components/actions-panel/__screenshots__/2-light.png b/packages/components/actions-panel/__screenshots__/2-light.png new file mode 100644 index 0000000000..551fd5e3ed Binary files /dev/null and b/packages/components/actions-panel/__screenshots__/2-light.png differ diff --git a/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-84e9a-ld-show-hidden-actions-when-button-is-clicked-1.png b/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-84e9a-ld-show-hidden-actions-when-button-is-clicked-1.png deleted file mode 100644 index 7386f5c7c5..0000000000 Binary files a/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-84e9a-ld-show-hidden-actions-when-button-is-clicked-1.png and /dev/null differ diff --git a/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-87d07-sition-size-when-overlay-container-is-resized-1.png b/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-87d07-sition-size-when-overlay-container-is-resized-1.png deleted file mode 100644 index a7493f7415..0000000000 Binary files a/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-87d07-sition-size-when-overlay-container-is-resized-1.png and /dev/null differ diff --git a/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-d48f9-actions-panel-inside-custom-overlay-container-1.png b/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-d48f9-actions-panel-inside-custom-overlay-container-1.png deleted file mode 100644 index 4417828332..0000000000 Binary files a/packages/components/actions-panel/__screenshots__/KbqActionsPanel-E2eActionsPanelWithOverlayCont-d48f9-actions-panel-inside-custom-overlay-container-1.png and /dev/null differ diff --git a/packages/components/actions-panel/e2e.playwright-spec.ts b/packages/components/actions-panel/e2e.playwright-spec.ts index 00ba8fcdd8..927a5d9a68 100644 --- a/packages/components/actions-panel/e2e.playwright-spec.ts +++ b/packages/components/actions-panel/e2e.playwright-spec.ts @@ -1,8 +1,10 @@ import { expect, Locator, Page, test } from '@playwright/test'; -import { e2eEnableDarkTheme } from '../../e2e/utils'; +import { e2eEnableDarkTheme } from 'packages/e2e/utils'; test.describe('KbqActionsPanel', () => { test.describe('E2eActionsPanelWithOverlayContainer', () => { + test.use({ viewport: { width: 650, height: 200 } }); + const getComponent = (page: Page) => page.getByTestId('e2eActionsPanelWithOverlayContainer'); const getOpenButton = (locator: Locator) => locator.getByTestId('e2eActionsPanelOpenButton'); const getOverlayContainer = (locator: Locator) => locator.getByTestId('e2eActionsPanelOverlayContainer'); @@ -10,38 +12,25 @@ test.describe('KbqActionsPanel', () => { const getOverflowItemsResultButton = (page: Page) => page.getByTestId('e2eActionsPanelOverflowItemsResultButton'); - test('should display the actions panel inside custom overlay container', async ({ page }) => { + test('with custom container', async ({ page }) => { await page.goto('/E2eActionsPanelWithOverlayContainer'); const locator = getComponent(page); await getOpenButton(locator).click(); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('1-light.png'); }); - test('should update the actions panel container position/size when overlay container is resized', async ({ - page - }) => { + test('items overflow and dropdown', async ({ page }) => { await page.goto('/E2eActionsPanelWithOverlayContainer'); const locator = getComponent(page); + const screenshotTarget = getScreenshotTarget(locator); await getOpenButton(locator).click(); - await getOverlayContainer(locator).evaluate(({ style }) => (style.width = '600px')); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('should show hidden actions when button is clicked', async ({ page }) => { - await page.setViewportSize({ width: 800, height: 200 }); - await page.goto('/E2eActionsPanelWithOverlayContainer'); - const locator = getComponent(page); - + await getOverlayContainer(locator).evaluate(({ style }) => (style.width = '650px')); + getOverflowItemsResultButton(page).click(); + await expect(screenshotTarget).toHaveScreenshot('2-light.png'); await e2eEnableDarkTheme(page); - await getOpenButton(locator).click(); - await getOverlayContainer(locator).evaluate(({ style }) => (style.width = '600px')); - await getOverflowItemsResultButton(page).click(); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('2-dark.png'); }); }); }); diff --git a/packages/components/alert/__screenshots__/KbqAlertModule-E2eAlertStateAndStyle-KbqAlert-states-dark-theme-1.png b/packages/components/alert/__screenshots__/01-dark.png similarity index 100% rename from packages/components/alert/__screenshots__/KbqAlertModule-E2eAlertStateAndStyle-KbqAlert-states-dark-theme-1.png rename to packages/components/alert/__screenshots__/01-dark.png diff --git a/packages/components/alert/__screenshots__/KbqAlertModule-E2eAlertStateAndStyle-KbqAlert-states-1.png b/packages/components/alert/__screenshots__/01-light.png similarity index 100% rename from packages/components/alert/__screenshots__/KbqAlertModule-E2eAlertStateAndStyle-KbqAlert-states-1.png rename to packages/components/alert/__screenshots__/01-light.png diff --git a/packages/components/alert/e2e.playwright-spec.ts b/packages/components/alert/e2e.playwright-spec.ts index c34004e302..3313f6fe99 100644 --- a/packages/components/alert/e2e.playwright-spec.ts +++ b/packages/components/alert/e2e.playwright-spec.ts @@ -6,24 +6,14 @@ test.describe('KbqAlertModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eAlertStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eAlertTable'); - test('KbqAlert states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eAlertStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqAlert states (dark theme)`, async ({ page }) => { - await page.goto('/E2eAlertStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherStates-AppSwitcher-dark-theme-1.png b/packages/components/app-switcher/__screenshots__/01-dark.png similarity index 100% rename from packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherStates-AppSwitcher-dark-theme-1.png rename to packages/components/app-switcher/__screenshots__/01-dark.png diff --git a/packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherStates-AppSwitcher-default-1.png b/packages/components/app-switcher/__screenshots__/01-light.png similarity index 100% rename from packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherStates-AppSwitcher-default-1.png rename to packages/components/app-switcher/__screenshots__/01-light.png diff --git a/packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherWithSitesStates-AppSwitcher-dark-theme-1.png b/packages/components/app-switcher/__screenshots__/02-dark.png similarity index 100% rename from packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherWithSitesStates-AppSwitcher-dark-theme-1.png rename to packages/components/app-switcher/__screenshots__/02-dark.png diff --git a/packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherWithSitesStates-AppSwitcher-default-1.png b/packages/components/app-switcher/__screenshots__/02-light.png similarity index 100% rename from packages/components/app-switcher/__screenshots__/KbqAppSwitcherModule-E2eAppSwitcherWithSitesStates-AppSwitcher-default-1.png rename to packages/components/app-switcher/__screenshots__/02-light.png diff --git a/packages/components/app-switcher/e2e.playwright-spec.ts b/packages/components/app-switcher/e2e.playwright-spec.ts index 586cfd6360..461a2a4af5 100644 --- a/packages/components/app-switcher/e2e.playwright-spec.ts +++ b/packages/components/app-switcher/e2e.playwright-spec.ts @@ -6,21 +6,13 @@ test.describe('KbqAppSwitcherModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eAppSwitcherStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('AppSwitcher default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eAppSwitcherStates'); - const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('AppSwitcher (dark theme)', async ({ page }) => { - await page.goto('/E2eAppSwitcherStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); @@ -28,21 +20,13 @@ test.describe('KbqAppSwitcherModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eAppSwitcherWithSitesStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('AppSwitcher default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eAppSwitcherWithSitesStates'); - const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('AppSwitcher (dark theme)', async ({ page }) => { - await page.goto('/E2eAppSwitcherWithSitesStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-dark.png'); }); }); }); diff --git a/packages/components/autocomplete/__screenshots__/KbqAutocompleteModule-E2eAutocompleteStates-dark-theme-1.png b/packages/components/autocomplete/__screenshots__/01-dark.png similarity index 100% rename from packages/components/autocomplete/__screenshots__/KbqAutocompleteModule-E2eAutocompleteStates-dark-theme-1.png rename to packages/components/autocomplete/__screenshots__/01-dark.png diff --git a/packages/components/autocomplete/__screenshots__/KbqAutocompleteModule-E2eAutocompleteStates-light-theme-1.png b/packages/components/autocomplete/__screenshots__/01-light.png similarity index 100% rename from packages/components/autocomplete/__screenshots__/KbqAutocompleteModule-E2eAutocompleteStates-light-theme-1.png rename to packages/components/autocomplete/__screenshots__/01-light.png diff --git a/packages/components/autocomplete/e2e.playwright-spec.ts b/packages/components/autocomplete/e2e.playwright-spec.ts index dbc09752d2..425f3a371b 100644 --- a/packages/components/autocomplete/e2e.playwright-spec.ts +++ b/packages/components/autocomplete/e2e.playwright-spec.ts @@ -6,19 +6,13 @@ test.describe('KbqAutocompleteModule', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eAutocompleteStates'); const getAutocompleteInput = (page: Page): Locator => page.getByTestId('e2eAutocompleteInput'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eAutocompleteStates'); await getAutocompleteInput(page).focus(); await page.keyboard.press('ArrowDown'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.goto('/E2eAutocompleteStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await getAutocompleteInput(page).focus(); - await page.keyboard.press('ArrowDown'); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/badge/__screenshots__/KbqBadgeModule-E2eBadgeStyles-dark-theme-1.png b/packages/components/badge/__screenshots__/01-dark.png similarity index 100% rename from packages/components/badge/__screenshots__/KbqBadgeModule-E2eBadgeStyles-dark-theme-1.png rename to packages/components/badge/__screenshots__/01-dark.png diff --git a/packages/components/badge/__screenshots__/KbqBadgeModule-E2eBadgeStyles-light-theme-1.png b/packages/components/badge/__screenshots__/01-light.png similarity index 100% rename from packages/components/badge/__screenshots__/KbqBadgeModule-E2eBadgeStyles-light-theme-1.png rename to packages/components/badge/__screenshots__/01-light.png diff --git a/packages/components/badge/e2e.playwright-spec.ts b/packages/components/badge/e2e.playwright-spec.ts index 38f71c6f02..7ce2534b40 100644 --- a/packages/components/badge/e2e.playwright-spec.ts +++ b/packages/components/badge/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqBadgeModule', () => { test.describe('E2eBadgeStyles', () => { const getComponent = (page: Page) => page.getByTestId('e2eBadgeStyles'); - test('light theme', async ({ page }) => { - await page.goto('/E2eBadgeStyles'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('styles', async ({ page }) => { await page.goto('/E2eBadgeStyles'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-Dropdown-Hover-1.png b/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-Dropdown-Hover-1.png deleted file mode 100644 index 9d1ba28f02..0000000000 Binary files a/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-Dropdown-Hover-1.png and /dev/null differ diff --git a/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-states-1.png b/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-states-1.png deleted file mode 100644 index 4f4f3bfeed..0000000000 Binary files a/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-states-1.png and /dev/null differ diff --git a/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-states-dark-theme-1.png b/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-states-dark-theme-1.png deleted file mode 100644 index 2db8c90440..0000000000 Binary files a/packages/components/breadcrumbs/__screenshots__/KbqBreadcrumbsModule-E2eBreadcrumbsStateAndStyle-KbqBreadcrumbs-states-dark-theme-1.png and /dev/null differ diff --git a/packages/components/breadcrumbs/e2e.playwright-spec.ts b/packages/components/breadcrumbs/e2e.playwright-spec.ts index 835550e821..1b512765ac 100644 --- a/packages/components/breadcrumbs/e2e.playwright-spec.ts +++ b/packages/components/breadcrumbs/e2e.playwright-spec.ts @@ -1,42 +1,37 @@ import { expect, Locator, Page, test } from '@playwright/test'; -import { e2eEnableDarkTheme } from '../../e2e/utils'; +import { e2eEnableDarkTheme, e2eWhenStable } from 'packages/e2e/utils'; -test.describe('KbqBreadcrumbsModule', () => { +// @TODO: should be fixed (#DS-4622) +test.fixme('KbqBreadcrumbsModule', () => { test.describe('E2eBreadcrumbsStateAndStyle', () => { const getComponent = (page: Page) => page.getByTestId('e2eBreadcrumbsStateAndStyle'); - const getTestTable = (locator: Locator) => locator.getByTestId('e2eBreadcrumbsTable'); - const getTestRow = (locator: Locator) => locator.getByTestId('e2eBreadcrumbsDropdownRow'); - const hoverLastItem = (locator: Locator) => locator.locator('.kbq-breadcrumb-item').last().hover(); + const getBreadcrumbsWithDropdown = (locator: Locator) => locator.getByTestId('e2eBreadcrumbsWithDropdown'); + const getLastBreadcrumbItem = (locator: Locator) => locator.locator('.kbq-breadcrumb-item').last(); - test('KbqBreadcrumbs states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eBreadcrumbsStateAndStyle'); - const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); + const component = getComponent(page); - await expect(screenshotTarget).toHaveScreenshot(); - }); + await e2eWhenStable(component); - test(`KbqBreadcrumbs states (dark theme)`, async ({ page }) => { - await page.goto('/E2eBreadcrumbsStateAndStyle'); + await expect(component).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(component).toHaveScreenshot('01-dark.png'); }); - test('KbqBreadcrumbs Dropdown Hover', async ({ page }) => { + test('dropdown and hover', async ({ page }) => { await page.goto('/E2eBreadcrumbsStateAndStyle'); - const locator = getComponent(page); - const screenshotTarget = getTestRow(locator); + const component = getComponent(page); + + await e2eWhenStable(component); + + const screenshotTarget = getBreadcrumbsWithDropdown(component); - await hoverLastItem(screenshotTarget); + await getLastBreadcrumbItem(screenshotTarget).hover(); - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('02-light.png'); }); }); }); diff --git a/packages/components/breadcrumbs/e2e.ts b/packages/components/breadcrumbs/e2e.ts index 0abf846574..9a6df90f07 100644 --- a/packages/components/breadcrumbs/e2e.ts +++ b/packages/components/breadcrumbs/e2e.ts @@ -26,96 +26,77 @@ type BreadcrumbState = { KbqDropdownModule ], template: ` -
- - @for (row of states; track $index) { - - @for (cell of row; track $index) { - - } - - } - - - + @for (row of states; track $index) { + @for (cell of row; track $index) { + + } + } - - - -
- -
- -
-
-
+ + RBAC + ABAC + + `, styles: ` - td { - border-spacing: 0; + :host { + display: inline-flex; + flex-direction: column; + gap: var(--kbq-size-xs); + padding: var(--kbq-size-s); } `, changeDetection: ChangeDetectionStrategy.OnPush, host: { - class: 'layout-margin-top-l layout-margin-bottom-l layout-column', 'data-testid': 'e2eBreadcrumbsStateAndStyle' } }) diff --git a/packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-button-toggle-with-title-1.png b/packages/components/button-toggle/__screenshots__/01-light.png similarity index 100% rename from packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-button-toggle-with-title-1.png rename to packages/components/button-toggle/__screenshots__/01-light.png diff --git a/packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-button-toggle-with-icon-1.png b/packages/components/button-toggle/__screenshots__/02-light.png similarity index 100% rename from packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-button-toggle-with-icon-1.png rename to packages/components/button-toggle/__screenshots__/02-light.png diff --git a/packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-bu-72908-le-with-title-prefix-and-suffix-dark-theme-1.png b/packages/components/button-toggle/__screenshots__/03-dark.png similarity index 100% rename from packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-bu-72908-le-with-title-prefix-and-suffix-dark-theme-1.png rename to packages/components/button-toggle/__screenshots__/03-dark.png diff --git a/packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-button-toggle-with-title-prefix-and-suffix-1.png b/packages/components/button-toggle/__screenshots__/03-light.png similarity index 100% rename from packages/components/button-toggle/__screenshots__/KbqButtonToggleModule-E2eButtonToggleStates-button-toggle-with-title-prefix-and-suffix-1.png rename to packages/components/button-toggle/__screenshots__/03-light.png diff --git a/packages/components/button-toggle/e2e.playwright-spec.ts b/packages/components/button-toggle/e2e.playwright-spec.ts index 455b080043..b2083c2a37 100644 --- a/packages/components/button-toggle/e2e.playwright-spec.ts +++ b/packages/components/button-toggle/e2e.playwright-spec.ts @@ -9,43 +9,33 @@ test.describe('KbqButtonToggleModule', () => { const toggleSuffix = (locator: Locator) => locator.getByTestId('e2eShowSuffixIcon').click(); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('button-toggle with title', async ({ page }) => { + test('with title', async ({ page }) => { await page.goto('/E2eButtonToggleStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); }); - test('button-toggle with icon', async ({ page }) => { + test('with icon', async ({ page }) => { await page.goto('/E2eButtonToggleStates'); const locator = getComponent(page); await togglePrefix(locator); await toggleTitle(locator); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-light.png'); }); - test('button-toggle with title, prefix and suffix', async ({ page }) => { + test('with title, prefix and suffix', async ({ page }) => { await page.goto('/E2eButtonToggleStates'); const locator = getComponent(page); await togglePrefix(locator); await toggleSuffix(locator); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('button-toggle with title, prefix and suffix (dark theme)', async ({ page }) => { - await page.goto('/E2eButtonToggleStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await togglePrefix(locator); - await toggleSuffix(locator); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('03-dark.png'); }); }); }); diff --git a/packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-title-1.png b/packages/components/button/__screenshots__/01-light.png similarity index 100% rename from packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-title-1.png rename to packages/components/button/__screenshots__/01-light.png diff --git a/packages/components/button/__screenshots__/02-light.png b/packages/components/button/__screenshots__/02-light.png new file mode 100644 index 0000000000..2a3d408795 Binary files /dev/null and b/packages/components/button/__screenshots__/02-light.png differ diff --git a/packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-title-prefix-and-suffix-dark-theme-1.png b/packages/components/button/__screenshots__/03-dark.png similarity index 100% rename from packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-title-prefix-and-suffix-dark-theme-1.png rename to packages/components/button/__screenshots__/03-dark.png diff --git a/packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-title-prefix-and-suffix-1.png b/packages/components/button/__screenshots__/03-light.png similarity index 100% rename from packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-title-prefix-and-suffix-1.png rename to packages/components/button/__screenshots__/03-light.png diff --git a/packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-icon-1.png b/packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-icon-1.png deleted file mode 100644 index 626e9e6316..0000000000 Binary files a/packages/components/button/__screenshots__/KbqButtonModule-E2eButtonStateAndStyle-button-with-icon-1.png and /dev/null differ diff --git a/packages/components/button/e2e.playwright-spec.ts b/packages/components/button/e2e.playwright-spec.ts index 1b4b710f3e..27d49a8f4c 100644 --- a/packages/components/button/e2e.playwright-spec.ts +++ b/packages/components/button/e2e.playwright-spec.ts @@ -9,43 +9,33 @@ test.describe('KbqButtonModule', () => { const toggleSuffix = (locator: Locator) => locator.getByTestId('e2eShowSuffixIcon').click(); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('button with title', async ({ page }) => { + test('with title', async ({ page }) => { await page.goto('/E2eButtonStateAndStyle'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); }); - test('button with icon', async ({ page }) => { + test('with icon', async ({ page }) => { await page.goto('/E2eButtonStateAndStyle'); const locator = getComponent(page); await togglePrefix(locator); await toggleTitle(locator); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-light.png'); }); - test('button with title, prefix and suffix', async ({ page }) => { + test('with title, prefix and suffix', async ({ page }) => { await page.goto('/E2eButtonStateAndStyle'); const locator = getComponent(page); await togglePrefix(locator); await toggleSuffix(locator); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('button with title, prefix and suffix (dark theme)', async ({ page }) => { - await page.goto('/E2eButtonStateAndStyle'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await togglePrefix(locator); - await toggleSuffix(locator); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('03-dark.png'); }); }); }); diff --git a/packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxStateAndStyle-dark-theme-1.png b/packages/components/checkbox/__screenshots__/01-dark.png similarity index 100% rename from packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxStateAndStyle-dark-theme-1.png rename to packages/components/checkbox/__screenshots__/01-dark.png diff --git a/packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxStateAndStyle-light-theme-1.png b/packages/components/checkbox/__screenshots__/01-light.png similarity index 100% rename from packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxStateAndStyle-light-theme-1.png rename to packages/components/checkbox/__screenshots__/01-light.png diff --git a/packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxWithTextAndCaption-dark-theme-1.png b/packages/components/checkbox/__screenshots__/02-dark.png similarity index 100% rename from packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxWithTextAndCaption-dark-theme-1.png rename to packages/components/checkbox/__screenshots__/02-dark.png diff --git a/packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxWithTextAndCaption-light-theme-1.png b/packages/components/checkbox/__screenshots__/02-light.png similarity index 100% rename from packages/components/checkbox/__screenshots__/KbqCheckboxModule-E2eCheckboxWithTextAndCaption-light-theme-1.png rename to packages/components/checkbox/__screenshots__/02-light.png diff --git a/packages/components/checkbox/e2e.playwright-spec.ts b/packages/components/checkbox/e2e.playwright-spec.ts index b7ca6488c0..755af78948 100644 --- a/packages/components/checkbox/e2e.playwright-spec.ts +++ b/packages/components/checkbox/e2e.playwright-spec.ts @@ -5,30 +5,22 @@ test.describe('KbqCheckboxModule', () => { test.describe('E2eCheckboxStateAndStyle', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eCheckboxStateAndStyle'); - test('light theme', async ({ page }) => { - await page.goto('/E2eCheckboxStateAndStyle'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eCheckboxStateAndStyle'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); test.describe('E2eCheckboxWithTextAndCaption', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eCheckboxWithTextAndCaption'); - test('light theme', async ({ page }) => { - await page.goto('/E2eCheckboxWithTextAndCaption'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eCheckboxWithTextAndCaption'); + await expect(getComponent(page)).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('02-dark.png'); }); }); }); diff --git a/packages/components/clamped-text/__screenshots__/KbqClampedText-E2eClampedTextStateAndStyle-KbqClampedText-states-dark-theme-1.png b/packages/components/clamped-text/__screenshots__/01-dark.png similarity index 100% rename from packages/components/clamped-text/__screenshots__/KbqClampedText-E2eClampedTextStateAndStyle-KbqClampedText-states-dark-theme-1.png rename to packages/components/clamped-text/__screenshots__/01-dark.png diff --git a/packages/components/clamped-text/__screenshots__/KbqClampedText-E2eClampedTextStateAndStyle-KbqClampedText-states-1.png b/packages/components/clamped-text/__screenshots__/01-light.png similarity index 100% rename from packages/components/clamped-text/__screenshots__/KbqClampedText-E2eClampedTextStateAndStyle-KbqClampedText-states-1.png rename to packages/components/clamped-text/__screenshots__/01-light.png diff --git a/packages/components/clamped-text/e2e.playwright-spec.ts b/packages/components/clamped-text/e2e.playwright-spec.ts index b51c3a1860..a06c5747cb 100644 --- a/packages/components/clamped-text/e2e.playwright-spec.ts +++ b/packages/components/clamped-text/e2e.playwright-spec.ts @@ -6,24 +6,14 @@ test.describe('KbqClampedText', () => { const getComponent = (page: Page) => page.getByTestId('e2eClampedTextStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eClampedTextTable'); - test('KbqClampedText states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eClampedTextStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqClampedText states (dark theme)`, async ({ page }) => { - await page.goto('/E2eClampedTextStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/code-block/__screenshots__/KbqCodeBlockModule-E2eCodeBlockStates-dark-theme-1.png b/packages/components/code-block/__screenshots__/01-dark.png similarity index 100% rename from packages/components/code-block/__screenshots__/KbqCodeBlockModule-E2eCodeBlockStates-dark-theme-1.png rename to packages/components/code-block/__screenshots__/01-dark.png diff --git a/packages/components/code-block/__screenshots__/KbqCodeBlockModule-E2eCodeBlockStates-light-theme-1.png b/packages/components/code-block/__screenshots__/01-light.png similarity index 100% rename from packages/components/code-block/__screenshots__/KbqCodeBlockModule-E2eCodeBlockStates-light-theme-1.png rename to packages/components/code-block/__screenshots__/01-light.png diff --git a/packages/components/code-block/e2e.playwright-spec.ts b/packages/components/code-block/e2e.playwright-spec.ts index 388ca8e023..a9d1875f51 100644 --- a/packages/components/code-block/e2e.playwright-spec.ts +++ b/packages/components/code-block/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqCodeBlockModule', () => { test.describe('E2eCodeBlockStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eCodeBlockStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eCodeBlockStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eCodeBlockStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/content-panel/__screenshots__/KbqContentPanelModule-E2eContentPanelState-dark-theme-1.png b/packages/components/content-panel/__screenshots__/01-dark.png similarity index 100% rename from packages/components/content-panel/__screenshots__/KbqContentPanelModule-E2eContentPanelState-dark-theme-1.png rename to packages/components/content-panel/__screenshots__/01-dark.png diff --git a/packages/components/content-panel/__screenshots__/KbqContentPanelModule-E2eContentPanelState-light-theme-1.png b/packages/components/content-panel/__screenshots__/01-light.png similarity index 100% rename from packages/components/content-panel/__screenshots__/KbqContentPanelModule-E2eContentPanelState-light-theme-1.png rename to packages/components/content-panel/__screenshots__/01-light.png diff --git a/packages/components/content-panel/e2e.playwright-spec.ts b/packages/components/content-panel/e2e.playwright-spec.ts index 92765e023d..87b0af8ed6 100644 --- a/packages/components/content-panel/e2e.playwright-spec.ts +++ b/packages/components/content-panel/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqContentPanelModule', () => { test.describe('E2eContentPanelState', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eContentPanelState'); - test('light theme', async ({ page }) => { - await page.goto('/E2eContentPanelState'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eContentPanelState'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/datepicker/__screenshots__/KbqDatepickerModule-E2eDatepickerStates-datepicker-dark-theme-1.png b/packages/components/datepicker/__screenshots__/01-dark.png similarity index 100% rename from packages/components/datepicker/__screenshots__/KbqDatepickerModule-E2eDatepickerStates-datepicker-dark-theme-1.png rename to packages/components/datepicker/__screenshots__/01-dark.png diff --git a/packages/components/datepicker/__screenshots__/KbqDatepickerModule-E2eDatepickerStates-datepicker-default-1.png b/packages/components/datepicker/__screenshots__/01-light.png similarity index 100% rename from packages/components/datepicker/__screenshots__/KbqDatepickerModule-E2eDatepickerStates-datepicker-default-1.png rename to packages/components/datepicker/__screenshots__/01-light.png diff --git a/packages/components/datepicker/e2e.playwright-spec.ts b/packages/components/datepicker/e2e.playwright-spec.ts index 2530dd46c7..45de9285af 100644 --- a/packages/components/datepicker/e2e.playwright-spec.ts +++ b/packages/components/datepicker/e2e.playwright-spec.ts @@ -6,25 +6,14 @@ test.describe('KbqDatepickerModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eDatepickerStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('datepicker default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eDatepickerStates'); - await page.getByTestId('e2eDatepickerToggle').click(); - const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('datepicker (dark theme)', async ({ page }) => { - await page.goto('/E2eDatepickerStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - await page.getByTestId('e2eDatepickerToggle').click(); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/divider/__screenshots__/KbqDivider-E2eDividerStateAndStyle-KbqDivider-states-dark-theme-1.png b/packages/components/divider/__screenshots__/01-dark.png similarity index 100% rename from packages/components/divider/__screenshots__/KbqDivider-E2eDividerStateAndStyle-KbqDivider-states-dark-theme-1.png rename to packages/components/divider/__screenshots__/01-dark.png diff --git a/packages/components/divider/__screenshots__/KbqDivider-E2eDividerStateAndStyle-KbqDivider-states-1.png b/packages/components/divider/__screenshots__/01-light.png similarity index 100% rename from packages/components/divider/__screenshots__/KbqDivider-E2eDividerStateAndStyle-KbqDivider-states-1.png rename to packages/components/divider/__screenshots__/01-light.png diff --git a/packages/components/divider/e2e.playwright-spec.ts b/packages/components/divider/e2e.playwright-spec.ts index 66a6617643..4337195dfe 100644 --- a/packages/components/divider/e2e.playwright-spec.ts +++ b/packages/components/divider/e2e.playwright-spec.ts @@ -6,24 +6,14 @@ test.describe('KbqDivider', () => { const getComponent = (page: Page) => page.getByTestId('e2eDividerStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eDividerTable'); - test('KbqDivider states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eDividerStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqDivider states (dark theme)`, async ({ page }) => { - await page.goto('/E2eDividerStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/dl/__screenshots__/KbqDlModule-E2eDlStates-dark-theme-1.png b/packages/components/dl/__screenshots__/01-dark.png similarity index 100% rename from packages/components/dl/__screenshots__/KbqDlModule-E2eDlStates-dark-theme-1.png rename to packages/components/dl/__screenshots__/01-dark.png diff --git a/packages/components/dl/__screenshots__/KbqDlModule-E2eDlStates-light-theme-1.png b/packages/components/dl/__screenshots__/01-light.png similarity index 100% rename from packages/components/dl/__screenshots__/KbqDlModule-E2eDlStates-light-theme-1.png rename to packages/components/dl/__screenshots__/01-light.png diff --git a/packages/components/dl/e2e.playwright-spec.ts b/packages/components/dl/e2e.playwright-spec.ts index 873000510f..06156b1efb 100644 --- a/packages/components/dl/e2e.playwright-spec.ts +++ b/packages/components/dl/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqDlModule', () => { test.describe('E2eDlStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eDlStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eDlStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eDlStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/dropdown/__screenshots__/KbqDropdownModule-E2eDropdownStates-dark-theme-1.png b/packages/components/dropdown/__screenshots__/01-dark.png similarity index 100% rename from packages/components/dropdown/__screenshots__/KbqDropdownModule-E2eDropdownStates-dark-theme-1.png rename to packages/components/dropdown/__screenshots__/01-dark.png diff --git a/packages/components/dropdown/__screenshots__/KbqDropdownModule-E2eDropdownStates-light-theme-1.png b/packages/components/dropdown/__screenshots__/01-light.png similarity index 100% rename from packages/components/dropdown/__screenshots__/KbqDropdownModule-E2eDropdownStates-light-theme-1.png rename to packages/components/dropdown/__screenshots__/01-light.png diff --git a/packages/components/dropdown/e2e.playwright-spec.ts b/packages/components/dropdown/e2e.playwright-spec.ts index 044e184749..066927c1d3 100644 --- a/packages/components/dropdown/e2e.playwright-spec.ts +++ b/packages/components/dropdown/e2e.playwright-spec.ts @@ -8,7 +8,7 @@ test.describe('KbqDropdownModule', () => { const getSubmenuTrigger = (page: Page) => page.getByTestId('e2eSubmenuTrigger'); const getSubmenu2ItemWithIcon = (page: Page) => page.getByTestId('e2eSubmenu2ItemWithIcon'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eDropdownStates'); const component = getComponent(page); @@ -19,22 +19,9 @@ test.describe('KbqDropdownModule', () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('ArrowRight'); await getSubmenu2ItemWithIcon(page).hover(); - await expect(component).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.goto('/E2eDropdownStates'); + await expect(component).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - const component = getComponent(page); - - await component.scrollIntoViewIfNeeded(); - await getDropdownTrigger(page).click(); - await getSubmenuTrigger(page).hover(); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowRight'); - await getSubmenu2ItemWithIcon(page).hover(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/empty-state/__screenshots__/KbqEmptyStateModule-E2eEmptyStateStateAndStyle-KbqEmptyState-states-dark-theme-1.png b/packages/components/empty-state/__screenshots__/01-dark.png similarity index 100% rename from packages/components/empty-state/__screenshots__/KbqEmptyStateModule-E2eEmptyStateStateAndStyle-KbqEmptyState-states-dark-theme-1.png rename to packages/components/empty-state/__screenshots__/01-dark.png diff --git a/packages/components/empty-state/__screenshots__/KbqEmptyStateModule-E2eEmptyStateStateAndStyle-KbqEmptyState-states-1.png b/packages/components/empty-state/__screenshots__/01-light.png similarity index 100% rename from packages/components/empty-state/__screenshots__/KbqEmptyStateModule-E2eEmptyStateStateAndStyle-KbqEmptyState-states-1.png rename to packages/components/empty-state/__screenshots__/01-light.png diff --git a/packages/components/empty-state/e2e.playwright-spec.ts b/packages/components/empty-state/e2e.playwright-spec.ts index cac4013c93..b94995b6f2 100644 --- a/packages/components/empty-state/e2e.playwright-spec.ts +++ b/packages/components/empty-state/e2e.playwright-spec.ts @@ -6,24 +6,14 @@ test.describe('KbqEmptyStateModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eEmptyStateStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eEmptyStateTable'); - test('KbqEmptyState states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eEmptyStateStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqEmptyState states (dark theme)`, async ({ page }) => { - await page.goto('/E2eEmptyStateStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqSingleFileUploadComponent-states-dark-theme-1.png b/packages/components/file-upload/__screenshots__/01-dark.png similarity index 100% rename from packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqSingleFileUploadComponent-states-dark-theme-1.png rename to packages/components/file-upload/__screenshots__/01-dark.png diff --git a/packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqSingleFileUploadComponent-states-1.png b/packages/components/file-upload/__screenshots__/01-light.png similarity index 100% rename from packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqSingleFileUploadComponent-states-1.png rename to packages/components/file-upload/__screenshots__/01-light.png diff --git a/packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqMultipleFileUploadComponent-states-dark-theme-1.png b/packages/components/file-upload/__screenshots__/02-dark.png similarity index 100% rename from packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqMultipleFileUploadComponent-states-dark-theme-1.png rename to packages/components/file-upload/__screenshots__/02-dark.png diff --git a/packages/components/file-upload/__screenshots__/02-light.png b/packages/components/file-upload/__screenshots__/02-light.png new file mode 100644 index 0000000000..0eb757b18f Binary files /dev/null and b/packages/components/file-upload/__screenshots__/02-light.png differ diff --git a/packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqMultipleFileUploadComponent-states-1.png b/packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqMultipleFileUploadComponent-states-1.png deleted file mode 100644 index 3efed3fba8..0000000000 Binary files a/packages/components/file-upload/__screenshots__/KbqFileUploadModule-E2eFileUploadStateAndStyle-KbqMultipleFileUploadComponent-states-1.png and /dev/null differ diff --git a/packages/components/file-upload/e2e.playwright-spec.ts b/packages/components/file-upload/e2e.playwright-spec.ts index 8b0a1dafc7..7c37ba183b 100644 --- a/packages/components/file-upload/e2e.playwright-spec.ts +++ b/packages/components/file-upload/e2e.playwright-spec.ts @@ -15,20 +15,9 @@ test.describe('KbqFileUploadModule', () => { const screenshotTarget = getSingleFileUploadTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqSingleFileUploadComponent states (dark theme)`, async ({ page }) => { - await page.goto('/E2eFileUploadStateAndStyle'); - await page.setViewportSize({ width: 1400, height: 320 }); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await page.setViewportSize({ width: 1400, height: 320 }); - - const locator = getComponent(page); - - const screenshotTarget = getSingleFileUploadTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); test('KbqMultipleFileUploadComponent states', async ({ page }) => { @@ -39,19 +28,9 @@ test.describe('KbqFileUploadModule', () => { const screenshotTarget = getMultipleFileUploadTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqMultipleFileUploadComponent states (dark theme)`, async ({ page }) => { - await page.goto('/E2eFileUploadStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - await page.setViewportSize({ width: 1400, height: 900 }); - - const locator = getComponent(page); - - const screenshotTarget = getMultipleFileUploadTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('02-dark.png'); }); }); }); diff --git a/packages/components/filter-bar/__screenshots__/KbqFilterBarModule-E2eFilterBarStates-FilterBar-dark-theme-1.png b/packages/components/filter-bar/__screenshots__/01-dark.png similarity index 100% rename from packages/components/filter-bar/__screenshots__/KbqFilterBarModule-E2eFilterBarStates-FilterBar-dark-theme-1.png rename to packages/components/filter-bar/__screenshots__/01-dark.png diff --git a/packages/components/filter-bar/__screenshots__/KbqFilterBarModule-E2eFilterBarStates-FilterBar-default-1.png b/packages/components/filter-bar/__screenshots__/01-light.png similarity index 100% rename from packages/components/filter-bar/__screenshots__/KbqFilterBarModule-E2eFilterBarStates-FilterBar-default-1.png rename to packages/components/filter-bar/__screenshots__/01-light.png diff --git a/packages/components/filter-bar/e2e.playwright-spec.ts b/packages/components/filter-bar/e2e.playwright-spec.ts index 5e89c744b5..185485d564 100644 --- a/packages/components/filter-bar/e2e.playwright-spec.ts +++ b/packages/components/filter-bar/e2e.playwright-spec.ts @@ -6,21 +6,13 @@ test.describe('KbqFilterBarModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eFilterBarStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('FilterBar default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eFilterBarStates'); - const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('FilterBar (dark theme)', async ({ page }) => { - await page.goto('/E2eFilterBarStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/icon/__screenshots__/01-dark.png b/packages/components/icon/__screenshots__/01-dark.png new file mode 100644 index 0000000000..3d0489fdc9 Binary files /dev/null and b/packages/components/icon/__screenshots__/01-dark.png differ diff --git a/packages/components/icon/__screenshots__/01-light.png b/packages/components/icon/__screenshots__/01-light.png new file mode 100644 index 0000000000..155db092af Binary files /dev/null and b/packages/components/icon/__screenshots__/01-light.png differ diff --git a/packages/components/icon/__screenshots__/KbqIconModule-E2eIconStateAndStyle-KbqIcon-states-1.png b/packages/components/icon/__screenshots__/KbqIconModule-E2eIconStateAndStyle-KbqIcon-states-1.png deleted file mode 100644 index d3b70e6728..0000000000 Binary files a/packages/components/icon/__screenshots__/KbqIconModule-E2eIconStateAndStyle-KbqIcon-states-1.png and /dev/null differ diff --git a/packages/components/icon/__screenshots__/KbqIconModule-E2eIconStateAndStyle-KbqIcon-states-dark-theme-1.png b/packages/components/icon/__screenshots__/KbqIconModule-E2eIconStateAndStyle-KbqIcon-states-dark-theme-1.png deleted file mode 100644 index 67b9440957..0000000000 Binary files a/packages/components/icon/__screenshots__/KbqIconModule-E2eIconStateAndStyle-KbqIcon-states-dark-theme-1.png and /dev/null differ diff --git a/packages/components/icon/e2e.playwright-spec.ts b/packages/components/icon/e2e.playwright-spec.ts index 3136cba262..64331ea61f 100644 --- a/packages/components/icon/e2e.playwright-spec.ts +++ b/packages/components/icon/e2e.playwright-spec.ts @@ -6,24 +6,14 @@ test.describe('KbqIconModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eIconStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eIconTable'); - test('KbqIcon states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eIconStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqIcon states (dark theme)`, async ({ page }) => { - await page.goto('/E2eIconStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInput-states-dark-theme-1.png b/packages/components/input/__screenshots__/01-dark.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInput-states-dark-theme-1.png rename to packages/components/input/__screenshots__/01-dark.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInput-states-1.png b/packages/components/input/__screenshots__/01-light.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInput-states-1.png rename to packages/components/input/__screenshots__/01-light.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-states-dark-theme-1.png b/packages/components/input/__screenshots__/02-dark.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-states-dark-theme-1.png rename to packages/components/input/__screenshots__/02-dark.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-states-1.png b/packages/components/input/__screenshots__/02-light.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-states-1.png rename to packages/components/input/__screenshots__/02-light.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-default-hints-dark-theme-1.png b/packages/components/input/__screenshots__/03-dark.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-default-hints-dark-theme-1.png rename to packages/components/input/__screenshots__/03-dark.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-default-hints-1.png b/packages/components/input/__screenshots__/03-light.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-default-hints-1.png rename to packages/components/input/__screenshots__/03-light.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-text-visibile-1.png b/packages/components/input/__screenshots__/04-light.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-text-visibile-1.png rename to packages/components/input/__screenshots__/04-light.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-hints-on-blur-dark-theme-1.png b/packages/components/input/__screenshots__/05-dark.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-hints-on-blur-dark-theme-1.png rename to packages/components/input/__screenshots__/05-dark.png diff --git a/packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-hints-on-blur-1.png b/packages/components/input/__screenshots__/05-light.png similarity index 100% rename from packages/components/input/__screenshots__/KbqInputModule-E2eInputStateAndStyle-KbqInputPassword-hints-on-blur-1.png rename to packages/components/input/__screenshots__/05-light.png diff --git a/packages/components/input/e2e.playwright-spec.ts b/packages/components/input/e2e.playwright-spec.ts index 1043f8fbb3..ba2739c521 100644 --- a/packages/components/input/e2e.playwright-spec.ts +++ b/packages/components/input/e2e.playwright-spec.ts @@ -11,21 +11,11 @@ test.describe('KbqInputModule', () => { test('states', async ({ page }) => { await page.goto('/E2eInputStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`states (dark theme)`, async ({ page }) => { - await page.goto('/E2eInputStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); @@ -36,84 +26,46 @@ test.describe('KbqInputModule', () => { test('states', async ({ page }) => { await page.goto('/E2eInputStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`states (dark theme)`, async ({ page }) => { - await page.goto('/E2eInputStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('02-dark.png'); }); - test('default hints', async ({ page }) => { + test('hints', async ({ page }) => { await page.goto('/E2eInputStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getInputPasswordTestRow(locator); - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('03-light.png'); + await e2eEnableDarkTheme(page); + await expect(screenshotTarget).toHaveScreenshot('03-dark.png'); }); - test('text visibile', async ({ page }) => { + test('text visible', async ({ page }) => { await page.goto('/E2eInputStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getInputPasswordTestRow(locator); - const toggle = screenshotTarget.locator('kbq-password-toggle'); await toggle.click(); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test('default hints (dark theme)', async ({ page }) => { - await page.goto('/E2eInputStateAndStyle'); - await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getInputPasswordTestRow(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('04-light.png'); }); test('hints on blur', async ({ page }) => { await page.goto('/E2eInputStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getInputPasswordTestRow(locator); - const inputPassword = screenshotTarget.locator('input'); await inputPassword.focus(); await inputPassword.blur(); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test('hints on blur (dark theme)', async ({ page }) => { - await page.goto('/E2eInputStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('05-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getInputPasswordTestRow(locator); - - const inputPassword = screenshotTarget.locator('input'); - - await inputPassword.focus(); - await inputPassword.blur(); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('05-dark.png'); }); }); }); diff --git a/packages/components/link/__screenshots__/KbqLinkModule-E2eLinkStates-dark-theme-1.png b/packages/components/link/__screenshots__/01-dark.png similarity index 100% rename from packages/components/link/__screenshots__/KbqLinkModule-E2eLinkStates-dark-theme-1.png rename to packages/components/link/__screenshots__/01-dark.png diff --git a/packages/components/link/__screenshots__/KbqLinkModule-E2eLinkStates-light-theme-1.png b/packages/components/link/__screenshots__/01-light.png similarity index 100% rename from packages/components/link/__screenshots__/KbqLinkModule-E2eLinkStates-light-theme-1.png rename to packages/components/link/__screenshots__/01-light.png diff --git a/packages/components/link/e2e.playwright-spec.ts b/packages/components/link/e2e.playwright-spec.ts index 701972cfe6..3728297008 100644 --- a/packages/components/link/e2e.playwright-spec.ts +++ b/packages/components/link/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqLinkModule', () => { test.describe('E2eLinkStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eLinkStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eLinkStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eLinkStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/list/__screenshots__/KbqListModule-E2eListStates-list-dark-theme-1.png b/packages/components/list/__screenshots__/01-dark.png similarity index 100% rename from packages/components/list/__screenshots__/KbqListModule-E2eListStates-list-dark-theme-1.png rename to packages/components/list/__screenshots__/01-dark.png diff --git a/packages/components/list/__screenshots__/KbqListModule-E2eListStates-list-default-1.png b/packages/components/list/__screenshots__/01-light.png similarity index 100% rename from packages/components/list/__screenshots__/KbqListModule-E2eListStates-list-default-1.png rename to packages/components/list/__screenshots__/01-light.png diff --git a/packages/components/list/e2e.playwright-spec.ts b/packages/components/list/e2e.playwright-spec.ts index 1e1907c453..0f7ae3f8ee 100644 --- a/packages/components/list/e2e.playwright-spec.ts +++ b/packages/components/list/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqListModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eListStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('list default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eListStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('list (dark theme)', async ({ page }) => { - await page.goto('/E2eListStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/loader-overlay/__screenshots__/01-dark.png b/packages/components/loader-overlay/__screenshots__/01-dark.png new file mode 100644 index 0000000000..51db6a8312 Binary files /dev/null and b/packages/components/loader-overlay/__screenshots__/01-dark.png differ diff --git a/packages/components/loader-overlay/__screenshots__/01-light.png b/packages/components/loader-overlay/__screenshots__/01-light.png new file mode 100644 index 0000000000..200a1055d3 Binary files /dev/null and b/packages/components/loader-overlay/__screenshots__/01-light.png differ diff --git a/packages/components/loader-overlay/__screenshots__/KbqLoaderOverlayModule-E2eLoaderOverlayStates-dark-theme-1.png b/packages/components/loader-overlay/__screenshots__/KbqLoaderOverlayModule-E2eLoaderOverlayStates-dark-theme-1.png deleted file mode 100644 index 57601c8a06..0000000000 Binary files a/packages/components/loader-overlay/__screenshots__/KbqLoaderOverlayModule-E2eLoaderOverlayStates-dark-theme-1.png and /dev/null differ diff --git a/packages/components/loader-overlay/__screenshots__/KbqLoaderOverlayModule-E2eLoaderOverlayStates-light-theme-1.png b/packages/components/loader-overlay/__screenshots__/KbqLoaderOverlayModule-E2eLoaderOverlayStates-light-theme-1.png deleted file mode 100644 index 91e01b22f2..0000000000 Binary files a/packages/components/loader-overlay/__screenshots__/KbqLoaderOverlayModule-E2eLoaderOverlayStates-light-theme-1.png and /dev/null differ diff --git a/packages/components/loader-overlay/e2e.playwright-spec.ts b/packages/components/loader-overlay/e2e.playwright-spec.ts index d5ada283e3..1f2bab468e 100644 --- a/packages/components/loader-overlay/e2e.playwright-spec.ts +++ b/packages/components/loader-overlay/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqLoaderOverlayModule', () => { test.describe('E2eLoaderOverlayStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eLoaderOverlayStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eLoaderOverlayStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eLoaderOverlayStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/markdown/__screenshots__/KbqMarkdownModule-E2eMarkdownStates-Markdown-dark-theme-1.png b/packages/components/markdown/__screenshots__/01-dark.png similarity index 100% rename from packages/components/markdown/__screenshots__/KbqMarkdownModule-E2eMarkdownStates-Markdown-dark-theme-1.png rename to packages/components/markdown/__screenshots__/01-dark.png diff --git a/packages/components/markdown/__screenshots__/KbqMarkdownModule-E2eMarkdownStates-Markdown-default-1.png b/packages/components/markdown/__screenshots__/01-light.png similarity index 100% rename from packages/components/markdown/__screenshots__/KbqMarkdownModule-E2eMarkdownStates-Markdown-default-1.png rename to packages/components/markdown/__screenshots__/01-light.png diff --git a/packages/components/markdown/e2e.playwright-spec.ts b/packages/components/markdown/e2e.playwright-spec.ts index 182b083dcd..7003f5defb 100644 --- a/packages/components/markdown/e2e.playwright-spec.ts +++ b/packages/components/markdown/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqMarkdownModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eMarkdownStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('Markdown default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eMarkdownStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('Markdown (dark theme)', async ({ page }) => { - await page.goto('/E2eMarkdownStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/modal/__screenshots__/KbqModalModule-E2eModalStates-dark-theme-1.png b/packages/components/modal/__screenshots__/01-dark.png similarity index 100% rename from packages/components/modal/__screenshots__/KbqModalModule-E2eModalStates-dark-theme-1.png rename to packages/components/modal/__screenshots__/01-dark.png diff --git a/packages/components/modal/__screenshots__/KbqModalModule-E2eModalStates-light-theme-1.png b/packages/components/modal/__screenshots__/01-light.png similarity index 100% rename from packages/components/modal/__screenshots__/KbqModalModule-E2eModalStates-light-theme-1.png rename to packages/components/modal/__screenshots__/01-light.png diff --git a/packages/components/modal/__screenshots__/KbqModalModule-E2eModalStates-open-multiple-modals-1.png b/packages/components/modal/__screenshots__/02-light.png similarity index 100% rename from packages/components/modal/__screenshots__/KbqModalModule-E2eModalStates-open-multiple-modals-1.png rename to packages/components/modal/__screenshots__/02-light.png diff --git a/packages/components/modal/e2e.playwright-spec.ts b/packages/components/modal/e2e.playwright-spec.ts index 228c144980..9217dae6ef 100644 --- a/packages/components/modal/e2e.playwright-spec.ts +++ b/packages/components/modal/e2e.playwright-spec.ts @@ -7,38 +7,26 @@ test.describe('KbqModalModule', () => { const getOpenButton = (page: Page) => page.getByTestId('e2eOpenModal'); const getMultipleModalsButton = (page: Page) => page.getByTestId('e2eMultipleModals'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.setViewportSize({ width: 400, height: 350 }); await page.goto('/E2eModalStates'); - const component = getComponent(page); await component.scrollIntoViewIfNeeded(); await getOpenButton(page).click(); - await expect(component).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.setViewportSize({ width: 400, height: 350 }); - await page.goto('/E2eModalStates'); + await expect(component).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const component = getComponent(page); - - await component.scrollIntoViewIfNeeded(); - await getOpenButton(page).click(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot('01-dark.png'); }); - test('open multiple modals', async ({ page }) => { + test('multiple modals', async ({ page }) => { await page.setViewportSize({ width: 400, height: 350 }); await page.goto('/E2eModalStates'); - const component = getComponent(page); await component.scrollIntoViewIfNeeded(); await getMultipleModalsButton(page).click(); - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot('02-light.png'); }); }); }); diff --git a/packages/components/navbar/__screenshots__/KbqNavbarModule-E2eHorizontalNavbarStates-navbar-dark-theme-1.png b/packages/components/navbar/__screenshots__/01-dark.png similarity index 100% rename from packages/components/navbar/__screenshots__/KbqNavbarModule-E2eHorizontalNavbarStates-navbar-dark-theme-1.png rename to packages/components/navbar/__screenshots__/01-dark.png diff --git a/packages/components/navbar/__screenshots__/KbqNavbarModule-E2eHorizontalNavbarStates-navbar-default-1.png b/packages/components/navbar/__screenshots__/01-light.png similarity index 100% rename from packages/components/navbar/__screenshots__/KbqNavbarModule-E2eHorizontalNavbarStates-navbar-default-1.png rename to packages/components/navbar/__screenshots__/01-light.png diff --git a/packages/components/navbar/__screenshots__/KbqNavbarModule-E2eVerticalNavbarStates-vertical-navbar-dark-theme-1.png b/packages/components/navbar/__screenshots__/02-dark.png similarity index 100% rename from packages/components/navbar/__screenshots__/KbqNavbarModule-E2eVerticalNavbarStates-vertical-navbar-dark-theme-1.png rename to packages/components/navbar/__screenshots__/02-dark.png diff --git a/packages/components/navbar/__screenshots__/KbqNavbarModule-E2eVerticalNavbarStates-vertical-navbar-default-1.png b/packages/components/navbar/__screenshots__/02-light.png similarity index 100% rename from packages/components/navbar/__screenshots__/KbqNavbarModule-E2eVerticalNavbarStates-vertical-navbar-default-1.png rename to packages/components/navbar/__screenshots__/02-light.png diff --git a/packages/components/navbar/e2e.playwright-spec.ts b/packages/components/navbar/e2e.playwright-spec.ts index 15c85c6d68..4366f47366 100644 --- a/packages/components/navbar/e2e.playwright-spec.ts +++ b/packages/components/navbar/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqNavbarModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eNavbarStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('navbar default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eHorizontalNavbarStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('navbar (dark theme)', async ({ page }) => { - await page.goto('/E2eHorizontalNavbarStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); @@ -27,20 +20,13 @@ test.describe('KbqNavbarModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eVerticalNavbarStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('vertical navbar default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eVerticalNavbarStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('vertical navbar (dark theme)', async ({ page }) => { - await page.goto('/E2eVerticalNavbarStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-dark.png'); }); }); }); diff --git a/packages/components/notification-center/__screenshots__/KbqNotificationCenterModule-E2eNotificationCenterStates-notification-center-dark-theme-1.png b/packages/components/notification-center/__screenshots__/01-dark.png similarity index 100% rename from packages/components/notification-center/__screenshots__/KbqNotificationCenterModule-E2eNotificationCenterStates-notification-center-dark-theme-1.png rename to packages/components/notification-center/__screenshots__/01-dark.png diff --git a/packages/components/notification-center/__screenshots__/KbqNotificationCenterModule-E2eNotificationCenterStates-notification-center-default-1.png b/packages/components/notification-center/__screenshots__/01-light.png similarity index 100% rename from packages/components/notification-center/__screenshots__/KbqNotificationCenterModule-E2eNotificationCenterStates-notification-center-default-1.png rename to packages/components/notification-center/__screenshots__/01-light.png diff --git a/packages/components/notification-center/e2e.playwright-spec.ts b/packages/components/notification-center/e2e.playwright-spec.ts index 9118b6f901..fb74731135 100644 --- a/packages/components/notification-center/e2e.playwright-spec.ts +++ b/packages/components/notification-center/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqNotificationCenterModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eNotificationCenterStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('notification-center default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eNotificationCenterStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('notification-center (dark theme)', async ({ page }) => { - await page.goto('/E2eNotificationCenterStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/popover/__screenshots__/KbqPopoverModule-E2ePopoverStates-popover-dark-theme-1.png b/packages/components/popover/__screenshots__/01-dark.png similarity index 100% rename from packages/components/popover/__screenshots__/KbqPopoverModule-E2ePopoverStates-popover-dark-theme-1.png rename to packages/components/popover/__screenshots__/01-dark.png diff --git a/packages/components/popover/__screenshots__/KbqPopoverModule-E2ePopoverStates-popover-default-1.png b/packages/components/popover/__screenshots__/01-light.png similarity index 100% rename from packages/components/popover/__screenshots__/KbqPopoverModule-E2ePopoverStates-popover-default-1.png rename to packages/components/popover/__screenshots__/01-light.png diff --git a/packages/components/popover/e2e.playwright-spec.ts b/packages/components/popover/e2e.playwright-spec.ts index b8b56f826b..5f78d5ce76 100644 --- a/packages/components/popover/e2e.playwright-spec.ts +++ b/packages/components/popover/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqPopoverModule', () => { const getComponent = (page: Page) => page.getByTestId('e2ePopoverStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('popover default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2ePopoverStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 }); - }); - - test('popover (dark theme)', async ({ page }) => { - await page.goto('/E2ePopoverStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png', { threshold: 0.05 }); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 }); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png', { threshold: 0.05 }); }); }); }); diff --git a/packages/components/progress-bar/__screenshots__/01-dark.png b/packages/components/progress-bar/__screenshots__/01-dark.png new file mode 100644 index 0000000000..98031d8a80 Binary files /dev/null and b/packages/components/progress-bar/__screenshots__/01-dark.png differ diff --git a/packages/components/progress-bar/__screenshots__/01-light.png b/packages/components/progress-bar/__screenshots__/01-light.png new file mode 100644 index 0000000000..36594dafbc Binary files /dev/null and b/packages/components/progress-bar/__screenshots__/01-light.png differ diff --git a/packages/components/progress-bar/__screenshots__/KbqProgressBar-E2eProgressBarStateAndStyle-KbqProgressBar-states-1.png b/packages/components/progress-bar/__screenshots__/KbqProgressBar-E2eProgressBarStateAndStyle-KbqProgressBar-states-1.png deleted file mode 100644 index ef793421b4..0000000000 Binary files a/packages/components/progress-bar/__screenshots__/KbqProgressBar-E2eProgressBarStateAndStyle-KbqProgressBar-states-1.png and /dev/null differ diff --git a/packages/components/progress-bar/__screenshots__/KbqProgressBar-E2eProgressBarStateAndStyle-KbqProgressBar-states-dark-theme-1.png b/packages/components/progress-bar/__screenshots__/KbqProgressBar-E2eProgressBarStateAndStyle-KbqProgressBar-states-dark-theme-1.png deleted file mode 100644 index 8ba1938fe6..0000000000 Binary files a/packages/components/progress-bar/__screenshots__/KbqProgressBar-E2eProgressBarStateAndStyle-KbqProgressBar-states-dark-theme-1.png and /dev/null differ diff --git a/packages/components/progress-bar/e2e.playwright-spec.ts b/packages/components/progress-bar/e2e.playwright-spec.ts index 1180e69613..2dc640f81e 100644 --- a/packages/components/progress-bar/e2e.playwright-spec.ts +++ b/packages/components/progress-bar/e2e.playwright-spec.ts @@ -6,28 +6,16 @@ test.describe('KbqProgressBar', () => { const getComponent = (page: Page) => page.getByTestId('e2eProgressBarStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eProgressBarTable'); - test('KbqProgressBar states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eProgressBarStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); await page.waitForTimeout(50); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqProgressBar states (dark theme)`, async ({ page }) => { - await page.goto('/E2eProgressBarStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await page.waitForTimeout(50); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/progress-spinner/__screenshots__/KbqProgressSpinnerModule-E2eProgressSpinnerStates-dark-theme-1.png b/packages/components/progress-spinner/__screenshots__/01-dark.png similarity index 100% rename from packages/components/progress-spinner/__screenshots__/KbqProgressSpinnerModule-E2eProgressSpinnerStates-dark-theme-1.png rename to packages/components/progress-spinner/__screenshots__/01-dark.png diff --git a/packages/components/progress-spinner/__screenshots__/KbqProgressSpinnerModule-E2eProgressSpinnerStates-light-theme-1.png b/packages/components/progress-spinner/__screenshots__/01-light.png similarity index 100% rename from packages/components/progress-spinner/__screenshots__/KbqProgressSpinnerModule-E2eProgressSpinnerStates-light-theme-1.png rename to packages/components/progress-spinner/__screenshots__/01-light.png diff --git a/packages/components/progress-spinner/e2e.playwright-spec.ts b/packages/components/progress-spinner/e2e.playwright-spec.ts index 2425797030..1cd975512e 100644 --- a/packages/components/progress-spinner/e2e.playwright-spec.ts +++ b/packages/components/progress-spinner/e2e.playwright-spec.ts @@ -5,21 +5,14 @@ test.describe('KbqProgressSpinnerModule', () => { test.describe('E2eProgressSpinnerStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eProgressSpinnerStates'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eProgressSpinnerStates'); await page.waitForTimeout(50); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.goto('/E2eProgressSpinnerStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - await page.waitForTimeout(50); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/radio/__screenshots__/KbqRadioModule-E2eRadioStateAndStyle-states-dark-theme-1.png b/packages/components/radio/__screenshots__/01-dark.png similarity index 100% rename from packages/components/radio/__screenshots__/KbqRadioModule-E2eRadioStateAndStyle-states-dark-theme-1.png rename to packages/components/radio/__screenshots__/01-dark.png diff --git a/packages/components/radio/__screenshots__/KbqRadioModule-E2eRadioStateAndStyle-states-1.png b/packages/components/radio/__screenshots__/01-light.png similarity index 100% rename from packages/components/radio/__screenshots__/KbqRadioModule-E2eRadioStateAndStyle-states-1.png rename to packages/components/radio/__screenshots__/01-light.png diff --git a/packages/components/radio/e2e.playwright-spec.ts b/packages/components/radio/e2e.playwright-spec.ts index e0d14b0bd4..084f408f27 100644 --- a/packages/components/radio/e2e.playwright-spec.ts +++ b/packages/components/radio/e2e.playwright-spec.ts @@ -9,21 +9,11 @@ test.describe('KbqRadioModule', () => { test('states', async ({ page }) => { await page.goto('/E2eRadioStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`states (dark theme)`, async ({ page }) => { - await page.goto('/E2eRadioStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/scrollbar/__screenshots__/KbqScrollbar-E2eScrollbarStateAndStyle-KbqScrollbar-states-dark-theme-1.png b/packages/components/scrollbar/__screenshots__/01-dark.png similarity index 100% rename from packages/components/scrollbar/__screenshots__/KbqScrollbar-E2eScrollbarStateAndStyle-KbqScrollbar-states-dark-theme-1.png rename to packages/components/scrollbar/__screenshots__/01-dark.png diff --git a/packages/components/scrollbar/__screenshots__/KbqScrollbar-E2eScrollbarStateAndStyle-KbqScrollbar-states-1.png b/packages/components/scrollbar/__screenshots__/01-light.png similarity index 100% rename from packages/components/scrollbar/__screenshots__/KbqScrollbar-E2eScrollbarStateAndStyle-KbqScrollbar-states-1.png rename to packages/components/scrollbar/__screenshots__/01-light.png diff --git a/packages/components/scrollbar/e2e.playwright-spec.ts b/packages/components/scrollbar/e2e.playwright-spec.ts index 6b8379f314..f5176eb561 100644 --- a/packages/components/scrollbar/e2e.playwright-spec.ts +++ b/packages/components/scrollbar/e2e.playwright-spec.ts @@ -8,24 +8,14 @@ test.describe('KbqScrollbar', () => { const getComponent = (page: Page) => page.getByTestId('e2eScrollbarStateAndStyle'); const getTestTable = (locator: Locator) => locator.getByTestId('e2eScrollbarTable'); - test('KbqScrollbar states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eScrollbarStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - await expect(screenshotTarget).toHaveScreenshot(); - }); - - test(`KbqScrollbar states (dark theme)`, async ({ page }) => { - await page.goto('/E2eScrollbarStateAndStyle'); + await expect(screenshotTarget).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - const screenshotTarget = getTestTable(locator); - - await expect(screenshotTarget).toHaveScreenshot(); + await expect(screenshotTarget).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/search-expandable/__screenshots__/KbqSearchExpandableModule-E2eSearchExpandableStates-search-expandable-dark-theme-1.png b/packages/components/search-expandable/__screenshots__/01-dark.png similarity index 100% rename from packages/components/search-expandable/__screenshots__/KbqSearchExpandableModule-E2eSearchExpandableStates-search-expandable-dark-theme-1.png rename to packages/components/search-expandable/__screenshots__/01-dark.png diff --git a/packages/components/search-expandable/__screenshots__/KbqSearchExpandableModule-E2eSearchExpandableStates-search-expandable-default-1.png b/packages/components/search-expandable/__screenshots__/01-light.png similarity index 100% rename from packages/components/search-expandable/__screenshots__/KbqSearchExpandableModule-E2eSearchExpandableStates-search-expandable-default-1.png rename to packages/components/search-expandable/__screenshots__/01-light.png diff --git a/packages/components/search-expandable/e2e.playwright-spec.ts b/packages/components/search-expandable/e2e.playwright-spec.ts index 5091e05531..4e6e4879b0 100644 --- a/packages/components/search-expandable/e2e.playwright-spec.ts +++ b/packages/components/search-expandable/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqSearchExpandableModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eSearchExpandableStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('search-expandable default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eSearchExpandableStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('search-expandable (dark theme)', async ({ page }) => { - await page.goto('/E2eSearchExpandableStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eSelectStates-select-dark-theme-1.png b/packages/components/select/__screenshots__/01-dark.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eSelectStates-select-dark-theme-1.png rename to packages/components/select/__screenshots__/01-dark.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eSelectStates-select-default-1.png b/packages/components/select/__screenshots__/01-light.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eSelectStates-select-default-1.png rename to packages/components/select/__screenshots__/01-light.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eMultiSelectStates-MultiSelect-dark-theme-1.png b/packages/components/select/__screenshots__/02-dark.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eMultiSelectStates-MultiSelect-dark-theme-1.png rename to packages/components/select/__screenshots__/02-dark.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eMultiSelectStates-MultiSelect-default-1.png b/packages/components/select/__screenshots__/02-light.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eMultiSelectStates-MultiSelect-default-1.png rename to packages/components/select/__screenshots__/02-light.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eMultilineSelectStates-Multiline-dark-theme-1.png b/packages/components/select/__screenshots__/03-dark.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eMultilineSelectStates-Multiline-dark-theme-1.png rename to packages/components/select/__screenshots__/03-dark.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eMultilineSelectStates-Multiline-default-1.png b/packages/components/select/__screenshots__/03-light.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eMultilineSelectStates-Multiline-default-1.png rename to packages/components/select/__screenshots__/03-light.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eSelectWithSearchAndFooter-SelectWithSearchAndFooter-dark-theme-1.png b/packages/components/select/__screenshots__/04-dark.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eSelectWithSearchAndFooter-SelectWithSearchAndFooter-dark-theme-1.png rename to packages/components/select/__screenshots__/04-dark.png diff --git a/packages/components/select/__screenshots__/KbqSelectModule-E2eSelectWithSearchAndFooter-SelectWithSearchAndFooter-default-1.png b/packages/components/select/__screenshots__/04-light.png similarity index 100% rename from packages/components/select/__screenshots__/KbqSelectModule-E2eSelectWithSearchAndFooter-SelectWithSearchAndFooter-default-1.png rename to packages/components/select/__screenshots__/04-light.png diff --git a/packages/components/select/e2e.playwright-spec.ts b/packages/components/select/e2e.playwright-spec.ts index 596cb98b04..ed8c2efc40 100644 --- a/packages/components/select/e2e.playwright-spec.ts +++ b/packages/components/select/e2e.playwright-spec.ts @@ -6,25 +6,16 @@ test.describe('KbqSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eSelectStates'); const getSelect = (locator: Locator) => locator.getByTestId('e2eSelect'); - test('select default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eSelectStates'); const screenshotTarget = getComponent(page); const select = getSelect(screenshotTarget); await select.click(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('select (dark theme)', async ({ page }) => { - await page.goto('/E2eSelectStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getSelect(screenshotTarget); - - await select.click(); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); @@ -32,25 +23,16 @@ test.describe('KbqSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eMultiselectStates'); const getSelect = (locator: Locator) => locator.getByTestId('e2eMultiSelect'); - test('MultiSelect default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eMultiSelectStates'); const screenshotTarget = getComponent(page); const select = getSelect(screenshotTarget); await select.click(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('MultiSelect (dark theme)', async ({ page }) => { - await page.goto('/E2eMultiSelectStates'); + await expect(getComponent(page)).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getSelect(screenshotTarget); - - await select.click(); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('02-dark.png'); }); }); @@ -58,25 +40,16 @@ test.describe('KbqSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eMultilineSelectStates'); const getSelect = (locator: Locator) => locator.getByTestId('e2eMultilineSelect'); - test('Multiline default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eMultilineSelectStates'); const screenshotTarget = getComponent(page); const select = getSelect(screenshotTarget); await select.click(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('Multiline (dark theme)', async ({ page }) => { - await page.goto('/E2eMultilineSelectStates'); + await expect(getComponent(page)).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getSelect(screenshotTarget); - - await select.click(); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('03-dark.png'); }); }); @@ -84,25 +57,16 @@ test.describe('KbqSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eSelectWithSearchAndFooter'); const getSelect = (locator: Locator) => locator.getByTestId('e2eSelect'); - test('SelectWithSearchAndFooter default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eSelectWithSearchAndFooter'); const screenshotTarget = getComponent(page); const select = getSelect(screenshotTarget); await select.click(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('SelectWithSearchAndFooter (dark theme)', async ({ page }) => { - await page.goto('/E2eSelectWithSearchAndFooter'); + await expect(getComponent(page)).toHaveScreenshot('04-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getSelect(screenshotTarget); - - await select.click(); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('04-dark.png'); }); }); }); diff --git a/packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-sizes-medium-1.png b/packages/components/sidepanel/__screenshots__/01-light.png similarity index 100% rename from packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-sizes-medium-1.png rename to packages/components/sidepanel/__screenshots__/01-light.png diff --git a/packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-sizes-large-1.png b/packages/components/sidepanel/__screenshots__/02-light.png similarity index 100% rename from packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-sizes-large-1.png rename to packages/components/sidepanel/__screenshots__/02-light.png diff --git a/packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-positions-right-left-1.png b/packages/components/sidepanel/__screenshots__/03-light.png similarity index 100% rename from packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-positions-right-left-1.png rename to packages/components/sidepanel/__screenshots__/03-light.png diff --git a/packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-nested-dark-theme-1.png b/packages/components/sidepanel/__screenshots__/04-dark.png similarity index 100% rename from packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-nested-dark-theme-1.png rename to packages/components/sidepanel/__screenshots__/04-dark.png diff --git a/packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-nested-1.png b/packages/components/sidepanel/__screenshots__/04-light.png similarity index 100% rename from packages/components/sidepanel/__screenshots__/KbqSidepanel-E2eSidepanelStateAndStyle-nested-1.png rename to packages/components/sidepanel/__screenshots__/04-light.png diff --git a/packages/components/sidepanel/e2e.playwright-spec.ts b/packages/components/sidepanel/e2e.playwright-spec.ts index 78084285ab..b5b803a108 100644 --- a/packages/components/sidepanel/e2e.playwright-spec.ts +++ b/packages/components/sidepanel/e2e.playwright-spec.ts @@ -9,29 +9,24 @@ test.describe('KbqSidepanel', () => { const getTestTable = (locator: Locator) => locator.getByTestId('e2eSidepanelTable'); const getSidepanelContainer = (page: Page) => page.locator('.kbq-sidepanel-container').first(); const clickButton = (locator: Locator, id: string) => locator.getByTestId(id).click(); - const testSidepanelType = async (page: Page, type: string) => { - const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - - await clickButton(screenshotTarget, type); + const testSidepanelType = async (page: Page, type: string, screenshotName: string) => { + await clickButton(getTestTable(getComponent(page)), type); + await expect(getSidepanelContainer(page)).toBeVisible(); - const sidepanelContainer = getSidepanelContainer(page); - - await expect(sidepanelContainer).toBeVisible(); - await expect(page).toHaveScreenshot(); + return expect(page).toHaveScreenshot(screenshotName); }; test.describe('sizes', () => { test('medium', async ({ page }) => { await page.setViewportSize({ width: 640, height: 300 }); await page.goto('/E2eSidepanelStateAndStyle'); - await testSidepanelType(page, 'e2eSidepanelMedium'); + await testSidepanelType(page, 'e2eSidepanelMedium', '01-light.png'); }); test('large', async ({ page }) => { await page.setViewportSize({ width: 960, height: 300 }); await page.goto('/E2eSidepanelStateAndStyle'); - await testSidepanelType(page, 'e2eSidepanelLarge'); + await testSidepanelType(page, 'e2eSidepanelLarge', '02-light.png'); }); }); @@ -39,7 +34,7 @@ test.describe('KbqSidepanel', () => { test('right-left', async ({ page }) => { await page.setViewportSize({ width: 805, height: 400 }); await page.goto('/E2eSidepanelStateAndStyle'); - await testSidepanelType(page, 'e2eSidepanelRightLeft'); + await testSidepanelType(page, 'e2eSidepanelRightLeft', '03-light.png'); }); }); @@ -47,7 +42,6 @@ test.describe('KbqSidepanel', () => { await page.setViewportSize({ width: 800, height: 300 }); await page.goto('/E2eSidepanelStateAndStyle'); const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); await clickButton(screenshotTarget, 'e2eSidepanelNested'); @@ -55,23 +49,9 @@ test.describe('KbqSidepanel', () => { const sidepanelContainer = page.locator('.kbq-sidepanel_nested'); await expect(sidepanelContainer).toBeVisible(); - await expect(sidepanelContainer).toHaveScreenshot(); - }); - - test('nested (dark theme)', async ({ page }) => { - await page.setViewportSize({ width: 800, height: 300 }); - await page.goto('/E2eSidepanelStateAndStyle'); + await expect(sidepanelContainer).toHaveScreenshot('04-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - const screenshotTarget = getTestTable(locator); - - await clickButton(screenshotTarget, 'e2eSidepanelNested'); - - const sidepanelContainer = page.locator('.kbq-sidepanel_nested'); - - await expect(sidepanelContainer).toBeVisible(); - await expect(sidepanelContainer).toHaveScreenshot(); + await expect(sidepanelContainer).toHaveScreenshot('04-dark.png'); }); }); }); diff --git a/packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-title-1.png b/packages/components/split-button/__screenshots__/01-light.png similarity index 100% rename from packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-title-1.png rename to packages/components/split-button/__screenshots__/01-light.png diff --git a/packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-icon-1.png b/packages/components/split-button/__screenshots__/02-light.png similarity index 100% rename from packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-icon-1.png rename to packages/components/split-button/__screenshots__/02-light.png diff --git a/packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-title-prefix-dark-theme-1.png b/packages/components/split-button/__screenshots__/03-dark.png similarity index 100% rename from packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-title-prefix-dark-theme-1.png rename to packages/components/split-button/__screenshots__/03-dark.png diff --git a/packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-title-prefix-1.png b/packages/components/split-button/__screenshots__/03-light.png similarity index 100% rename from packages/components/split-button/__screenshots__/KbqSplitButtonModule-E2eSplitButtonStateAndStyle-split-button-with-title-prefix-1.png rename to packages/components/split-button/__screenshots__/03-light.png diff --git a/packages/components/split-button/e2e.playwright-spec.ts b/packages/components/split-button/e2e.playwright-spec.ts index d953973746..0811d09e0b 100644 --- a/packages/components/split-button/e2e.playwright-spec.ts +++ b/packages/components/split-button/e2e.playwright-spec.ts @@ -8,41 +8,32 @@ test.describe('KbqSplitButtonModule', () => { const toggleTitle = (locator: Locator) => locator.getByTestId('e2eShowTitle').click(); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('split-button with title', async ({ page }) => { + test('with title', async ({ page }) => { await page.goto('/E2eSplitButtonStateAndStyle'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); }); - test('split-button with icon', async ({ page }) => { + test('with icon', async ({ page }) => { await page.goto('/E2eSplitButtonStateAndStyle'); const locator = getComponent(page); await togglePrefix(locator); await toggleTitle(locator); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('02-light.png'); }); - test('split-button with title, prefix', async ({ page }) => { + test('with title, prefix and suffix', async ({ page }) => { await page.goto('/E2eSplitButtonStateAndStyle'); const locator = getComponent(page); await togglePrefix(locator); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('split-button with title, prefix (dark theme)', async ({ page }) => { - await page.goto('/E2eSplitButtonStateAndStyle'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await togglePrefix(locator); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('03-dark.png'); }); }); }); diff --git a/packages/components/table/__screenshots__/KbqTableModule-E2eTableStates-dark-theme-1.png b/packages/components/table/__screenshots__/01-dark.png similarity index 100% rename from packages/components/table/__screenshots__/KbqTableModule-E2eTableStates-dark-theme-1.png rename to packages/components/table/__screenshots__/01-dark.png diff --git a/packages/components/table/__screenshots__/KbqTableModule-E2eTableStates-light-theme-1.png b/packages/components/table/__screenshots__/01-light.png similarity index 100% rename from packages/components/table/__screenshots__/KbqTableModule-E2eTableStates-light-theme-1.png rename to packages/components/table/__screenshots__/01-light.png diff --git a/packages/components/table/e2e.playwright-spec.ts b/packages/components/table/e2e.playwright-spec.ts index 36c1bb0d19..600668f89e 100644 --- a/packages/components/table/e2e.playwright-spec.ts +++ b/packages/components/table/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqTableModule', () => { test.describe('E2eTableStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eTableStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eTableStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTableStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/tabs/__screenshots__/01-dark.png b/packages/components/tabs/__screenshots__/01-dark.png new file mode 100644 index 0000000000..5132d17b99 Binary files /dev/null and b/packages/components/tabs/__screenshots__/01-dark.png differ diff --git a/packages/components/tabs/__screenshots__/01-light.png b/packages/components/tabs/__screenshots__/01-light.png new file mode 100644 index 0000000000..4229569712 Binary files /dev/null and b/packages/components/tabs/__screenshots__/01-light.png differ diff --git a/packages/components/tabs/__screenshots__/KbqTabsModule-E2eTabsStates-dark-theme-1.png b/packages/components/tabs/__screenshots__/KbqTabsModule-E2eTabsStates-dark-theme-1.png deleted file mode 100644 index 477236103d..0000000000 Binary files a/packages/components/tabs/__screenshots__/KbqTabsModule-E2eTabsStates-dark-theme-1.png and /dev/null differ diff --git a/packages/components/tabs/__screenshots__/KbqTabsModule-E2eTabsStates-light-theme-1.png b/packages/components/tabs/__screenshots__/KbqTabsModule-E2eTabsStates-light-theme-1.png deleted file mode 100644 index f4b5d690ce..0000000000 Binary files a/packages/components/tabs/__screenshots__/KbqTabsModule-E2eTabsStates-light-theme-1.png and /dev/null differ diff --git a/packages/components/tabs/e2e.playwright-spec.ts b/packages/components/tabs/e2e.playwright-spec.ts index 287daf56b8..cf744b777a 100644 --- a/packages/components/tabs/e2e.playwright-spec.ts +++ b/packages/components/tabs/e2e.playwright-spec.ts @@ -1,19 +1,20 @@ import { expect, Page, test } from '@playwright/test'; -import { e2eEnableDarkTheme } from 'packages/e2e/utils'; +import { e2eEnableDarkTheme, e2eWhenStable } from 'packages/e2e/utils'; test.describe('KbqTabsModule', () => { test.describe('E2eTabsStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eTabsStates'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTabsStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - test('dark theme', async ({ page }) => { - await page.goto('/E2eTabsStates'); + const component = getComponent(page); + + await e2eWhenStable(component); + + await expect(component).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(component).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagStateAndStyle-states-dark-theme-1.png b/packages/components/tags/__screenshots__/01-dark.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagStateAndStyle-states-dark-theme-1.png rename to packages/components/tags/__screenshots__/01-dark.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagStateAndStyle-states-1.png b/packages/components/tags/__screenshots__/01-light.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagStateAndStyle-states-1.png rename to packages/components/tags/__screenshots__/01-light.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagEditable-editable-dark-theme-1.png b/packages/components/tags/__screenshots__/02-dark.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagEditable-editable-dark-theme-1.png rename to packages/components/tags/__screenshots__/02-dark.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagEditable-editable-1.png b/packages/components/tags/__screenshots__/02-light.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagEditable-editable-1.png rename to packages/components/tags/__screenshots__/02-light.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagAutocompleteStates-dark-theme-1.png b/packages/components/tags/__screenshots__/03-dark.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagAutocompleteStates-dark-theme-1.png rename to packages/components/tags/__screenshots__/03-dark.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagAutocompleteStates-light-theme-1.png b/packages/components/tags/__screenshots__/03-light.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagAutocompleteStates-light-theme-1.png rename to packages/components/tags/__screenshots__/03-light.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagInputStates-dark-theme-1.png b/packages/components/tags/__screenshots__/04-dark.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagInputStates-dark-theme-1.png rename to packages/components/tags/__screenshots__/04-dark.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagInputStates-light-theme-1.png b/packages/components/tags/__screenshots__/04-light.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagInputStates-light-theme-1.png rename to packages/components/tags/__screenshots__/04-light.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagListStates-dark-theme-1.png b/packages/components/tags/__screenshots__/05-dark.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagListStates-dark-theme-1.png rename to packages/components/tags/__screenshots__/05-dark.png diff --git a/packages/components/tags/__screenshots__/KbqTagModule-E2eTagListStates-light-theme-1.png b/packages/components/tags/__screenshots__/05-light.png similarity index 100% rename from packages/components/tags/__screenshots__/KbqTagModule-E2eTagListStates-light-theme-1.png rename to packages/components/tags/__screenshots__/05-light.png diff --git a/packages/components/tags/e2e.playwright-spec.ts b/packages/components/tags/e2e.playwright-spec.ts index c983abd242..0614fc535b 100644 --- a/packages/components/tags/e2e.playwright-spec.ts +++ b/packages/components/tags/e2e.playwright-spec.ts @@ -8,13 +8,9 @@ test.describe('KbqTagModule', () => { test('states', async ({ page }) => { await page.goto('/E2eTagStateAndStyle'); - await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); - }); - - test('states (dark theme)', async ({ page }) => { - await page.goto('/E2eTagStateAndStyle'); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot('01-dark.png'); }); }); @@ -24,23 +20,13 @@ test.describe('KbqTagModule', () => { test('editable', async ({ page }) => { await page.goto('/E2eTagEditable'); - const component = getComponent(page); await getLastTag(component).dblclick(); - await expect(component).toHaveScreenshot(); - }); - - test('editable (dark theme)', async ({ page }) => { - await page.goto('/E2eTagEditable'); + await expect(component).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - - const component = getComponent(page); - - await getLastTag(component).dblclick(); - - await expect(component).toHaveScreenshot(); + await expect(component).toHaveScreenshot('02-dark.png'); }); }); @@ -48,19 +34,13 @@ test.describe('KbqTagModule', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eTagAutocompleteStates'); const getAutocompleteInput = (page: Page): Locator => page.getByTestId('e2eTagAutocompleteInput'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTagAutocompleteStates'); await getAutocompleteInput(page).focus(); await page.keyboard.press('ArrowDown'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.goto('/E2eTagAutocompleteStates'); + await expect(getComponent(page)).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - await getAutocompleteInput(page).focus(); - await page.keyboard.press('ArrowDown'); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('03-dark.png'); }); }); @@ -68,32 +48,23 @@ test.describe('KbqTagModule', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eTagInputStates'); const getTagInput = (page: Page): Locator => page.getByTestId('e2eTagInput'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTagInputStates'); await getTagInput(page).focus(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.goto('/E2eTagInputStates'); + await expect(getComponent(page)).toHaveScreenshot('04-light.png'); await e2eEnableDarkTheme(page); - await getTagInput(page).focus(); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('04-dark.png'); }); }); test.describe('E2eTagListStates', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eTagListStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eTagListStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTagListStates'); + await expect(getComponent(page)).toHaveScreenshot('05-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('05-dark.png'); }); }); }); diff --git a/packages/components/textarea/__screenshots__/KbqTextareaModule-E2eTextareaStates-dark-theme-1.png b/packages/components/textarea/__screenshots__/01-dark.png similarity index 100% rename from packages/components/textarea/__screenshots__/KbqTextareaModule-E2eTextareaStates-dark-theme-1.png rename to packages/components/textarea/__screenshots__/01-dark.png diff --git a/packages/components/textarea/__screenshots__/KbqTextareaModule-E2eTextareaStates-light-theme-1.png b/packages/components/textarea/__screenshots__/01-light.png similarity index 100% rename from packages/components/textarea/__screenshots__/KbqTextareaModule-E2eTextareaStates-light-theme-1.png rename to packages/components/textarea/__screenshots__/01-light.png diff --git a/packages/components/textarea/e2e.playwright-spec.ts b/packages/components/textarea/e2e.playwright-spec.ts index 97bcecbba1..377cace5ee 100644 --- a/packages/components/textarea/e2e.playwright-spec.ts +++ b/packages/components/textarea/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqTextareaModule', () => { test.describe('E2eTextareaStates', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eTextareaStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eTextareaStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTextareaStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/timepicker/__screenshots__/KbqTimepickerModule-E2eTimepickerStates-dark-theme-1.png b/packages/components/timepicker/__screenshots__/01-dark.png similarity index 100% rename from packages/components/timepicker/__screenshots__/KbqTimepickerModule-E2eTimepickerStates-dark-theme-1.png rename to packages/components/timepicker/__screenshots__/01-dark.png diff --git a/packages/components/timepicker/__screenshots__/KbqTimepickerModule-E2eTimepickerStates-light-theme-1.png b/packages/components/timepicker/__screenshots__/01-light.png similarity index 100% rename from packages/components/timepicker/__screenshots__/KbqTimepickerModule-E2eTimepickerStates-light-theme-1.png rename to packages/components/timepicker/__screenshots__/01-light.png diff --git a/packages/components/timepicker/e2e.playwright-spec.ts b/packages/components/timepicker/e2e.playwright-spec.ts index cd56b2629d..f78e94f10e 100644 --- a/packages/components/timepicker/e2e.playwright-spec.ts +++ b/packages/components/timepicker/e2e.playwright-spec.ts @@ -5,15 +5,11 @@ test.describe('KbqTimepickerModule', () => { test.describe('E2eTimepickerStates', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eTimepickerStates'); - test('light theme', async ({ page }) => { - await page.goto('/E2eTimepickerStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTimepickerStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/timezone/__screenshots__/KbqTimezoneModule-E2eTimezoneStates-dark-theme-1.png b/packages/components/timezone/__screenshots__/01-dark.png similarity index 100% rename from packages/components/timezone/__screenshots__/KbqTimezoneModule-E2eTimezoneStates-dark-theme-1.png rename to packages/components/timezone/__screenshots__/01-dark.png diff --git a/packages/components/timezone/__screenshots__/KbqTimezoneModule-E2eTimezoneStates-light-theme-1.png b/packages/components/timezone/__screenshots__/01-light.png similarity index 100% rename from packages/components/timezone/__screenshots__/KbqTimezoneModule-E2eTimezoneStates-light-theme-1.png rename to packages/components/timezone/__screenshots__/01-light.png diff --git a/packages/components/timezone/__screenshots__/KbqTimezoneModule-E2eTimezoneStates-opened-by-Enter-1.png b/packages/components/timezone/__screenshots__/02-light.png similarity index 100% rename from packages/components/timezone/__screenshots__/KbqTimezoneModule-E2eTimezoneStates-opened-by-Enter-1.png rename to packages/components/timezone/__screenshots__/02-light.png diff --git a/packages/components/timezone/e2e.playwright-spec.ts b/packages/components/timezone/e2e.playwright-spec.ts index c108bdff84..3c895dd156 100644 --- a/packages/components/timezone/e2e.playwright-spec.ts +++ b/packages/components/timezone/e2e.playwright-spec.ts @@ -7,28 +7,19 @@ test.describe('KbqTimezoneModule', () => { const getTimezoneSelect = (locator: Locator) => locator.getByTestId('e2eTimezoneSelect'); const getTimezoneSelectWithSearch = (locator: Locator) => locator.getByTestId('e2eTimezoneSelectWithSearch'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTimezoneStates'); const screenshotTarget = getComponent(page); const timezone = getTimezoneSelect(screenshotTarget); await timezone.click(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('dark theme', async ({ page }) => { - await page.goto('/E2eTimezoneStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const timezone = getTimezoneSelect(screenshotTarget); - - await timezone.click(); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); - test('opened by Enter', async ({ page }) => { + test('with search', async ({ page }) => { await page.goto('/E2eTimezoneStates'); const screenshotTarget = getComponent(page); const timezone = getTimezoneSelectWithSearch(screenshotTarget); @@ -36,7 +27,7 @@ test.describe('KbqTimezoneModule', () => { await timezone.focus(); await page.keyboard.press('Enter'); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('02-light.png'); }); }); }); diff --git a/packages/components/toast/__screenshots__/KbqToastModule-E2eToastStates-toast-dark-theme-1.png b/packages/components/toast/__screenshots__/01-dark.png similarity index 100% rename from packages/components/toast/__screenshots__/KbqToastModule-E2eToastStates-toast-dark-theme-1.png rename to packages/components/toast/__screenshots__/01-dark.png diff --git a/packages/components/toast/__screenshots__/KbqToastModule-E2eToastStates-toast-default-1.png b/packages/components/toast/__screenshots__/01-light.png similarity index 100% rename from packages/components/toast/__screenshots__/KbqToastModule-E2eToastStates-toast-default-1.png rename to packages/components/toast/__screenshots__/01-light.png diff --git a/packages/components/toast/e2e.playwright-spec.ts b/packages/components/toast/e2e.playwright-spec.ts index 92d48be99d..cc6f3511f1 100644 --- a/packages/components/toast/e2e.playwright-spec.ts +++ b/packages/components/toast/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqToastModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eToastStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('toast default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eToastStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); - }); - - test('toast (dark theme)', async ({ page }) => { - await page.goto('/E2eToastStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot(); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/toggle/__screenshots__/01-dark.png b/packages/components/toggle/__screenshots__/01-dark.png new file mode 100644 index 0000000000..08ac56d88f Binary files /dev/null and b/packages/components/toggle/__screenshots__/01-dark.png differ diff --git a/packages/components/toggle/__screenshots__/01-light.png b/packages/components/toggle/__screenshots__/01-light.png new file mode 100644 index 0000000000..f3d7bba078 Binary files /dev/null and b/packages/components/toggle/__screenshots__/01-light.png differ diff --git a/packages/components/toggle/__screenshots__/02-light.png b/packages/components/toggle/__screenshots__/02-light.png new file mode 100644 index 0000000000..0cc8858175 Binary files /dev/null and b/packages/components/toggle/__screenshots__/02-light.png differ diff --git a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleWithTextAndCaption-default-dark-theme-1.png b/packages/components/toggle/__screenshots__/03-dark.png similarity index 100% rename from packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleWithTextAndCaption-default-dark-theme-1.png rename to packages/components/toggle/__screenshots__/03-dark.png diff --git a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleWithTextAndCaption-default-1.png b/packages/components/toggle/__screenshots__/03-light.png similarity index 100% rename from packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleWithTextAndCaption-default-1.png rename to packages/components/toggle/__screenshots__/03-light.png diff --git a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleWithTextAndCaption-big-1.png b/packages/components/toggle/__screenshots__/04-light.png similarity index 100% rename from packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleWithTextAndCaption-big-1.png rename to packages/components/toggle/__screenshots__/04-light.png diff --git a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-default-1.png b/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-default-1.png deleted file mode 100644 index 9b599443c9..0000000000 Binary files a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-default-1.png and /dev/null differ diff --git a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-default-dark-theme-1.png b/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-default-dark-theme-1.png deleted file mode 100644 index 956fba31ab..0000000000 Binary files a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-default-dark-theme-1.png and /dev/null differ diff --git a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-indeterminate-1.png b/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-indeterminate-1.png deleted file mode 100644 index 3e0ea9938e..0000000000 Binary files a/packages/components/toggle/__screenshots__/KbqToggleModule-E2eToggleStateAndStyle-indeterminate-1.png and /dev/null differ diff --git a/packages/components/toggle/e2e.playwright-spec.ts b/packages/components/toggle/e2e.playwright-spec.ts index 1112dc6090..6c2c45f3e5 100644 --- a/packages/components/toggle/e2e.playwright-spec.ts +++ b/packages/components/toggle/e2e.playwright-spec.ts @@ -10,15 +10,12 @@ test.describe('KbqToggleModule', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eToggleStateAndStyle'); const getFirstToggle = (locator: Locator): Locator => locator.locator('kbq-toggle').first(); - test('default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eToggleStateAndStyle'); - await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); - }); - test('default (dark theme)', async ({ page }) => { - await page.goto('/E2eToggleStateAndStyle'); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot('01-dark.png'); }); test('should have correct size', async ({ page }) => { @@ -42,22 +39,19 @@ test.describe('KbqToggleModule', () => { const component = getComponent(page); await getIndeterminateToggle(component).click(); - await expect(getScreenshotTarget(component)).toHaveScreenshot(); + await expect(getScreenshotTarget(component)).toHaveScreenshot('02-light.png'); }); }); test.describe('E2eToggleWithTextAndCaption', () => { const getComponent = (page: Page): Locator => page.getByTestId('e2eToggleWithTextAndCaption'); - test('default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eToggleWithTextAndCaption'); - await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); - }); - test('default (dark theme)', async ({ page }) => { - await page.goto('/E2eToggleWithTextAndCaption'); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot('03-dark.png'); }); test('big', async ({ page }) => { @@ -66,7 +60,7 @@ test.describe('KbqToggleModule', () => { const component = getComponent(page); await getBigToggle(component).click(); - await expect(getScreenshotTarget(component)).toHaveScreenshot(); + await expect(getScreenshotTarget(component)).toHaveScreenshot('04-light.png'); }); }); }); diff --git a/packages/components/tooltip/__screenshots__/KbqTooltipModule-E2eTooltipStates-tooltip-dark-theme-1.png b/packages/components/tooltip/__screenshots__/01-dark.png similarity index 100% rename from packages/components/tooltip/__screenshots__/KbqTooltipModule-E2eTooltipStates-tooltip-dark-theme-1.png rename to packages/components/tooltip/__screenshots__/01-dark.png diff --git a/packages/components/tooltip/__screenshots__/KbqTooltipModule-E2eTooltipStates-tooltip-default-1.png b/packages/components/tooltip/__screenshots__/01-light.png similarity index 100% rename from packages/components/tooltip/__screenshots__/KbqTooltipModule-E2eTooltipStates-tooltip-default-1.png rename to packages/components/tooltip/__screenshots__/01-light.png diff --git a/packages/components/tooltip/e2e.playwright-spec.ts b/packages/components/tooltip/e2e.playwright-spec.ts index d09303bfc9..699df7f060 100644 --- a/packages/components/tooltip/e2e.playwright-spec.ts +++ b/packages/components/tooltip/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqTooltipModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eTooltipStates'); const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget'); - test('tooltip default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTooltipStates'); const locator = getComponent(page); - await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 }); - }); - - test('tooltip (dark theme)', async ({ page }) => { - await page.goto('/E2eTooltipStates'); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-light.png', { threshold: 0.05 }); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 }); + await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png', { threshold: 0.05 }); }); }); }); diff --git a/packages/components/top-bar/__screenshots__/KbqTopBarModule-E2eTopBarStates-dark-theme-1.png b/packages/components/top-bar/__screenshots__/01-dark.png similarity index 100% rename from packages/components/top-bar/__screenshots__/KbqTopBarModule-E2eTopBarStates-dark-theme-1.png rename to packages/components/top-bar/__screenshots__/01-dark.png diff --git a/packages/components/top-bar/__screenshots__/KbqTopBarModule-E2eTopBarStates-light-theme-1.png b/packages/components/top-bar/__screenshots__/01-light.png similarity index 100% rename from packages/components/top-bar/__screenshots__/KbqTopBarModule-E2eTopBarStates-light-theme-1.png rename to packages/components/top-bar/__screenshots__/01-light.png diff --git a/packages/components/top-bar/e2e.playwright-spec.ts b/packages/components/top-bar/e2e.playwright-spec.ts index 34e63f3860..26379a5e36 100644 --- a/packages/components/top-bar/e2e.playwright-spec.ts +++ b/packages/components/top-bar/e2e.playwright-spec.ts @@ -5,15 +5,12 @@ test.describe('KbqTopBarModule', () => { test.describe('E2eTopBarStates', () => { const getComponent = (page: Page) => page.getByTestId('e2eTopBarStates'); - test('light theme', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTopBarStates'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - test('dark theme', async ({ page }) => { - await page.goto('/E2eTopBarStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eTreeSelectStates-select-dark-theme-1.png b/packages/components/tree-select/__screenshots__/01-dark.png similarity index 100% rename from packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eTreeSelectStates-select-dark-theme-1.png rename to packages/components/tree-select/__screenshots__/01-dark.png diff --git a/packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eTreeSelectStates-select-default-1.png b/packages/components/tree-select/__screenshots__/01-light.png similarity index 100% rename from packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eTreeSelectStates-select-default-1.png rename to packages/components/tree-select/__screenshots__/01-light.png diff --git a/packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultiTreeSelectStates-MultiTreeSelect-dark-theme-1.png b/packages/components/tree-select/__screenshots__/02-dark.png similarity index 100% rename from packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultiTreeSelectStates-MultiTreeSelect-dark-theme-1.png rename to packages/components/tree-select/__screenshots__/02-dark.png diff --git a/packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultiTreeSelectStates-MultiTreeSelect-default-1.png b/packages/components/tree-select/__screenshots__/02-light.png similarity index 100% rename from packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultiTreeSelectStates-MultiTreeSelect-default-1.png rename to packages/components/tree-select/__screenshots__/02-light.png diff --git a/packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultilineTreeSelectStates-MultilineTreeSelect-dark-theme-1.png b/packages/components/tree-select/__screenshots__/03-dark.png similarity index 100% rename from packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultilineTreeSelectStates-MultilineTreeSelect-dark-theme-1.png rename to packages/components/tree-select/__screenshots__/03-dark.png diff --git a/packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultilineTreeSelectStates-MultilineTreeSelect-default-1.png b/packages/components/tree-select/__screenshots__/03-light.png similarity index 100% rename from packages/components/tree-select/__screenshots__/KbqTreeSelectModule-E2eMultilineTreeSelectStates-MultilineTreeSelect-default-1.png rename to packages/components/tree-select/__screenshots__/03-light.png diff --git a/packages/components/tree-select/e2e.playwright-spec.ts b/packages/components/tree-select/e2e.playwright-spec.ts index 11be2d4f98..4b40b7e8d9 100644 --- a/packages/components/tree-select/e2e.playwright-spec.ts +++ b/packages/components/tree-select/e2e.playwright-spec.ts @@ -6,25 +6,16 @@ test.describe('KbqTreeSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eTreeSelectStates'); const getTreeSelect = (locator: Locator) => locator.getByTestId('e2eTreeSelect'); - test('select default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eTreeSelectStates'); const screenshotTarget = getComponent(page); const select = getTreeSelect(screenshotTarget); await select.click(); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('select (dark theme)', async ({ page }) => { - await page.goto('/E2eTreeSelectStates'); + await expect(getComponent(page)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getTreeSelect(screenshotTarget); - - await select.click(); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('01-dark.png'); }); }); @@ -32,7 +23,7 @@ test.describe('KbqTreeSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eMultiTreeSelectStates'); const getTreeSelect = (locator: Locator) => locator.getByTestId('e2eMultiTreeSelect'); - test('MultiTreeSelect default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eMultiTreeSelectStates'); const screenshotTarget = getComponent(page); const select = getTreeSelect(screenshotTarget); @@ -40,19 +31,9 @@ test.describe('KbqTreeSelectModule', () => { await select.focus(); await page.keyboard.press('Enter'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('MultiTreeSelect (dark theme)', async ({ page }) => { - await page.goto('/E2eMultiTreeSelectStates'); + await expect(getComponent(page)).toHaveScreenshot('02-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getTreeSelect(screenshotTarget); - - await select.focus(); - await page.keyboard.press('Enter'); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('02-dark.png'); }); }); @@ -60,7 +41,7 @@ test.describe('KbqTreeSelectModule', () => { const getComponent = (page: Page) => page.getByTestId('e2eMultilineTreeSelectStates'); const getTreeSelect = (locator: Locator) => locator.getByTestId('e2eMultilineTreeSelect'); - test('MultilineTreeSelect default', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eMultilineTreeSelectStates'); const screenshotTarget = getComponent(page); const select = getTreeSelect(screenshotTarget); @@ -68,19 +49,9 @@ test.describe('KbqTreeSelectModule', () => { await select.focus(); await page.keyboard.press('Enter'); - await expect(getComponent(page)).toHaveScreenshot(); - }); - - test('MultilineTreeSelect (dark theme)', async ({ page }) => { - await page.goto('/E2eMultilineTreeSelectStates'); + await expect(getComponent(page)).toHaveScreenshot('03-light.png'); await e2eEnableDarkTheme(page); - const screenshotTarget = getComponent(page); - const select = getTreeSelect(screenshotTarget); - - await select.focus(); - await page.keyboard.press('Enter'); - - await expect(getComponent(page)).toHaveScreenshot(); + await expect(getComponent(page)).toHaveScreenshot('03-dark.png'); }); }); }); diff --git a/packages/components/username/__screenshots__/KbqUsername-E2eUsernameStateAndStyle-KbqUsername-states-dark-theme-1.png b/packages/components/username/__screenshots__/01-dark.png similarity index 100% rename from packages/components/username/__screenshots__/KbqUsername-E2eUsernameStateAndStyle-KbqUsername-states-dark-theme-1.png rename to packages/components/username/__screenshots__/01-dark.png diff --git a/packages/components/username/__screenshots__/KbqUsername-E2eUsernameStateAndStyle-KbqUsername-states-1.png b/packages/components/username/__screenshots__/01-light.png similarity index 100% rename from packages/components/username/__screenshots__/KbqUsername-E2eUsernameStateAndStyle-KbqUsername-states-1.png rename to packages/components/username/__screenshots__/01-light.png diff --git a/packages/components/username/e2e.playwright-spec.ts b/packages/components/username/e2e.playwright-spec.ts index 9d2d39e436..35f46eade4 100644 --- a/packages/components/username/e2e.playwright-spec.ts +++ b/packages/components/username/e2e.playwright-spec.ts @@ -6,20 +6,13 @@ test.describe('KbqUsername', () => { const getComponent = (page: Page) => page.getByTestId('e2eUsernameStateAndStyle'); const screenshotTarget = (locator: Locator) => locator.getByTestId('e2eUsernameTable'); - test('KbqUsername states', async ({ page }) => { + test('states', async ({ page }) => { await page.goto('/E2eUsernameStateAndStyle'); const locator = getComponent(page); - await expect(screenshotTarget(locator)).toHaveScreenshot(); - }); - - test(`KbqUsername states (dark theme)`, async ({ page }) => { - await page.goto('/E2eUsernameStateAndStyle'); + await expect(screenshotTarget(locator)).toHaveScreenshot('01-light.png'); await e2eEnableDarkTheme(page); - - const locator = getComponent(page); - - await expect(screenshotTarget(locator)).toHaveScreenshot(); + await expect(screenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); }); diff --git a/packages/e2e/utils/index.ts b/packages/e2e/utils/index.ts index 7b1f54ecf9..d7fdf3df82 100644 --- a/packages/e2e/utils/index.ts +++ b/packages/e2e/utils/index.ts @@ -1 +1,2 @@ export * from './theme'; +export * from './when-stable'; diff --git a/packages/e2e/utils/when-stable.ts b/packages/e2e/utils/when-stable.ts new file mode 100644 index 0000000000..2293ec8976 --- /dev/null +++ b/packages/e2e/utils/when-stable.ts @@ -0,0 +1,17 @@ +import { Locator } from '@playwright/test'; + +export async function e2eWhenStable(locator: Locator): Promise { + try { + const handle = await locator.elementHandle(); + + if (!handle) return; + + // https://playwright.dev/docs/actionability#stable + await handle.waitForElementState('stable'); + + // https://playwright.dev/docs/actionability#visible + await handle.waitForElementState('visible'); + } catch { + return; + } +}