chore(demo-playwright): test for navigation (#6144)

Co-authored-by: Nikita Barsukov <[email protected]>
Co-authored-by: Atharv Chandratre <[email protected]>

projects/demo-playwright/tests/addon-doc/navigation.spec.ts

@@ -0,0 +1,53 @@
+import {tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+test.describe(`Navigation`, () => {
+    test.use({viewport: {width: 1080, height: 600}});
+    test(`getting started / [light mode]`, async ({page}) => {
+        await tuiGoto(page, `/getting-started`, {
+            hideHeader: false,
+            hideLanguageSwitcher: true,
+            hideVersionManager: true,
+        });
+        const sideNavigation = page.locator(`tui-doc-navigation`);
+
+        await sideNavigation.isVisible();
+        await expect(sideNavigation).toHaveScreenshot(
+            `01-tui-doc-navigation-light-mode.png`,
+        );
+    });
+
+    test(`getting started / [night mode]`, async ({page}) => {
+        await tuiGoto(page, `/getting-started`, {
+            hideHeader: false,
+            enableNightMode: true,
+            hideLanguageSwitcher: true,
+            hideVersionManager: true,
+        });
+        const sideNavigation = page.locator(`tui-doc-navigation`);
+
+        await sideNavigation.isVisible();
+        await expect(sideNavigation).toHaveScreenshot(
+            `02-tui-doc-navigation-night-mode.png`,
+        );
+    });
+
+    test.describe(`anchor links navigation works`, () => {
+        test(`scroll to "tui-doc-example"`, async ({page}) => {
+            await tuiGoto(page, `/components/input#table`);
+            await expect(page.locator(`#table`)).toBeInViewport();
+        });
+
+        test(`scroll to "tui-doc-code"`, async ({page}) => {
+            await tuiGoto(page, `/getting-started#icons`);
+            await expect(page.locator(`#icons`)).toBeVisible();
+            await expect(page.locator(`#icons`)).toBeInViewport();
+        });
+
+        test(`scroll after click on link with anchor`, async ({page}) => {
+            await tuiGoto(page, `/getting-started`);
+            await page.locator(`a[fragment="root"]`).click();
+            await expect(page.locator(`#root`)).toBeInViewport();
+        });
+    });
+});

projects/demo-playwright/utils/goto.ts

@@ -6,6 +6,9 @@ import {tuiWaitForFonts} from './wait-for-fonts';
 interface TuiGotoOptions extends NonNullable<Parameters<Page['goto']>[1]> {
     date?: Date;
     hideHeader?: boolean;
+    enableNightMode?: boolean;
+    hideVersionManager?: boolean;
+    hideLanguageSwitcher?: boolean;
 }
 
 export async function tuiGoto(
@@ -14,6 +17,9 @@ export async function tuiGoto(
     {
         date = new Date(2020, 8, 25, 19, 19),
         hideHeader = true,
+        enableNightMode = false,
+        hideVersionManager = false,
+        hideLanguageSwitcher = false,
         ...playwrightGotoOptions
     }: TuiGotoOptions = {},
 ): ReturnType<Page['goto']> {
@@ -23,6 +29,13 @@ export async function tuiGoto(
     await page.addInitScript(() =>
         globalThis.sessionStorage.setItem(`playwright`, `true`),
     );
+
+    if (enableNightMode) {
+        await page.addInitScript(() =>
+            globalThis.localStorage.setItem(`tuiNight`, `true`),
+        );
+    }
+
     await tuiMockDate(page, date);
 
     const response = await page.goto(url, playwrightGotoOptions);
@@ -34,5 +47,13 @@ export async function tuiGoto(
         await page.locator(`[tuidocheader]`).evaluate(el => el.remove());
     }
 
+    if (hideVersionManager) {
+        await page.locator(`version-manager`).evaluate(el => el.remove());
+    }
+
+    if (hideLanguageSwitcher) {
+        await page.locator(`tui-language-switcher`).evaluate(el => el.remove());
+    }
+
     return response;
 }