From fff31a5744bff462153539076947f28ff4b82566 Mon Sep 17 00:00:00 2001
From: Atharv Chandratre <atharvchandratre@gmail.com>
Date: Fri, 27 Oct 2023 11:46:23 -0500
Subject: [PATCH] chore(demo-playwright): test for `table-bars-service` (#5752)

---
 .github/workflows/e2e.yml                     |  2 +-
 .../table-bars-service.mobile.cy.ts           | 22 -------------
 .../demo-playwright/playwright.options.ts     |  5 +++
 .../table-bars-service.mobile.spec.ts         | 33 +++++++++++++++++++
 4 files changed, 39 insertions(+), 23 deletions(-)
 delete mode 100644 projects/demo-cypress/cypress/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.cy.ts
 create mode 100644 projects/demo-playwright/playwright.options.ts
 create mode 100644 projects/demo-playwright/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.spec.ts

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 117b540f28c3..b0f51a533899 100644
--- a/.github/workflows/e2e.yml
+++ b/.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/checkout@v1.36.1
diff --git a/projects/demo-cypress/cypress/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.cy.ts b/projects/demo-cypress/cypress/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.cy.ts
deleted file mode 100644
index be1a8a45fd1b..000000000000
--- a/projects/demo-cypress/cypress/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.cy.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
-    TUI_CYPRESS_MOBILE_USER_AGENT,
-    TUI_CYPRESS_MOBILE_VIEWPORT_HEIGHT,
-    TUI_CYPRESS_MOBILE_VIEWPORT_WIDTH,
-} from '@demo-cypress/cypress.options';
-
-describe(`TableBarsService`, () => {
-    it(`works`, () => {
-        cy.viewport(
-            TUI_CYPRESS_MOBILE_VIEWPORT_WIDTH,
-            TUI_CYPRESS_MOBILE_VIEWPORT_HEIGHT,
-        ).tuiVisit(`/services/table-bars-service`, {
-            headers: {userAgent: TUI_CYPRESS_MOBILE_USER_AGENT},
-        });
-
-        cy.get(`tui-table-bar-example-1 button`).first().click();
-        cy.getByAutomationId(`tui-table-bar__bar`)
-            .first()
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`table-bars`);
-    });
-});
diff --git a/projects/demo-playwright/playwright.options.ts b/projects/demo-playwright/playwright.options.ts
new file mode 100644
index 000000000000..645f25942a01
--- /dev/null
+++ b/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;
diff --git a/projects/demo-playwright/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.spec.ts b/projects/demo-playwright/tests/addon-tablebars/table-bars-service/table-bars-service.mobile.spec.ts
new file mode 100644
index 000000000000..e11b28d005bf
--- /dev/null
+++ b/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`,
+        );
+    });
+});