chore(demo-playwright): CalendarSheet add

taiga-family · Oct 24, 2024 · 6a08b9a · 6a08b9a
1 parent f638ff6
commit 6a08b9a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts b/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
@@ -151,7 +151,10 @@ test.describe('InputDateRange', () => {
             await expect(inputDateRange.textfield).toHaveValue('Today');
 
             await inputDateRange.textfield.click();
-            await calendar.clickOnCalendarDay(21);
+
+            const [calendarSheet] = await calendar.getCalendarSheets();
+
+            await calendarSheet?.clickOnDay(21);
 
             await expect(inputDateRange.textfield).toHaveValue(
                 `21.09.2020${CHAR_NO_BREAK_SPACE}–${CHAR_NO_BREAK_SPACE}25.09.2020`,

diff --git a/projects/demo-playwright/tests/kit/input-date/input-date.spec.ts b/projects/demo-playwright/tests/kit/input-date/input-date.spec.ts
@@ -8,6 +8,7 @@ test.describe('InputDate', () => {
     test.describe('API', () => {
         let documentationPage: TuiDocumentationPagePO;
         let example: Locator;
+
         let inputDate!: TuiInputDatePO;
         let calendar!: TuiCalendarPO;
 
@@ -23,17 +24,21 @@ test.describe('InputDate', () => {
             example = documentationPage.apiPageExample;
 
             inputDate = new TuiInputDatePO(example.locator('tui-input-date'));
+
             calendar = new TuiCalendarPO(inputDate.calendar);
         });
 
         test('Click any day after `Until today` was selected', async ({page}) => {
             await tuiGoto(page, 'components/input-date/API?items$=1');
 
             await inputDate.textfield.click();
-            await inputDate.itemButton.click();
+            await calendar.itemButton.click();
 
             await inputDate.textfield.click();
-            await calendar.clickOnCalendarDay(1);
+
+            const [calendarSheet] = await calendar.getCalendarSheets();
+
+            await calendarSheet?.clickOnDay(1);
 
             await expect(inputDate.textfield).toHaveScreenshot('01-input-date.png');
         });

diff --git a/projects/demo-playwright/utils/page-objects/calendar-sheet.po.ts b/projects/demo-playwright/utils/page-objects/calendar-sheet.po.ts
@@ -0,0 +1,25 @@
+import type {Locator} from '@playwright/test';
+
+export class TuiCalendarSheetPO {
+    constructor(private readonly host: Locator) {}
+
+    async getDays(): Promise<Locator[]> {
+        return this.host
+            .locator(
+                '[automation-id="tui-primitive-calendar__cell"], [automation-id="tui-primitive-calendar-mobile__cell"]',
+            )
+            .all();
+    }
+
+    async clickOnDay(day: number): Promise<void> {
+        const cells = await this.getDays();
+
+        for (const cell of cells) {
+            if ((await cell.textContent())?.trim() === day.toString()) {
+                await cell.click();
+
+                break;
+            }
+        }
+    }
+}
diff --git a/projects/demo-playwright/utils/page-objects/calendar.po.ts b/projects/demo-playwright/utils/page-objects/calendar.po.ts
@@ -1,19 +1,20 @@
 import {Locator} from '@playwright/test';
 
+import {TuiCalendarSheetPO} from './calendar-sheet.po';
+
 export class TuiCalendarPO {
-    constructor(private readonly host: Locator) {}
+    readonly itemButton: Locator = this.host
+        .page()
+        .locator('tui-dropdown tui-calendar ~ * button');
 
-    async getDays(): Promise<Locator[]> {
-        return this.host.locator('[automation-id="tui-primitive-calendar__cell"]').all();
-    }
+    constructor(private readonly host: Locator) {}
 
-    async clickOnCalendarDay(day: number): Promise<void> {
-        const cells = await this.getDays();
+    async getCalendarSheets(): Promise<TuiCalendarSheetPO[]> {
+        const locators = await this.host
+            .page()
+            .locator('tui-primitive-calendar, tui-primitive-calendar-mobile')
+            .all();
 
-        for (const cell of cells) {
-            if ((await cell.textContent())?.trim() === day.toString()) {
-                return cell.click();
-            }
-        }
+        return locators.map(x => new TuiCalendarSheetPO(x));
     }
 }
diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
@@ -1,5 +1,6 @@
 export * from './calendar.po';
 export * from './calendar-range.po';
+export * from './calendar-sheet.po';
 export * from './documentation-page.po';
 export * from './input-card.po';
 export * from './input-card-grouped.po';

diff --git a/projects/demo-playwright/utils/page-objects/input-date.po.ts b/projects/demo-playwright/utils/page-objects/input-date.po.ts
@@ -3,9 +3,6 @@ import {Locator} from '@playwright/test';
 export class TuiInputDatePO {
     readonly textfield: Locator = this.host.getByRole('textbox');
     readonly calendar: Locator = this.host.page().locator('tui-calendar');
-    readonly itemButton: Locator = this.host
-        .page()
-        .locator('tui-dropdown tui-calendar ~ * button');
 
     constructor(private readonly host: Locator) {}
 }