chore(e2e): single test for light & dark screenshots (#DS-4589)

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-----": "--------------------------------------------------------------------------------------------",

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');
         });
     });
 });

packages/components/actions-panel/e2e.playwright-spec.ts

@@ -1,47 +1,36 @@
 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');
         const getScreenshotTarget = (locator: Locator) => getOverlayContainer(locator);
         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');
         });
     });
 });

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');
         });
     });
 });

packages/components/app-switcher/e2e.playwright-spec.ts

@@ -6,43 +6,27 @@ 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');
         });
     });
 
     test.describe('E2eAppSwitcherWithSitesStates', () => {
         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');
         });
     });
 });

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');
         });
     });
 });

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');
         });
     });
 });

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');
         });
     });
 });