test(button): added dark theme screenshot (#803)

Co-authored-by: artembelik <24925224+artembelik@users.noreply.github.com>

Author: artembelik

e2e/components/__screenshots__/KbqButtonModule-DevButtonStateAndStyle-button-with-icon-1.png

@@ -1,16 +1,14 @@
 import { expect, Locator, Page, test } from '@playwright/test';
 
-const component = {
-    stateAndStyle: 'dev-button-state-and-style'
-};
+const getThemeToggle = (page: Page) => page.getByTestId('e2eThemeToggle');
 
 test.describe('KbqButtonModule', () => {
-    test.describe(component.stateAndStyle, () => {
-        const goToPage = (page: Page) => page.goto('');
-        const getComponent = (page: Page) => page.locator(component.stateAndStyle);
-        const togglePrefix = (locator: Locator) => locator.getByText('show prefix icon').click();
-        const toggleTitle = (locator: Locator) => locator.getByText('show title').click();
-        const toggleSuffix = (locator: Locator) => locator.getByText('show suffix icon').click();
+    test.describe('DevButtonStateAndStyle', () => {
+        const goToPage = (page: Page) => page.goto('/');
+        const getComponent = (page: Page) => page.getByTestId('e2eButtonStateAndStyle');
+        const togglePrefix = (locator: Locator) => locator.getByTestId('e2eShowPrefixIcon').click();
+        const toggleTitle = (locator: Locator) => locator.getByTestId('e2eShowTitle').click();
+        const toggleSuffix = (locator: Locator) => locator.getByTestId('e2eShowSuffixIcon').click();
         const getScreenshotTarget = (locator: Locator) => locator.locator('table');
 
         test('button with title', async ({ page }) => {
@@ -39,5 +37,17 @@ test.describe('KbqButtonModule', () => {
 
             await expect(getScreenshotTarget(locator)).toHaveScreenshot();
         });
+
+        test('button with title, prefix and suffix (dark theme)', async ({ page }) => {
+            await goToPage(page);
+            await getThemeToggle(page).click();
+
+            const locator = getComponent(page);
+
+            await togglePrefix(locator);
+            await toggleSuffix(locator);
+
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+        });
     });
 });

e2e/components/__screenshots__/KbqButtonModule-DevButtonStateAndStyle-button-with-title-1.png

@@ -40,13 +40,20 @@ type DevButton = DevButtonState & DevButtonStyle;
     standalone: true,
     imports: [KbqButtonModule, KbqIconModule, FormsModule, KbqCheckboxModule],
     selector: 'dev-button-state-and-style',
+    host: {
+        'data-testid': 'e2eButtonStateAndStyle'
+    },
     template: `
         <div class="dev-options">
-            <kbq-checkbox [(ngModel)]="showPrefixIcon">show prefix icon</kbq-checkbox>
-            <kbq-checkbox [(ngModel)]="showTitle" [disabled]="!showPrefixIcon() && !showSuffixIcon()">
+            <kbq-checkbox [(ngModel)]="showPrefixIcon" data-testid="e2eShowPrefixIcon">show prefix icon</kbq-checkbox>
+            <kbq-checkbox
+                [(ngModel)]="showTitle"
+                [disabled]="!showPrefixIcon() && !showSuffixIcon()"
+                data-testid="e2eShowTitle"
+            >
                 show title
             </kbq-checkbox>
-            <kbq-checkbox [(ngModel)]="showSuffixIcon">show suffix icon</kbq-checkbox>
+            <kbq-checkbox [(ngModel)]="showSuffixIcon" data-testid="e2eShowSuffixIcon">show suffix icon</kbq-checkbox>
         </div>
 
         <table>

e2e/components/__screenshots__/KbqButtonModule-DevButtonStateAndStyle-button-with-title-prefix-and-suffix-1.png

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DevButtonStateAndStyle } from 'packages/components-dev/button/module';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     standalone: true,
-    imports: [DevButtonStateAndStyle],
+    imports: [DevButtonStateAndStyle, DevThemeToggle],
     selector: 'dev-app',
     templateUrl: 'template.html',
     styleUrl: 'styles.scss',