chore(demo-playwright): tests for addon-table (#5664)

.github/workflows/e2e.yml

@@ -37,7 +37,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        project: [addon-doc, addon-table, core, deep, kit]
+        project: [addon-doc, core, deep, kit]
     name: ${{ matrix.project }}
     steps:
       - uses: taiga-family/ci/actions/setup/[email protected]

projects/demo-playwright/tests/addon-table/table-pagination/table-pagination.spec.ts

@@ -0,0 +1,67 @@
+import {
+    TuiDocumentationPagePO,
+    tuiGoto,
+    TuiTablePaginationPO,
+} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+test.describe(`TablePagination`, () => {
+    test.describe(`Dropdown with \`[size]\`-options (amount items per page)`, () => {
+        test.use({viewport: {width: 600, height: 600}});
+
+        test(`Basic case`, async ({page}) => {
+            await tuiGoto(page, `/components/table-pagination/API`);
+
+            const {apiPageExample} = new TuiDocumentationPagePO(page);
+
+            const tablePaginationPO = new TuiTablePaginationPO(apiPageExample);
+
+            const {tablePagination, linesPerPageSelect} = tablePaginationPO;
+
+            await linesPerPageSelect.click();
+
+            await tablePaginationPO.waitForCheckmarkIcon(page);
+
+            await expect(tablePagination).toHaveScreenshot(`0-[size]-dropdown-base.png`);
+        });
+
+        test(`With very long option name`, async ({page}) => {
+            const longNumber = Number.MAX_SAFE_INTEGER;
+
+            await tuiGoto(
+                page,
+                `/components/table-pagination/API?items=[0, ${longNumber}]&size=${longNumber}&total=${longNumber}&page=0`,
+            );
+
+            const {apiPageExample} = new TuiDocumentationPagePO(page);
+
+            const tablePaginationPO = new TuiTablePaginationPO(apiPageExample);
+
+            const {tablePagination, linesPerPageSelect} = tablePaginationPO;
+
+            await linesPerPageSelect.click();
+
+            await tablePaginationPO.waitForCheckmarkIcon(page);
+
+            await expect(tablePagination).toHaveScreenshot(`1-[size]-dropdown-base.png`);
+        });
+    });
+
+    test(`Custom size-option content`, async ({page}) => {
+        await tuiGoto(page, `/components/table-pagination`);
+
+        const {customSizeOptionContent} = new TuiDocumentationPagePO(page);
+
+        const tablePaginationPO = new TuiTablePaginationPO(customSizeOptionContent);
+
+        const {linesPerPageSelect} = tablePaginationPO;
+
+        await linesPerPageSelect.click();
+
+        await tablePaginationPO.waitForCheckmarkIcon(page);
+
+        const dropdown = page.locator(`tui-dropdown`);
+
+        await expect(dropdown).toHaveScreenshot(`2-[sizeOptionContent]-dropdown.png`);
+    });
+});

projects/demo-playwright/utils/page-objects/documentation-page.po.ts

@@ -5,6 +5,10 @@ import {tuiHideElement} from '../hide-element';
 export class TuiDocumentationPagePO {
     readonly apiPageExample: Locator = this.page.locator(`#demo-content`);
 
+    readonly customSizeOptionContent: Locator = this.page.locator(
+        `#custom-size-option-content`,
+    );
+
     readonly submitFormControlButton = this.apiPageExample.locator(
         `[automation-id="tui-demo-button__submit-state"]`,
     );

projects/demo-playwright/utils/page-objects/index.ts

@@ -8,4 +8,5 @@ export * from './input-tag.po';
 export * from './input-time.po';
 export * from './multi-select.po';
 export * from './slider.po';
+export * from './table-pagination-page.po';
 export * from './textfield-with-data-list.po';

projects/demo-playwright/utils/page-objects/table-pagination-page.po.ts

@@ -0,0 +1,23 @@
+import {Locator, Page, test} from '@playwright/test';
+
+const {expect} = test;
+
+export class TuiTablePaginationPO {
+    readonly tablePagination: Locator = this.host.locator(`tui-table-pagination`);
+
+    readonly linesPerPageSelect = this.host.locator(
+        `[automation-id=tui-table-pagination__lines-per-page-wrapper] tui-hosted-dropdown`,
+    );
+
+    constructor(private readonly host: Locator) {}
+
+    async waitForCheckmarkIcon(page: Page): Promise<void> {
+        const dropdownCheckMark = page.locator(`tui-dropdown tui-svg.t-checkmark use`);
+
+        await expect(dropdownCheckMark).toBeVisible();
+
+        const dropdownCheckMarkBox = await dropdownCheckMark.boundingBox();
+
+        expect(dropdownCheckMarkBox?.height).toBeGreaterThan(0);
+    }
+}