feat(addon-doc): render page tabs as soon as possible

taiga-family · Oct 2, 2024 · ab5568c · ab5568c
1 parent 5856b18
commit ab5568c
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 19 deletions.
diff --git a/projects/addon-doc/components/page/page.template.html b/projects/addon-doc/components/page/page.template.html
@@ -70,10 +70,9 @@ <h1 class="t-title">
         class="t-see-also"
         [seeAlso]="seeAlso"
     />
-    <ng-container *ngFor="let tab of tabConnectors; index as index">
-        <ng-container
-            *ngIf="index === activeItemIndex"
-            [ngTemplateOutlet]="tab.template"
-        />
+    <ng-container *ngFor="let tab of tabConnectors; let index = index">
+        <div [style.display]="index === activeItemIndex ? 'block' : 'none'">
+            <ng-container [ngTemplateOutlet]="tab.template" />
+        </div>
     </ng-container>
 </div>
diff --git a/projects/demo-playwright/playwright.config.ts b/projects/demo-playwright/playwright.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
     snapshotDir: 'snapshots',
     reporter: process.env.CI ? 'github' : [['html', {outputFolder: 'tests-report'}]],
     fullyParallel: true,
+    timeout: 5 * 60 * 1000,
     /* 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,

diff --git a/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts b/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts
@@ -150,7 +150,11 @@ test.describe('Dialogs', () => {
                 `${DemoRoute.Dialog}/API?closeable=true&dismissible=false`,
             );
 
-            await page.locator('tui-doc-page button[data-appearance="primary"]').click();
+            await page
+                .locator('button[data-appearance="primary"]:visible')
+                .getByText('Show')
+                .click();
+
             await page.mouse.click(100, 100);
 
             await expect(page.locator('tui-dialog')).toHaveCount(1);
@@ -162,7 +166,11 @@ test.describe('Dialogs', () => {
                 `${DemoRoute.Dialog}/API?closeable=false&dismissible=true`,
             );
 
-            await page.locator('tui-doc-page button[data-appearance="primary"]').click();
+            await page
+                .locator('button[data-appearance="primary"]:visible')
+                .getByText('Show')
+                .click();
+
             await page.mouse.click(100, 100);
 
             await expect(page.locator('tui-dialog')).toHaveCount(0);
@@ -174,7 +182,11 @@ test.describe('Dialogs', () => {
                 `${DemoRoute.Dialog}/API?closeable=true&dismissible=false`,
             );
 
-            await page.locator('tui-doc-page button[data-appearance="primary"]').click();
+            await page
+                .locator('button[data-appearance="primary"]:visible')
+                .getByText('Show')
+                .click();
+
             await page.mouse.click(100, 100);
 
             await expect(page.locator('tui-dialog')).toHaveCount(1);
@@ -190,7 +202,11 @@ test.describe('Dialogs', () => {
                 `${DemoRoute.Dialog}/API?size=fullscreen&dismissible=true`,
             );
 
-            await page.locator('tui-doc-page button[data-appearance="primary"]').click();
+            await page
+                .locator('button[data-appearance="primary"]:visible')
+                .getByText('Show')
+                .click();
+
             await page.mouse.click(100, 100);
 
             await expect(page.locator('tui-dialog')).toHaveCount(1);
@@ -205,7 +221,11 @@ test.describe('Dialogs', () => {
                 `${DemoRoute.Dialog}/API?size=fullscreen&dismissible=true`,
             );
 
-            await page.locator('tui-doc-page button[data-appearance="primary"]').click();
+            await page
+                .locator('button[data-appearance="primary"]:visible')
+                .getByText('Show')
+                .click();
+
             await page.mouse.click(100, 100);
 
             await expect(page.locator('tui-dialog')).toHaveCount(1);

diff --git a/projects/demo-playwright/tests/kit/routable/routable.spec.ts b/projects/demo-playwright/tests/kit/routable/routable.spec.ts
@@ -27,7 +27,7 @@ test.describe('Routable', () => {
 
         await expect(page).toHaveURL(/\/dialog\/lazy-routable\/path\/to\/dialog$/);
 
-        await page.locator('[automation-id="tui-dialog__close"]').click();
+        await page.locator('[automation-id="tui-dialog__close"]').nth(1).click();
 
         await expect(page).toHaveURL(/\/dialog\/lazy-routable$/);
     });

diff --git a/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts b/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts
@@ -1,5 +1,4 @@
 import type {Locator, Page} from '@playwright/test';
-import {expect} from '@playwright/test';
 
 import {tuiHideElement} from '../hide-element';
 import {waitStableState} from '../wait-stable-state';
@@ -73,11 +72,6 @@ export class TuiDocumentationApiPagePO {
 
         if ((await this.apiPageExample.all()).length) {
             await this.apiPageExample.evaluate((el) => el.scrollIntoView());
-            await expect(async () => {
-                expect(
-                    await this.apiPageExample.boundingBox().then((box) => box?.y),
-                ).toBeGreaterThanOrEqual(64);
-            }).toPass();
         }
     }
 

diff --git a/projects/demo/src/modules/components/tabs/index.html b/projects/demo/src/modules/components/tabs/index.html
@@ -158,7 +158,7 @@
 
     <ng-template pageTab="Routing">
         <tui-doc-example [content]="8 | tuiExample: 'html,ts'">
-            <router-outlet />
+            <router-outlet *ngIf="path.url.endsWith('Routing')" />
         </tui-doc-example>
     </ng-template>
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/tabs/index.ts b/projects/demo/src/modules/components/tabs/index.ts
@@ -1,4 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import {tuiDocExampleOptionsProvider} from '@taiga-ui/addon-doc';
@@ -14,6 +15,8 @@ import {TuiTabs} from '@taiga-ui/kit';
     providers: [tuiDocExampleOptionsProvider({fullsize: true})],
 })
 export default class Page {
+    protected readonly path = inject(Router);
+
     protected buttons = ['Button 1', 'Button 2', 'Button 3', 'Button 4'];
 
     protected readonly moreContentVariants = ['', 'And more'];