test(button): added playwright screenshot tests (#DS-3763) (#795)

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

Author: artembelik

.github/workflows/e2e-update-screenshots.yml

@@ -0,0 +1,39 @@
+#
+# This workflow updates the E2E screenshots when a comment with `/e2e-update-screenshots` is added to a pull request.
+#
+name: E2E update screenshots
+
+on:
+  issue_comment:
+    types: [created, edited]
+
+permissions:
+  contents: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  update_screenshots:
+    if: ${{ github.event.issue.pull_request && contains(github.event.comment.body, '/e2e-update-screenshots') }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup yarn
+        uses: ./.github/workflows/actions/setup-yarn
+
+      - name: Setup test environment
+        run: yarn run e2e:setup
+
+      - name: Update screenshots
+        run: yarn run e2e:components --update-snapshots
+
+      - name: Commit and push screenshots
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: 'test: auto-updated e2e screenshots'
+          file_pattern: 'e2e/**/*.png'

.github/workflows/e2e.yml

@@ -0,0 +1,35 @@
+name: E2E tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup yarn
+        uses: ./.github/workflows/actions/setup-yarn
+
+      - name: Setup test environment
+        run: yarn run e2e:setup
+
+      - name: Run e2e tests
+        run: yarn run e2e:components
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 1

.gitignore

@@ -165,11 +165,20 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
+# yarn
 .pnp.*
+.yarn/*
+!.yarn/README.md
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 .gitconfig
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -5,6 +5,7 @@
         "stylelint.vscode-stylelint",
         "dbaeumer.vscode-eslint",
         "angular.ng-template",
-        "editorconfig.editorconfig"
+        "editorconfig.editorconfig",
+        "ms-playwright.playwright"
     ]
 }

.vscode/mcp.json

@@ -0,0 +1,10 @@
+{
+    "servers": {
+        "playwright": {
+            "command": "npx",
+            "args": [
+                "@playwright/mcp@latest"
+            ]
+        }
+    }
+}

angular.json

@@ -885,6 +885,36 @@
                 }
             }
         },
+        "dev-e2e": {
+            "projectType": "application",
+            "root": "packages/components-dev/e2e",
+            "sourceRoot": "packages/components-dev/e2e",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:application",
+                    "options": {
+                        "outputPath": {
+                            "base": "dist/components-dev/e2e"
+                        },
+                        "tsConfig": "packages/components-dev/e2e/tsconfig.app.json",
+                        "index": "packages/components-dev/index.html",
+                        "styles": ["packages/components-dev/main.scss"],
+                        "polyfills": ["zone.js"],
+                        "extractLicenses": false,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true,
+                        "browser": "packages/components-dev/e2e/main.ts"
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "buildTarget": "dev-e2e:build"
+                    }
+                }
+            }
+        },
         "dev-empty-state": {
             "projectType": "application",
             "root": "packages/components-dev/empty-state",

docs/guides/06-testing.md

@@ -2,14 +2,42 @@
 
 ## Unit tests
 
-Runs tests for package
+Unit tests check individual modules and components of the application in isolation. They are run using
+[jest](https://jestjs.io/) and [Karma](https://karma-runner.github.io/).
+
+### Setup
+
+```bash
+yarn install
+```
+
+### Available commands
 
 ```bash
+yarn run unit:cdk
 yarn run unit:components
+yarn run unit:components-experimental
+yarn run unit:angular-moment-adapter
+yarn run unit:angular-luxon-adapter
+yarn run unit:schematics
+yarn run unit:koobiq-docs
+yarn run unit:api-gen
+```
+
+## E2E tests
+
+E2E (end-to-end) tests check the application as a whole, simulating user interactions. They are run using
+[Playwright](https://playwright.dev/).
+
+### Setup
+
+```bash
+yarn install
+yarn run e2e:setup
 ```
 
-Runs specific spec file
+### Available commands
 
 ```bash
-yarn jest packages/components/alert/alert.component.spec.ts
+yarn run e2e:components
 ```

e2e/components/__screenshots__/KbqButtonModule-dev-button-state-and-style-button-with-icon-1.png

@@ -0,0 +1,43 @@
+import { expect, Locator, Page, test } from '@playwright/test';
+
+const component = {
+    stateAndStyle: 'dev-button-state-and-style'
+};
+
+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();
+        const getScreenshotTarget = (locator: Locator) => locator.locator('table');
+
+        test('button with title', async ({ page }) => {
+            await goToPage(page);
+            const locator = getComponent(page);
+
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+        });
+
+        test('button with icon', async ({ page }) => {
+            await goToPage(page);
+            const locator = getComponent(page);
+
+            await togglePrefix(locator);
+            await toggleTitle(locator);
+
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+        });
+
+        test('button with title, prefix and suffix', async ({ page }) => {
+            await goToPage(page);
+            const locator = getComponent(page);
+
+            await togglePrefix(locator);
+            await toggleSuffix(locator);
+
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+        });
+    });
+});

e2e/components/__screenshots__/KbqButtonModule-dev-button-state-and-style-button-with-title-1.png

@@ -70,6 +70,7 @@
         "@messageformat/core": "^3.0.1",
         "@microsoft/api-extractor": "7.40.2",
         "@octokit/rest": "^18.9.1",
+        "@playwright/test": "^1.52.0",
         "@prettier/plugin-xml": "^3.4.1",
         "@rollup/plugin-commonjs": "^24.0.0",
         "@rollup/plugin-json": "^6.0.0",
@@ -162,6 +163,7 @@
     "scripts": {
         "ng": "ng",
         "prepare": "husky",
+        "clean": "playwright clear-cache && rimraf .angular dist playwright-report test-results --verbose",
         "postinstall": "tsc -p tools/builders/tsconfig.json",
         "build:cdk": "ng build cdk",
         "build:angular-moment-adapter": "ng build angular-moment-adapter",
@@ -211,6 +213,7 @@
         "dev:divider": "ng serve dev-divider --port 3003",
         "dev:dl": "ng serve dev-dl --port 3003",
         "dev:dropdown": "ng serve dev-dropdown --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",
@@ -267,6 +270,9 @@
         "unit:schematics": "jest --roots packages/schematics",
         "unit:koobiq-docs": "ng test koobiq-docs",
         "unit:api-gen": "jest --roots tools/api-gen",
+        "-----E2E_TESTS-----": "--------------------------------------------------------------------------------------",
+        "e2e:setup": "playwright install chromium --with-deps",
+        "e2e:components": "playwright test e2e/components",
         "-----CI-----": "---------------------------------------------------------------------------------------------",
         "approve-api": "ts-node --project tools/api-extractor/tsconfig.json tools/api-extractor/api-extractor.ts",
         "check-api": "yarn run approve-api onlyCheck",