chore(toggle): added screenshot tests (#DS-4293)

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

@@ -0,0 +1,72 @@
+import { expect, Locator, Page, test } from '@playwright/test';
+import { devEnableDarkTheme, devGoToRootPage } from '../utils';
+
+test.describe('KbqToggleModule', () => {
+    const getScreenshotTarget = (locator: Locator): Locator => locator.getByTestId('e2eScreenshotTarget');
+    const getIndeterminateToggle = (locator: Locator): Locator => locator.getByTestId('e2eIndeterminateToggle');
+    const getBigToggle = (locator: Locator): Locator => locator.getByTestId('e2eBigToggle');
+
+    test.describe('DevToggleStateAndStyle', () => {
+        const getComponent = (page: Page): Locator => page.getByTestId('e2eToggleStateAndStyle');
+        const getFirstToggle = (locator: Locator): Locator => locator.locator('kbq-toggle').first();
+
+        test('default', async ({ page }) => {
+            await devGoToRootPage(page);
+            await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot();
+        });
+
+        test('default (dark theme)', async ({ page }) => {
+            await devGoToRootPage(page);
+            await devEnableDarkTheme(page);
+            await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot();
+        });
+
+        test('should have correct size', async ({ page }) => {
+            await devGoToRootPage(page);
+
+            const component = getComponent(page);
+            const { width, height } = (await getFirstToggle(component).boundingBox()) ?? {};
+
+            expect(width).toBe(28);
+            expect(height).toBe(16);
+
+            await getBigToggle(component).click();
+
+            expect(width).toBe(28);
+            expect(height).toBe(16);
+        });
+
+        test('indeterminate', async ({ page }) => {
+            await devGoToRootPage(page);
+
+            const component = getComponent(page);
+
+            await getIndeterminateToggle(component).click();
+            await expect(getScreenshotTarget(component)).toHaveScreenshot();
+        });
+    });
+
+    test.describe('DevToggleWithTextAndCaption', () => {
+        const getComponent = (page: Page): Locator => page.getByTestId('e2eToggleWithTextAndCaption');
+
+        test('default', async ({ page }) => {
+            await devGoToRootPage(page);
+            await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot();
+        });
+
+        test('default (dark theme)', async ({ page }) => {
+            await devGoToRootPage(page);
+            await devEnableDarkTheme(page);
+            await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot();
+        });
+
+        test('big', async ({ page }) => {
+            await devGoToRootPage(page);
+
+            const component = getComponent(page);
+
+            await getBigToggle(component).click();
+            await expect(getScreenshotTarget(component)).toHaveScreenshot();
+        });
+    });
+});

packages/components-dev/e2e/components/toggle.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KbqComponentColors } from '@koobiq/components/core';
+import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqToggleModule } from '@koobiq/components/toggle';
+
+@Component({
+    standalone: true,
+    imports: [KbqToggleModule, FormsModule],
+    selector: 'dev-toggle-state-and-style',
+    host: {
+        'data-testid': 'e2eToggleStateAndStyle'
+    },
+    template: `
+        <input type="checkbox" data-testid="e2eIndeterminateToggle" [(ngModel)]="indeterminate" />
+        <input type="checkbox" data-testid="e2eBigToggle" [(ngModel)]="big" />
+
+        <table data-testid="e2eScreenshotTarget">
+            <tbody>
+                @for (color of colors; track color) {
+                    <tr>
+                        @for (state of states; track state) {
+                            <td>
+                                <div>
+                                    @for (type of types; track type) {
+                                        <kbq-toggle
+                                            [color]="color"
+                                            [disabled]="state === 'disabled'"
+                                            [indeterminate]="indeterminate()"
+                                            [class.kbq-hovered]="state === 'hovered'"
+                                            [class.cdk-keyboard-focused]="state === 'focused'"
+                                            [checked]="type === 'checked'"
+                                            [loading]="state === 'loading'"
+                                            [big]="big()"
+                                        />
+                                    }
+                                </div>
+                            </td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `,
+    styles: `
+        td {
+            padding: var(--kbq-size-xs);
+            width: 1px;
+        }
+
+        div {
+            display: flex;
+            flex-direction: column;
+            gap: var(--kbq-size-xxs);
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevToggleStateAndStyle {
+    readonly states = ['normal', 'hovered', 'focused', 'disabled', 'loading'] as const;
+    readonly colors = [KbqComponentColors.Theme, KbqComponentColors.Error];
+    readonly types = ['default', 'checked'] as const;
+
+    readonly indeterminate = model(false);
+    readonly big = model(false);
+}
+
+@Component({
+    standalone: true,
+    imports: [KbqToggleModule, KbqFormFieldModule, FormsModule],
+    selector: 'dev-toggle-with-text-and-caption',
+    host: {
+        'data-testid': 'e2eToggleWithTextAndCaption'
+    },
+    template: `
+        <input type="checkbox" data-testid="e2eBigToggle" [(ngModel)]="big" />
+
+        <table data-testid="e2eScreenshotTarget">
+            <tbody>
+                @for (state of states; track state) {
+                    <tr>
+                        @for (position of positions; track position) {
+                            <td>
+                                <div>
+                                    <kbq-toggle
+                                        [disabled]="state === 'disabled'"
+                                        [labelPosition]="position"
+                                        [big]="big()"
+                                    >
+                                        Text
+                                        <kbq-hint>Caption</kbq-hint>
+                                    </kbq-toggle>
+                                </div>
+                            </td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `,
+    styles: `
+        td {
+            padding: var(--kbq-size-xs);
+            width: 1px;
+        }
+
+        div {
+            display: flex;
+            flex-direction: column;
+            gap: var(--kbq-size-m);
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevToggleWithTextAndCaption {
+    readonly states = ['normal', 'disabled'] as const;
+    readonly positions = ['left', 'right'] as const;
+
+    readonly big = model(false);
+}

packages/components-dev/e2e/module.ts

@@ -4,6 +4,7 @@ import { DevActionsPanelWithOverlayContainer } from './components/actions-panel'
 import { DevButtonStateAndStyle } from './components/button';
 import { DevFileUploadStateAndStyle } from './components/file-upload';
 import { DevTagEditable, DevTagStateAndStyle } from './components/tag';
+import { DevToggleStateAndStyle, DevToggleWithTextAndCaption } from './components/toggle';
 
 @Component({
     standalone: true,
@@ -13,7 +14,9 @@ import { DevTagEditable, DevTagStateAndStyle } from './components/tag';
         DevFileUploadStateAndStyle,
         DevActionsPanelWithOverlayContainer,
         DevTagStateAndStyle,
-        DevTagEditable
+        DevTagEditable,
+        DevToggleStateAndStyle,
+        DevToggleWithTextAndCaption
     ],
     selector: 'dev-app',
     templateUrl: 'template.html',

packages/components-dev/e2e/template.html

@@ -18,4 +18,13 @@
 
 <hr />
 
+<dev-toggle-state-and-style />
+
+<hr />
+
+<dev-toggle-with-text-and-caption />
+
+<hr />
+
+<!-- Should be last for correct screenshot test -->
 <dev-actions-panel-with-overlay-container />

packages/components/toggle/_toggle-theme.scss

@@ -16,18 +16,17 @@
 @mixin _kbq-toggle-color($type) {
     @include _kbq-toggle-state($type, default);
 
-    &:hover {
+    &:is(:hover, .kbq-hovered) {
         @include _kbq-toggle-state($type, states-hover);
     }
 
     &.kbq-active,
     &.kbq-indeterminate {
         @include _kbq-toggle-state($type, states-checked);
-    }
 
-    &.kbq-active:hover,
-    &.kbq-indeterminate:hover {
-        @include _kbq-toggle-state($type, states-checked-hover);
+        &:is(:hover, .kbq-hovered) {
+            @include _kbq-toggle-state($type, states-checked-hover);
+        }
     }
 
     &.cdk-keyboard-focused {

packages/components/toggle/toggle-tokens.scss

@@ -5,7 +5,6 @@
     --kbq-toggle-size-big-height: var(--kbq-size-l);
     --kbq-toggle-size-big-width: 28px;
     --kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);
-    --kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-toggle-theme-default-border: var(--kbq-line-contrast-less);
     --kbq-toggle-theme-default-background: var(--kbq-background-bg);