refactor: review, updated screenshot, added new tests

Author: artembelik

packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-1.png

@@ -2,9 +2,12 @@ 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 getScreenshotTarget = (locator: Locator): Locator => locator.getByTestId('e2eScreenshotTarget');
         const getFirstToggle = (locator: Locator): Locator => locator.locator('kbq-toggle').first();
 
         test('default', async ({ page }) => {
@@ -21,20 +24,49 @@ test.describe('KbqToggleModule', () => {
         test('should have correct size', async ({ page }) => {
             await devGoToRootPage(page);
 
-            const { width, height } = (await getFirstToggle(getComponent(page)).boundingBox()) ?? {};
+            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');
-        const getScreenshotTarget = (locator: Locator): Locator => locator.getByTestId('e2eScreenshotTarget');
 
         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/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-dark-theme-1.png

@@ -1,16 +1,20 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+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],
+    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) {
@@ -22,11 +26,12 @@ import { KbqToggleModule } from '@koobiq/components/toggle';
                                         <kbq-toggle
                                             [color]="color"
                                             [disabled]="state === 'disabled'"
-                                            [indeterminate]="state === 'indeterminate'"
+                                            [indeterminate]="indeterminate()"
                                             [class.kbq-hovered]="state === 'hovered'"
                                             [class.cdk-keyboard-focused]="state === 'focused'"
                                             [checked]="type === 'checked'"
                                             [loading]="state === 'loading'"
+                                            [big]="big()"
                                         />
                                     }
                                 </div>
@@ -52,19 +57,24 @@ import { KbqToggleModule } from '@koobiq/components/toggle';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DevToggleStateAndStyle {
-    readonly states = ['normal', 'hovered', 'focused', 'disabled', 'indeterminate', 'loading'] as const;
+    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],
+    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) {
@@ -75,7 +85,7 @@ export class DevToggleStateAndStyle {
                                     <kbq-toggle
                                         [disabled]="state === 'disabled'"
                                         [labelPosition]="position"
-                                        [big]="state === 'big'"
+                                        [big]="big()"
                                     >
                                         Text
                                         <kbq-hint>Caption</kbq-hint>
@@ -103,6 +113,8 @@ export class DevToggleStateAndStyle {
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DevToggleWithTextAndCaption {
-    readonly states = ['normal', 'disabled', 'big'] as const;
+    readonly states = ['normal', 'disabled'] as const;
     readonly positions = ['left', 'right'] as const;
+
+    readonly big = model(false);
 }