chore(e2e): each test on separate page (#DS-4590)

.stylelintrc.js

@@ -58,6 +58,20 @@ const componentsDevRules = [
     }
 ];
 
+/**
+ * Override rules for packages/e2e
+ *
+ * @type {import('stylelint').Config['overrides']}
+ */
+const e2eRules = [
+    {
+        files: ['packages/e2e/**/*.scss', 'packages/e2e/**/*.css'],
+        rules: {
+            'selector-class-pattern': makeSelectorClassPatternOptions(['e2e-'])
+        }
+    }
+];
+
 /**
  * Override rules for packages/docs-examples
  *
@@ -138,7 +152,8 @@ const config = {
         ...componentsRules,
         ...componentsDevRules,
         ...componentsExamplesRules,
-        ...docsRules
+        ...docsRules,
+        ...e2eRules
     ]
 };
 

angular.json

@@ -1000,13 +1000,36 @@
                         "optimization": false,
                         "namedChunks": true,
                         "browser": "packages/e2e/main.ts"
-                    }
+                    },
+                    "configurations": {
+                        "production": {
+                            "outputHashing": "all",
+                            "fileReplacements": [
+                                {
+                                    "replace": "packages/e2e/environments/environment.ts",
+                                    "with": "packages/e2e/environments/environment.prod.ts"
+                                }
+                            ]
+                        },
+                        "development": {
+                            "optimization": false,
+                            "extractLicenses": false,
+                            "sourceMap": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
                 },
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
-                    "options": {
-                        "buildTarget": "dev-e2e:build"
-                    }
+                    "configurations": {
+                        "production": {
+                            "buildTarget": "dev-e2e:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "dev-e2e:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
                 }
             }
         },

packages/components/accordion/e2e.playwright-spec.ts

@@ -1,20 +1,20 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqAccordionModule', () => {
     test.describe('E2eAccordionStates', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eAccordionStates');
         const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget');
 
         test('accordion default', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAccordionStates');
             const locator = getComponent(page);
 
             await expect(getScreenshotTarget(locator)).toHaveScreenshot();
         });
 
         test('accordion (dark theme)', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAccordionStates');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);

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

@@ -1,8 +1,8 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqActionsPanel', () => {
-    test.describe('DevActionsPanelWithOverlayContainer', () => {
+    test.describe('E2eActionsPanelWithOverlayContainer', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eActionsPanelWithOverlayContainer');
         const getOpenButton = (locator: Locator) => locator.getByTestId('e2eActionsPanelOpenButton');
         const getOverlayContainer = (locator: Locator) => locator.getByTestId('e2eActionsPanelOverlayContainer');
@@ -11,7 +11,7 @@ test.describe('KbqActionsPanel', () => {
             page.getByTestId('e2eActionsPanelOverflowItemsResultButton');
 
         test('should display the actions panel inside custom overlay container', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eActionsPanelWithOverlayContainer');
             const locator = getComponent(page);
 
             await getOpenButton(locator).click();
@@ -22,7 +22,7 @@ test.describe('KbqActionsPanel', () => {
         test('should update the actions panel container position/size when overlay container is resized', async ({
             page
         }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eActionsPanelWithOverlayContainer');
             const locator = getComponent(page);
 
             await getOpenButton(locator).click();
@@ -32,7 +32,8 @@ test.describe('KbqActionsPanel', () => {
         });
 
         test('should show hidden actions when button is clicked', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.setViewportSize({ width: 800, height: 200 });
+            await page.goto('/E2eActionsPanelWithOverlayContainer');
             const locator = getComponent(page);
 
             await e2eEnableDarkTheme(page);

packages/components/alert/e2e.playwright-spec.ts

@@ -1,13 +1,13 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqAlertModule', () => {
     test.describe('E2eAlertStateAndStyle', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eAlertStateAndStyle');
         const getTestTable = (locator: Locator) => locator.getByTestId('e2eAlertTable');
 
         test('KbqAlert states', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAlertStateAndStyle');
             const locator = getComponent(page);
 
             const screenshotTarget = getTestTable(locator);
@@ -16,7 +16,7 @@ test.describe('KbqAlertModule', () => {
         });
 
         test(`KbqAlert states (dark theme)`, async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAlertStateAndStyle');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);

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

@@ -1,21 +1,21 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqAppSwitcherModule', () => {
-    test.describe('E2AppSwitcherStates', () => {
+    test.describe('E2eAppSwitcherStates', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eAppSwitcherStates');
         const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget');
 
         test('AppSwitcher default', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAppSwitcherStates');
 
             const locator = getComponent(page);
 
             await expect(getScreenshotTarget(locator)).toHaveScreenshot();
         });
 
         test('AppSwitcher (dark theme)', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAppSwitcherStates');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);
@@ -24,20 +24,20 @@ test.describe('KbqAppSwitcherModule', () => {
         });
     });
 
-    test.describe('E2AppSwitcherWithSitesStates', () => {
+    test.describe('E2eAppSwitcherWithSitesStates', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eAppSwitcherWithSitesStates');
         const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget');
 
         test('AppSwitcher default', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAppSwitcherWithSitesStates');
 
             const locator = getComponent(page);
 
             await expect(getScreenshotTarget(locator)).toHaveScreenshot();
         });
 
         test('AppSwitcher (dark theme)', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eAppSwitcherWithSitesStates');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);

packages/components/autocomplete/e2e.playwright-spec.ts

@@ -1,20 +1,20 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqAutocompleteModule', () => {
     test.describe('E2eAutocompleteStates', () => {
         const getComponent = (page: Page): Locator => page.getByTestId('e2eAutocompleteStates');
         const getAutocompleteInput = (page: Page): Locator => page.getByTestId('e2eAutocompleteInput');
 
         test('light theme', async ({ page }) => {
-            await e2eGoToRootPage(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 e2eGoToRootPage(page);
+            await page.goto('/E2eAutocompleteStates');
             await e2eEnableDarkTheme(page);
             await getAutocompleteInput(page).focus();
             await page.keyboard.press('ArrowDown');

packages/components/badge/e2e.playwright-spec.ts

@@ -1,17 +1,17 @@
 import { expect, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from 'packages/e2e/utils';
+import { e2eEnableDarkTheme } from 'packages/e2e/utils';
 
 test.describe('KbqBadgeModule', () => {
     test.describe('E2eBadgeStyles', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eBadgeStyles');
 
         test('light theme', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eBadgeStyles');
             await expect(getComponent(page)).toHaveScreenshot();
         });
 
         test('dark theme', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eBadgeStyles');
             await e2eEnableDarkTheme(page);
             await expect(getComponent(page)).toHaveScreenshot();
         });

packages/components/breadcrumbs/e2e.playwright-spec.ts

@@ -1,5 +1,5 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqBreadcrumbsModule', () => {
     test.describe('E2eBreadcrumbsStateAndStyle', () => {
@@ -9,7 +9,7 @@ test.describe('KbqBreadcrumbsModule', () => {
         const hoverLastItem = (locator: Locator) => locator.locator('.kbq-breadcrumb-item').last().hover();
 
         test('KbqBreadcrumbs states', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eBreadcrumbsStateAndStyle');
             const locator = getComponent(page);
 
             const screenshotTarget = getTestTable(locator);
@@ -18,7 +18,7 @@ test.describe('KbqBreadcrumbsModule', () => {
         });
 
         test(`KbqBreadcrumbs states (dark theme)`, async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eBreadcrumbsStateAndStyle');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);
@@ -29,7 +29,7 @@ test.describe('KbqBreadcrumbsModule', () => {
         });
 
         test('KbqBreadcrumbs Dropdown Hover', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eBreadcrumbsStateAndStyle');
             const locator = getComponent(page);
 
             const screenshotTarget = getTestRow(locator);

packages/components/button-toggle/e2e.playwright-spec.ts

@@ -1,5 +1,5 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqButtonToggleModule', () => {
     test.describe('E2eButtonToggleStates', () => {
@@ -10,14 +10,14 @@ test.describe('KbqButtonToggleModule', () => {
         const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget');
 
         test('button-toggle with title', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonToggleStates');
             const locator = getComponent(page);
 
             await expect(getScreenshotTarget(locator)).toHaveScreenshot();
         });
 
         test('button-toggle with icon', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonToggleStates');
             const locator = getComponent(page);
 
             await togglePrefix(locator);
@@ -27,7 +27,7 @@ test.describe('KbqButtonToggleModule', () => {
         });
 
         test('button-toggle with title, prefix and suffix', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonToggleStates');
             const locator = getComponent(page);
 
             await togglePrefix(locator);
@@ -37,7 +37,7 @@ test.describe('KbqButtonToggleModule', () => {
         });
 
         test('button-toggle with title, prefix and suffix (dark theme)', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonToggleStates');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);

packages/components/button-toggle/e2e.ts

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { KbqButtonModule } from '@koobiq/components/button';
+import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 import { KbqCheckboxModule } from '@koobiq/components/checkbox';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { combineLatest } from 'rxjs';
-import { KbqButtonToggle, KbqButtonToggleGroup } from './button-toggle.component';
 
 type E2eButtonState = Partial<{
     title: string;
@@ -26,7 +26,7 @@ type DevButton = E2eButtonState & E2eButtonOrientation;
 
 @Component({
     selector: 'e2e-button-toggle-states',
-    imports: [KbqIconModule, FormsModule, KbqCheckboxModule, KbqButtonToggle, KbqButtonToggleGroup, KbqButtonModule],
+    imports: [KbqIconModule, FormsModule, KbqCheckboxModule, KbqButtonToggleModule, KbqButtonModule],
     template: `
         <div class="dev-options">
             <kbq-checkbox data-testid="e2eShowPrefixIcon" [(ngModel)]="showPrefixIcon">show prefix icon</kbq-checkbox>

packages/components/button/e2e.playwright-spec.ts

@@ -1,5 +1,5 @@
 import { expect, Locator, Page, test } from '@playwright/test';
-import { e2eEnableDarkTheme, e2eGoToRootPage } from '../../e2e/utils';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
 
 test.describe('KbqButtonModule', () => {
     test.describe('E2eButtonStateAndStyle', () => {
@@ -10,14 +10,14 @@ test.describe('KbqButtonModule', () => {
         const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget');
 
         test('button with title', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonStateAndStyle');
             const locator = getComponent(page);
 
             await expect(getScreenshotTarget(locator)).toHaveScreenshot();
         });
 
         test('button with icon', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonStateAndStyle');
             const locator = getComponent(page);
 
             await togglePrefix(locator);
@@ -27,7 +27,7 @@ test.describe('KbqButtonModule', () => {
         });
 
         test('button with title, prefix and suffix', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonStateAndStyle');
             const locator = getComponent(page);
 
             await togglePrefix(locator);
@@ -37,7 +37,7 @@ test.describe('KbqButtonModule', () => {
         });
 
         test('button with title, prefix and suffix (dark theme)', async ({ page }) => {
-            await e2eGoToRootPage(page);
+            await page.goto('/E2eButtonStateAndStyle');
             await e2eEnableDarkTheme(page);
 
             const locator = getComponent(page);