Merge branch 'main' into main

.github/workflows/e2e.yml

@@ -2,6 +2,9 @@ name: ⚙️ E2E testing
 on:
   pull_request:
 
+env:
+  RETRY_COUNT: 2
+
 jobs:
   build-demo:
     if: ${{ !contains(github.head_ref , 'release/') }}
@@ -179,9 +182,7 @@ jobs:
       - name: Upload artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
         uses: actions/[email protected]
         with:
-          path: |
-            ./projects/demo-playwright/tests-results/**/*.diff.png
-            !./projects/demo-playwright/tests-results/**/*-retry*/*.diff.png
+          path: ./projects/demo-playwright/tests-results/**/*-retry${{ env.RETRY_COUNT }}/*.diff.png
           name: '${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}_${{ matrix.shard.project }}_${{ matrix.shard.index }}'
           if-no-files-found: ignore
           compression-level: 0
@@ -234,12 +235,12 @@ jobs:
       - name: Check if diff-output exists
         id: diff_checker
         run: |
-          echo "diff_exist=$(find ./total -regex '.*diff\.png$' | wc -l | sed -e 's/^[[:space:]]*//')" >> $GITHUB_OUTPUT
+          echo "diff_exist=$(find ./total -iname '*.diff.png' | wc -l | sed -e 's/^[[:space:]]*//')" >> $GITHUB_OUTPUT
 
       - name: Fall with an error if diff-output exists
         if: ${{ steps.diff_checker.outputs.diff_exist != '0' }}
         run: |
-          find ./total -regex '.*diff\.png$' -exec echo "{}" \;
+          find ./total -iname '*.diff.png' -exec echo "{}" \;
           exit 1
 
 concurrency:

package.json

@@ -155,9 +155,9 @@
         "@angular/forms": "16.2.12",
         "@angular/platform-browser": "16.2.12",
         "@angular/router": "16.2.12",
-        "@nx/angular": "20.1.0",
-        "@nx/jest": "20.1.0",
-        "@nx/workspace": "20.1.0",
+        "@nx/angular": "20.1.1",
+        "@nx/jest": "20.1.1",
+        "@nx/workspace": "20.1.1",
         "@schematics/angular": "16.2.16",
         "@taiga-ui/browserslist-config": "0.234.0",
         "@taiga-ui/commitlint-config": "0.234.0",
@@ -179,7 +179,7 @@
         "ng-morph": "4.8.4",
         "ng-packagr": "16.2.3",
         "ngx-highlightjs": "10.0.0",
-        "nx": "20.1.0",
+        "nx": "20.1.1",
         "rxjs": "7.8.1",
         "standard-version": "9.5.0",
         "ts-mockito": "2.6.1",

projects/demo-cypress/package.json

@@ -2,7 +2,7 @@
     "name": "@taiga-ui/demo-cypress",
     "private": true,
     "devDependencies": {
-        "@nx/cypress": "20.1.0",
+        "@nx/cypress": "20.1.1",
         "cypress": "13.15.2",
         "cypress-image-diff-js": "2.3.0"
     }

projects/demo-playwright/playwright.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
-    retries: process.env.CI ? 2 : 0,
+    retries: process.env.CI ? Number(process.env.RETRY_COUNT ?? 2) : 0,
     workers: process.env.CI ? '100%' : '50%',
     timeout: 5 * 60 * 1000,
     use: {
@@ -50,14 +50,10 @@ export default defineConfig({
             animations: 'disabled',
             caret: 'hide',
             scale: 'device',
-            threshold: 0.25,
-            maxDiffPixelRatio: 0.025,
-            maxDiffPixels: 25,
+            threshold: 0.02,
         },
         toMatchSnapshot: {
-            threshold: 0.25,
-            maxDiffPixelRatio: 0.025,
-            maxDiffPixels: 25,
+            threshold: 0.02,
         },
     },
 });

projects/demo-playwright/tests/core/hint/hint.pw.spec.ts

@@ -32,7 +32,8 @@ test.describe('TuiHint', () => {
 
         directions.forEach((direction, directionIndex) => {
             [256, 1280].forEach((width) => {
-                test(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
+                // TODO: need fix https://github.com/taiga-family/taiga-ui/issues/9764 before
+                test.skip(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
                     page,
                 }) => {
                     await page.setViewportSize({width, height: 300});

projects/demo-playwright/tests/deep/deep-select.pw.spec.ts

@@ -44,10 +44,10 @@ test.describe('Deep / Select', () => {
                     await api.focusOnBody();
                     await api.hideNotifications();
                     await api.waitStableState();
+                    await page.waitForTimeout(100);
 
                     await expect(api.apiPageExample).toHaveScreenshot(
                         `deep-${path}__${name}-select-option-${index}.png`,
-                        {threshold: 0.02},
                     );
 
                     await select.click();

projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts

@@ -31,10 +31,10 @@ test.describe('Deep / Toggle', () => {
                 await toggle.click();
                 await api.hideNotifications();
                 await api.waitStableState();
+                await page.waitForTimeout(100);
 
                 await expect(api.apiPageExample).toHaveScreenshot(
                     `deep-${path}__${name}-toggled.png`,
-                    {threshold: 0.02},
                 );
 
                 await toggle.click();

projects/demo-playwright/tests/demo/demo.pw.spec.ts

@@ -34,11 +34,12 @@ test.describe('Demo', () => {
 
                 await example.scrollIntoViewIfNeeded();
                 await documentation.waitStableState(); // note: load lazy loading images
+                await page.waitForTimeout(100);
 
-                await expect(example).toHaveScreenshot(
-                    [path.replace('/', '').replaceAll('/', '-'), `${i + 1}.png`],
-                    {threshold: 0.02},
-                );
+                await expect(example).toHaveScreenshot([
+                    path.replace('/', '').replaceAll('/', '-'),
+                    `${i + 1}.png`,
+                ]);
             }
         });
     });

projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

@@ -36,7 +36,7 @@ test.describe('CalendarRange', () => {
                 example.locator('p button[data-appearance="action"]');
 
             await expect(example).toHaveScreenshot(
-                '05-calendar-range-correct-display-defaults-items-and-values.png',
+                '05-calendar-range-correct-display-defaults-items-and-values_1.png',
             );
 
             await calendarRange.selectItem(1);
@@ -61,7 +61,7 @@ test.describe('CalendarRange', () => {
             await getRangeSwitcher().click();
 
             await expect(example).toHaveScreenshot(
-                '05-calendar-range-correct-display-defaults-items-and-values.png',
+                '05-calendar-range-correct-display-defaults-items-and-values_2.png',
             );
         });
 

scripts/visual-testing/combine-playwright-failed-screenshots.ts

@@ -5,13 +5,17 @@ import {combineSnapshots} from './combine-snapshots';
 const FAILED_SCREENSHOTS_PATH = 'projects/demo-playwright/tests-results';
 const DIFF_IMAGE_POSTFIX = '-diff.png';
 const OUTPUT_DIFF_IMAGE_POSTFIX = '.diff.png';
+const RETRY_COUNT = Number(process.env.RETRY_COUNT ?? 2);
+const REG_EXP = new RegExp(`retry${RETRY_COUNT}$`);
 
 (async function combinePlaywrightFailedScreenshots(
     rootPath = FAILED_SCREENSHOTS_PATH,
 ): Promise<void> {
     const filesOrDirs = readdirSync(rootPath, {
         withFileTypes: true,
-    }).filter((x) => !/-retry\d$/.exec(x.name));
+    }).filter((x) =>
+        x.isDirectory() ? REG_EXP.exec(x.name) : REG_EXP.exec(x.parentPath),
+    );
 
     for (const {name} of filesOrDirs.filter((x) => x.isDirectory())) {
         await combinePlaywrightFailedScreenshots(`${rootPath}/${name}`);
@@ -34,6 +38,9 @@ const OUTPUT_DIFF_IMAGE_POSTFIX = '.diff.png';
 
     const buffer = await combineSnapshots(imagesPaths);
     const diffImageName = diffImage.split('/').pop()!.replace(DIFF_IMAGE_POSTFIX, '');
+    const path = `${rootPath}/${diffImageName}${OUTPUT_DIFF_IMAGE_POSTFIX}`;
 
-    writeFileSync(`${rootPath}/${diffImageName}${OUTPUT_DIFF_IMAGE_POSTFIX}`, buffer);
+    writeFileSync(path, buffer);
+
+    console.info(`Write new diff: ${path}`);
 })();