chore: slow operations on deep tests

taiga-family · Dec 13, 2024 · ddceed0 · ddceed0
1 parent f8ea2f2
commit ddceed0
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 22 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -93,7 +93,6 @@ jobs:
     needs: [build-demo]
     strategy:
       fail-fast: false
-      max-parallel: 9
       matrix:
         shard: [
             # Safari

diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts
@@ -21,6 +21,7 @@ test.describe('InputDate and mobile user agent', () => {
             .click();
 
         await page.waitForSelector('tui-mobile-calendar-dropdown', {state: 'visible'});
+        await page.waitForTimeout(300); // safari flaky
 
         await expect(page).toHaveScreenshot('01-input-date-range-mobile-1.png');
 
@@ -49,6 +50,7 @@ test.describe('InputDate and mobile user agent', () => {
             .click();
 
         await page.waitForSelector('tui-mobile-calendar-dropdown', {state: 'visible'});
+        await page.waitForTimeout(300); // safari flaky
 
         await expect(page).toHaveScreenshot('02-input-date-range-mobile-1.png');
 
@@ -84,6 +86,7 @@ test.describe('InputDate and mobile user agent', () => {
             .click();
 
         await page.waitForSelector('tui-mobile-calendar-dropdown', {state: 'visible'});
+        await page.waitForTimeout(300); // safari flaky
 
         await expect(page).toHaveScreenshot('03-input-date-range-mobile-1.png');
 

diff --git a/projects/demo-playwright/tests/core/dropdown/dropdown.pw.spec.ts b/projects/demo-playwright/tests/core/dropdown/dropdown.pw.spec.ts
@@ -11,6 +11,7 @@ test.describe('Dropdown', () => {
 
         await example.scrollIntoViewIfNeeded();
         await example.locator('button').click();
+        await page.waitForTimeout(300);
 
         await expect(page).toHaveScreenshot('01-dropdown.png');
     });
@@ -21,6 +22,7 @@ test.describe('Dropdown', () => {
 
         await example.scrollIntoViewIfNeeded();
         await example.locator('input').click();
+        await page.waitForTimeout(300);
 
         await expect(page).toHaveScreenshot('02-dropdown.png');
     });
@@ -31,6 +33,7 @@ test.describe('Dropdown', () => {
 
         await example.scrollIntoViewIfNeeded();
         await example.locator('input').click();
+        await page.waitForTimeout(300);
 
         await expect(page).toHaveScreenshot('03-dropdown.png');
     });
@@ -41,6 +44,7 @@ test.describe('Dropdown', () => {
 
         await example.scrollIntoViewIfNeeded();
         await example.locator('button').click();
+        await page.waitForTimeout(300);
 
         await expect(page).toHaveScreenshot('04-dropdown.png');
     });
@@ -51,6 +55,7 @@ test.describe('Dropdown', () => {
 
         await example.scrollIntoViewIfNeeded();
         await example.locator('button').click();
+        await page.waitForTimeout(300);
 
         await expect(page).toHaveScreenshot('05-dropdown.png');
     });
@@ -60,7 +65,9 @@ test.describe('Dropdown', () => {
         const example = new TuiDocumentationPagePO(page).getExample('#portal');
 
         await example.scrollIntoViewIfNeeded();
+        // eslint-disable-next-line playwright/no-force-option
         await example.locator('.t2').click({force: true});
+        await page.waitForTimeout(300);
 
         await expect(page).toHaveScreenshot('13-dropdown.png');
     });
@@ -123,6 +130,7 @@ test.describe('Dropdown', () => {
 
         await example.scrollIntoViewIfNeeded();
         await example.locator('button').click();
+        await page.waitForTimeout(300);
 
         expect(page.locator('tui-dropdown')).toBeDefined();
 

diff --git a/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts b/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts
@@ -37,7 +37,6 @@ test.describe('Deep / Select', () => {
                 await expect(select).toBeVisible();
 
                 await select.click();
-                await api.waitTuiIcons();
 
                 const options = await api.getOptions();
 
@@ -47,14 +46,13 @@ test.describe('Deep / Select', () => {
                     await api.focusOnBody();
                     await api.hideNotifications();
                     await api.waitStableState();
-                    await api.waitTuiIcons();
+                    await page.waitForTimeout(300);
 
                     await expect(api.apiPageExample).toHaveScreenshot(
                         `deep-${path}-${name}-row—${rowIndex}-select-option-${index}.png`,
                     );
 
                     await select.click();
-                    await api.waitTuiIcons();
                 }
 
                 const cleaner = await api.getCleaner(select);
@@ -67,9 +65,9 @@ test.describe('Deep / Select', () => {
                     await page.keyboard.down('Enter');
                 }
 
+                await page.waitForTimeout(100);
                 await api.waitStableState();
                 await api.focusOnBody();
-                await api.waitTuiIcons();
             }
         }),
     );

diff --git a/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts b/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts
@@ -31,17 +31,16 @@ test.describe('Deep / Toggle', () => {
                 await expect(toggle).toBeVisible();
 
                 await toggle.click();
-                await api.waitTuiIcons();
                 await api.hideNotifications();
                 await api.waitStableState();
-                await page.waitForTimeout(100);
+                await page.waitForTimeout(300);
 
                 await expect(api.apiPageExample).toHaveScreenshot(
                     `deep-${path}-${name}-row-${rowIndex}-toggled.png`,
                 );
 
                 await toggle.click();
-                await api.waitTuiIcons();
+                await page.waitForTimeout(100);
             }
         }),
     );

diff --git a/projects/demo-playwright/tests/demo/demo.pw.spec.ts b/projects/demo-playwright/tests/demo/demo.pw.spec.ts
@@ -7,7 +7,7 @@ test.describe('Demo', () => {
     const demoPaths: string[] = JSON.parse(process.env['DEMO_PATHS']!);
 
     demoPaths.forEach((path) => {
-        test(`${path}`, async ({page}) => {
+        test(`${path}`, async ({page, browserName}) => {
             const documentation = new TuiDocumentationPagePO(page);
 
             await tuiMockImages(page);
@@ -29,7 +29,7 @@ test.describe('Demo', () => {
 
             for (const [i, example] of examples.entries()) {
                 // eslint-disable-next-line playwright/no-conditional-in-test
-                if (tuiIsFlakyExample(path, i)) {
+                if (tuiIsFlakyExample(path, i, browserName)) {
                     continue;
                 }
 

diff --git a/projects/demo-playwright/utils/is-flaky-examples.ts b/projects/demo-playwright/utils/is-flaky-examples.ts
@@ -1,26 +1,41 @@
 import {DemoRoute} from '@demo/routes';
 
-const FLAKY_EXAMPLES = new Map<string, number[]>([
+const FLAKY_EXAMPLES = new Map<
+    string,
+    Array<{exampleIndex: number; browserName?: string}>
+>([
+    [DemoRoute.AppBar, [{exampleIndex: 0, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem
+    [DemoRoute.Carousel, [{exampleIndex: 2, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem
     [
         DemoRoute.Carousel,
         [
-            0, // [duration]="4000"
-            3, // just button (to open dialog)
+            {exampleIndex: 0}, // [duration]="4000"
+            {exampleIndex: 3}, // just button (to open dialog)
         ],
     ],
-    [DemoRoute.IconsCustomization, [0]], // TODO: investigate flaky test
-    [DemoRoute.MultiSelect, [3]], // Imitating server response (timer(5000))
-    [DemoRoute.Select, [4]], // Imitating server response (delay(3000))
-    [DemoRoute.Stepper, [2]], // TODO: flaky test for proprietary demo (autoscroll problems)
-    [DemoRoute.TabBar, [3]], // Imitating server response (timer(3000))
-    [DemoRoute.Table, [3, 4]], // Imitating server response (delay(3000)) and virtual scroll
-    [DemoRoute.Tiles, [0]], // YouTube iframe player
+    [DemoRoute.IconsCustomization, [{exampleIndex: 0}]], // TODO: investigate flaky test
+    [DemoRoute.LegendItem, [{exampleIndex: 0, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem
+    [DemoRoute.MultiSelect, [{exampleIndex: 3}]], // Imitating server response (timer(5000))
+    [DemoRoute.RingChart, [{exampleIndex: 0, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem
+    [DemoRoute.Select, [{exampleIndex: 4}]], // Imitating server response (delay(3000))
+    [DemoRoute.Stepper, [{exampleIndex: 2}]], // TODO: flaky test for proprietary demo (autoscroll problems)
+    [DemoRoute.TabBar, [{exampleIndex: 3}]], // Imitating server response (timer(3000))
+    [DemoRoute.Table, [{exampleIndex: 3}, {exampleIndex: 4}]], // Imitating server response (delay(3000)) and virtual scroll
+    [DemoRoute.Tiles, [{exampleIndex: 0}]], // YouTube iframe player
 ]);
 
-export function tuiIsFlakyExample(path: string, exampleIndex: number): boolean {
+export function tuiIsFlakyExample(
+    path: string,
+    exampleIndex: number,
+    browserName: string,
+): boolean {
     const exclusions = FLAKY_EXAMPLES.get(path) ?? [];
 
-    const excluded = !!exclusions?.includes(exampleIndex);
+    const excluded = !!exclusions.find(
+        (exclusion) =>
+            exclusion.exampleIndex === exampleIndex &&
+            (exclusion.browserName ? exclusion.browserName === browserName : true),
+    );
 
     if (excluded) {
         console.info(`skip test for: ${path}[${exampleIndex}]`);