chore: slow operations on deep tests

taiga-family · Dec 13, 2024 · 5eb71b3 · 5eb71b3
1 parent 17ec382
commit 5eb71b3
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 28 deletions.
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/core/hint/hint.pw.spec.ts b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts
@@ -91,10 +91,10 @@ test.describe('TuiHint', () => {
                 `03-hint-mode-${mode}-tuiHintShowDelay-1000-wait-500.png`,
             );
 
-            await page.waitForTimeout(500);
+            await page.waitForTimeout(1500);
 
             await expect(page).toHaveScreenshot(
-                `03-hint-mode-${mode}-tuiHintShowDelay-1000-wait-1000.png`,
+                `03-hint-mode-${mode}-tuiHintShowDelay-1000-wait-more-1000.png`,
             );
         });
     });

diff --git a/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts b/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable playwright/no-conditional-in-test */
 import {DemoRoute} from '@demo/routes';
 import {TuiDocumentationApiPagePO, tuiGoto, tuiMockImages} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
@@ -10,7 +11,7 @@ test.describe('Deep / Select', () => {
     );
 
     deepPaths.forEach((path) =>
-        test(`${path}`, async ({page}) => {
+        test(`${path}`, async ({page, browserName}) => {
             await tuiMockImages(page);
             await tuiGoto(page, `${path}/API`);
 
@@ -25,7 +26,6 @@ test.describe('Deep / Select', () => {
                 const select = await api.getSelect(row);
                 const name = await api.getNameProperty(row);
 
-                // eslint-disable-next-line playwright/no-conditional-in-test
                 if (!select) {
                     continue;
                 }
@@ -37,7 +37,11 @@ test.describe('Deep / Select', () => {
                 await expect(select).toBeVisible();
 
                 await select.click();
-                await api.waitTuiIcons();
+
+                // note: hello Safari
+                if (browserName === 'webkit') {
+                    await page.waitForTimeout(200);
+                }
 
                 const options = await api.getOptions();
 
@@ -47,19 +51,26 @@ test.describe('Deep / Select', () => {
                     await api.focusOnBody();
                     await api.hideNotifications();
                     await api.waitStableState();
-                    await api.waitTuiIcons();
+
+                    // note: hello Safari
+                    if (browserName === 'webkit') {
+                        await page.waitForTimeout(200);
+                    }
 
                     await expect(api.apiPageExample).toHaveScreenshot(
                         `deep-${path}-${name}-row—${rowIndex}-select-option-${index}.png`,
                     );
 
                     await select.click();
-                    await api.waitTuiIcons();
+
+                    // note: hello Safari
+                    if (browserName === 'webkit') {
+                        await page.waitForTimeout(200);
+                    }
                 }
 
                 const cleaner = await api.getCleaner(select);
 
-                // eslint-disable-next-line playwright/no-conditional-in-test
                 if (cleaner) {
                     await cleaner.click();
                 } else {
@@ -69,7 +80,11 @@ test.describe('Deep / Select', () => {
 
                 await api.waitStableState();
                 await api.focusOnBody();
-                await api.waitTuiIcons();
+
+                // note: hello Safari
+                if (browserName === 'webkit') {
+                    await page.waitForTimeout(200);
+                }
             }
         }),
     );

diff --git a/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts b/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts
@@ -1,11 +1,12 @@
+/* eslint-disable playwright/no-conditional-in-test */
 import {TuiDocumentationApiPagePO, tuiGoto, tuiMockImages} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
 
 test.describe('Deep / Toggle', () => {
     const deepPaths: string[] = JSON.parse(process.env['DEMO_PATHS']!);
 
     deepPaths.forEach((path) =>
-        test(`${path}`, async ({page}) => {
+        test(`${path}`, async ({page, browserName}) => {
             await tuiMockImages(page);
             await tuiGoto(page, `${path}/API`);
 
@@ -20,7 +21,6 @@ test.describe('Deep / Toggle', () => {
                 const toggle = await api.getToggle(row);
                 const name = await api.getNameProperty(row);
 
-                // eslint-disable-next-line playwright/no-conditional-in-test
                 if (!toggle) {
                     continue;
                 }
@@ -31,17 +31,24 @@ test.describe('Deep / Toggle', () => {
                 await expect(toggle).toBeVisible();
 
                 await toggle.click();
-                await api.waitTuiIcons();
                 await api.hideNotifications();
                 await api.waitStableState();
-                await page.waitForTimeout(100);
+
+                // note: hello Safari
+                if (browserName === 'webkit') {
+                    await page.waitForTimeout(300);
+                }
 
                 await expect(api.apiPageExample).toHaveScreenshot(
                     `deep-${path}-${name}-row-${rowIndex}-toggled.png`,
                 );
 
                 await toggle.click();
-                await api.waitTuiIcons();
+
+                // note: hello Safari
+                if (browserName === 'webkit') {
+                    await page.waitForTimeout(200);
+                }
             }
         }),
     );

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/tests/kit/dropdown-selection/dropdown-selection.pw.spec.ts b/projects/demo-playwright/tests/kit/dropdown-selection/dropdown-selection.pw.spec.ts
@@ -15,6 +15,7 @@ test.describe('DropdownSelection', () => {
         await example.locator('textarea').focus();
         await page.keyboard.press('Control+ArrowLeft');
         await api.waitStableState();
+        await page.waitForTimeout(300); // flaky in Safari
 
         await expect(page).toHaveScreenshot('01-dropdown-selection.png');
 
@@ -24,17 +25,20 @@ test.describe('DropdownSelection', () => {
         await page.keyboard.press('ArrowRight');
         await page.keyboard.press('ArrowRight');
         await api.waitStableState();
+        await page.waitForTimeout(300); // flaky in Safari
 
         await expect(page).toHaveScreenshot('02-dropdown-selection.png');
 
         await example.locator('textarea').fill('');
         await example.locator('textarea').fill('@');
         await api.waitStableState();
+        await page.waitForTimeout(300); // flaky in Safari
 
         await expect(page).toHaveScreenshot('03-dropdown-selection.png');
 
         await page.locator('button[tuiOption]').first().click();
         await api.waitStableState();
+        await page.waitForTimeout(300); // flaky in Safari
 
         await expect(page).toHaveScreenshot('04-dropdown-selection.png');
     });

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}]`);