From 1ecdd8386e62462e88ed380a82d5827e9b82ddef Mon Sep 17 00:00:00 2001
From: Atharv Chandratre <atharvchandratre@gmail.com>
Date: Fri, 20 Oct 2023 08:43:41 -0500
Subject: [PATCH] test(demo-playwright): tests for addon-mobile (#5697)

Co-authored-by: Vidhi Rambhia <39163240+VidhiRambhia@users.noreply.github.com>
Co-authored-by: Nikita Barsukov <nikita.s.barsukov@gmail.com>
Co-authored-by: VidhiRambhia <vsrambhia@gmail.com>
Co-authored-by: Maksim Ivanov <omaxphp@yandex.ru>
---
 .../mobile-calendar/mobile-calendar.cy.ts     | 29 ---------------
 .../mobile-calendar/mobile-calendar.spec.ts   | 37 +++++++++++++++++++
 2 files changed, 37 insertions(+), 29 deletions(-)
 delete mode 100644 projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts
 create mode 100644 projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts

diff --git a/projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts b/projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts
deleted file mode 100644
index 0f7e8129106c..000000000000
--- a/projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-describe(`MobileCalendar`, () => {
-    before(() => {
-        cy.clock(Date.UTC(2021, 10, 10), [`Date`]);
-    });
-
-    it(`works`, () => {
-        cy.viewport(400, 812);
-        cy.tuiVisit(`components/mobile-calendar`);
-
-        cy.get(`tui-mobile-calendar-example-1 button`).first().click();
-        cy.get(`tui-dialog tui-mobile-calendar`)
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`mobile-calendar`);
-    });
-
-    it(`check disabled state`, () => {
-        cy.tuiVisit(`components/mobile-calendar/API?tuiMode=null&max$=1`);
-
-        cy.get(`tui-mobile-calendar`)
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`mobile-calendar-disabled`);
-
-        cy.tuiVisit(`components/mobile-calendar/API?tuiMode=null&max$=0`);
-
-        cy.get(`tui-mobile-calendar`)
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`mobile-calendar-enabled`);
-    });
-});
diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts
new file mode 100644
index 000000000000..b7019617d7d4
--- /dev/null
+++ b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts
@@ -0,0 +1,37 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+test.describe(`MobileCalendar`, () => {
+    test.use({viewport: {width: 400, height: 812}});
+
+    test(`works`, async ({page}) => {
+        await tuiGoto(page, `components/mobile-calendar`);
+        const example = new TuiDocumentationPagePO(page).getExample(`#dropdown`);
+        const chooseDateButton = example
+            .locator(`tui-mobile-calendar-example-1 button`)
+            .first();
+
+        await chooseDateButton.click();
+        await expect(example).toHaveScreenshot(`01-mobile-calendar.png`);
+    });
+
+    test(`check disabled state`, async ({page}) => {
+        await tuiGoto(page, `components/mobile-calendar/API?tuiMode=null&max$=1`);
+        const {apiPageExample} = new TuiDocumentationPagePO(page);
+
+        await apiPageExample.scrollIntoViewIfNeeded();
+        await expect(page).toHaveScreenshot(`01-mobile-calendar-disabled.png`, {
+            mask: [page.locator(`tui-mobile-calendar`)],
+        });
+    });
+
+    test(`check enabled state`, async ({page}) => {
+        await tuiGoto(page, `components/mobile-calendar/API?tuiMode=null&max$=0`);
+        const {apiPageExample} = new TuiDocumentationPagePO(page);
+
+        await apiPageExample.scrollIntoViewIfNeeded();
+        await expect(page).toHaveScreenshot(`01-mobile-calendar-enabled.png`, {
+            mask: [page.locator(`tui-mobile-calendar`)],
+        });
+    });
+});