chore(demo-playwright): test for table-bars-service (#5752)

.github/workflows/e2e.yml

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

projects/demo-playwright/playwright.options.ts

@@ -0,0 +1,5 @@
+// cspell:disable
+export const TUI_PLAYWRIGHT_MOBILE_USER_AGENT = `Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1`;
+// Samsung Galaxy Ace GT:
+export const TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH = 320;
+export const TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT = 480;

projects/demo-playwright/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.spec.ts

@@ -0,0 +1,33 @@
+import {tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+import {
+    TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
+    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
+    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
+} from '../../../playwright.options';
+
+test.describe(`TableBarsService`, () => {
+    test.use({
+        viewport: {
+            width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
+            height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
+        },
+        userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
+    });
+
+    test(`works`, async ({page}) => {
+        await tuiGoto(page, `/services/table-bars-service`);
+        const example = page.locator(`#base`);
+        const showTableBarButton = example
+            .locator(`tui-table-bar-example-1 button`)
+            .first();
+
+        await showTableBarButton.click();
+        const tableBarExample = page.locator(`[automation-id="tui-table-bar__bar"]`);
+
+        await expect(tableBarExample).toHaveScreenshot(
+            `01-table-bars-mobile-service.png`,
+        );
+    });
+});