From 72ecdfb94a04d5dc43e19de157b93379bfe65f8a Mon Sep 17 00:00:00 2001 From: splincode Date: Thu, 26 Sep 2024 19:02:58 +0300 Subject: [PATCH] feat(addon-doc): render page tabs as soon as possible --- projects/addon-doc/components/demo/index.html | 4 ++- projects/addon-doc/components/demo/index.ts | 2 +- .../components/page/page.template.html | 9 +++--- projects/demo-playwright/playwright.config.ts | 1 + .../tests/core/dialogs/dialogs.spec.ts | 30 +++++++++++++++---- .../demo-playwright/tests/demo/demo.spec.ts | 17 +++++++++-- .../tests/kit/routable/routable.spec.ts | 2 +- .../page-objects/documentation-api-page.po.ts | 8 +---- .../utils/wait-stable-state.ts | 10 +++++-- .../src/modules/components/tabs/index.html | 2 +- .../demo/src/modules/components/tabs/index.ts | 5 +++- 11 files changed, 63 insertions(+), 27 deletions(-) diff --git a/projects/addon-doc/components/demo/index.html b/projects/addon-doc/components/demo/index.html index 8c4b82f8e970f..1b0a6c0503bcc 100644 --- a/projects/addon-doc/components/demo/index.html +++ b/projects/addon-doc/components/demo/index.html @@ -104,5 +104,7 @@ class="t-resizer" [tuiResizer]="[1, 0]" (tuiSizeChange)="updateWidth($event[0])" - > + > + - + diff --git a/projects/addon-doc/components/demo/index.ts b/projects/addon-doc/components/demo/index.ts index 2469774c71fc4..cf2889220ccc3 100644 --- a/projects/addon-doc/components/demo/index.ts +++ b/projects/addon-doc/components/demo/index.ts @@ -148,7 +148,7 @@ export class TuiDocDemo implements OnInit { } protected updateWidth(width = NaN): void { - if (!this.resizer || !this.resizable || !this.content) { + if (!this.resizer || !this.resizable || !this.content || !this.el.clientWidth) { return; } diff --git a/projects/addon-doc/components/page/page.template.html b/projects/addon-doc/components/page/page.template.html index f95c94cd95066..6ba0cdbae0cf5 100644 --- a/projects/addon-doc/components/page/page.template.html +++ b/projects/addon-doc/components/page/page.template.html @@ -70,10 +70,9 @@

class="t-see-also" [seeAlso]="seeAlso" /> - - + +
+ +
diff --git a/projects/demo-playwright/playwright.config.ts b/projects/demo-playwright/playwright.config.ts index 676a74f58a61d..234be251af904 100644 --- 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 index 769f773b6b0b4..c5be5a7ceaafe 100644 --- 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/demo/demo.spec.ts b/projects/demo-playwright/tests/demo/demo.spec.ts index 83159721eb5cc..729f050a18373 100644 --- a/projects/demo-playwright/tests/demo/demo.spec.ts +++ b/projects/demo-playwright/tests/demo/demo.spec.ts @@ -1,4 +1,10 @@ -import {TuiDocumentationPagePO, tuiGoto, tuiMockImages} from '@demo-playwright/utils'; +import { + TuiDocumentationPagePO, + tuiGoto, + tuiMockImages, + waitStableState, +} from '@demo-playwright/utils'; +import type {Locator} from '@playwright/test'; import {expect, test} from '@playwright/test'; import {tuiIsFlakyExample} from './is-flaky-examples'; @@ -24,9 +30,16 @@ test.describe('Demo', () => { } }).toPass(); + const visibleExamples: Locator[] = []; const examples = await page.getByTestId('tui-doc-example').all(); - for (const [i, example] of examples.entries()) { + for (const example of examples) { + if (await waitStableState(example)) { + visibleExamples.push(example); + } + } + + for (const [i, example] of visibleExamples.entries()) { if (tuiIsFlakyExample(path, i)) { continue; } diff --git a/projects/demo-playwright/tests/kit/routable/routable.spec.ts b/projects/demo-playwright/tests/kit/routable/routable.spec.ts index 2aae3f21e36ea..f4c380b0c775e 100644 --- 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 index 2caf6042b34f5..272d495f886a5 100644 --- 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,12 +1,11 @@ import type {Locator, Page} from '@playwright/test'; -import {expect} from '@playwright/test'; import {tuiHideElement} from '../hide-element'; import {waitStableState} from '../wait-stable-state'; export class TuiDocumentationApiPagePO { public readonly pageExamples: Locator = this.page.locator('tui-doc-example'); - public readonly apiPageExample: Locator = this.page.locator('#demo-content'); + public readonly apiPageExample: Locator = this.page.locator('#demo-content:visible'); constructor(protected readonly page: Page) {} @@ -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-playwright/utils/wait-stable-state.ts b/projects/demo-playwright/utils/wait-stable-state.ts index 67392805ee173..6be28b71819b2 100644 --- a/projects/demo-playwright/utils/wait-stable-state.ts +++ b/projects/demo-playwright/utils/wait-stable-state.ts @@ -1,6 +1,6 @@ import type {Locator} from '@playwright/test'; -export async function waitStableState(locator: Locator): Promise { +export async function waitStableState(locator: Locator): Promise { try { const handle = await locator.elementHandle(); @@ -12,6 +12,10 @@ export async function waitStableState(locator: Locator): Promise { // https://playwright.dev/docs/actionability#visible // Element is considered visible when it has non-empty bounding box - await handle?.waitForElementState('visible'); - } catch {} + await handle?.waitForElementState('visible', {timeout: 1000}); + + return true; + } catch { + return false; + } } diff --git a/projects/demo/src/modules/components/tabs/index.html b/projects/demo/src/modules/components/tabs/index.html index d3fa0e0a9a683..06346642f35dd 100644 --- a/projects/demo/src/modules/components/tabs/index.html +++ b/projects/demo/src/modules/components/tabs/index.html @@ -158,7 +158,7 @@ - + diff --git a/projects/demo/src/modules/components/tabs/index.ts b/projects/demo/src/modules/components/tabs/index.ts index 33ea604f68c22..788124bf9b5e8 100644 --- 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'];