chore(demo-playwright): InputDate add test click any day after `Unt…

…il today` (#9588)
taiga-family · Oct 24, 2024 · 0465485 · 0465485
2 parents 865f27f + 24d5ba7
commit 0465485
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 30 deletions.
diff --git a/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts b/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts
@@ -1,5 +1,10 @@
 import {DemoRoute} from '@demo/routes';
-import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {
+    TuiCalendarPO,
+    TuiDocumentationPagePO,
+    tuiGoto,
+    TuiInputDatePO,
+} from '@demo-playwright/utils';
 import type {Locator} from '@playwright/test';
 import {expect, test} from '@playwright/test';
 
@@ -50,8 +55,11 @@ test.describe('InputDate', () => {
     });
 
     test.describe('API', () => {
-        let api: TuiDocumentationPagePO;
-        let input: Locator;
+        let documentationPage: TuiDocumentationPagePO;
+        let example: Locator;
+
+        let inputDate!: TuiInputDatePO;
+        let calendar!: TuiCalendarPO;
 
         test.use({
             viewport: {
@@ -61,10 +69,12 @@ test.describe('InputDate', () => {
         });
 
         test.beforeEach(({page}) => {
-            api = new TuiDocumentationPagePO(page);
-            input = api.apiPageExample.getByTestId(
-                'tui-primitive-textfield__native-input',
-            );
+            documentationPage = new TuiDocumentationPagePO(page);
+            example = documentationPage.apiPageExample;
+
+            inputDate = new TuiInputDatePO(example.locator('tui-input-date'));
+
+            calendar = new TuiCalendarPO(inputDate.calendar);
         });
 
         ['s', 'm', 'l'].forEach((size) => {
@@ -74,8 +84,8 @@ test.describe('InputDate', () => {
                     `/components/input-date/API?tuiTextfieldSize=${size}`,
                 );
 
-                await input.click();
-                await api.prepareBeforeScreenshot();
+                await inputDate.textfield.click();
+                await documentationPage.prepareBeforeScreenshot();
 
                 await expect(page).toHaveScreenshot(`02-01-input-date-${size}.png`);
 
@@ -92,60 +102,84 @@ test.describe('InputDate', () => {
         test('maximum month less than current month', async ({page}) => {
             await tuiGoto(page, `${DemoRoute.InputDate}/API?max$=1`);
 
-            await input.scrollIntoViewIfNeeded();
-            await input.click();
-            await api.prepareBeforeScreenshot();
+            await inputDate.textfield.scrollIntoViewIfNeeded();
+            await inputDate.textfield.click();
+            await documentationPage.prepareBeforeScreenshot();
 
             await expect(page).toHaveScreenshot('03-input-date.png');
         });
 
         test('minimum month more than current month', async ({page}) => {
             await tuiGoto(page, `${DemoRoute.InputDate}/API?min$=3`);
 
-            await input.scrollIntoViewIfNeeded();
-            await input.click();
-            await api.prepareBeforeScreenshot();
+            await inputDate.textfield.scrollIntoViewIfNeeded();
+            await inputDate.textfield.click();
+            await documentationPage.prepareBeforeScreenshot();
 
             await expect(page).toHaveScreenshot('04-input-date.png');
         });
 
         test.describe('Invalid date cases', () => {
             test('does not accept day > 31', async ({page}) => {
                 await tuiGoto(page, `${DemoRoute.InputDate}/API`);
-                await input.scrollIntoViewIfNeeded();
-                await input.focus();
+                await inputDate.textfield.scrollIntoViewIfNeeded();
+                await inputDate.textfield.focus();
                 await page.keyboard.type('35');
 
-                await expect(input).toHaveJSProperty('selectionStart', 1);
-                await expect(input).toHaveJSProperty('selectionEnd', 1);
-                await expect(input).toHaveScreenshot('05-input-date.png');
+                await expect(inputDate.textfield).toHaveJSProperty('selectionStart', 1);
+                await expect(inputDate.textfield).toHaveJSProperty('selectionEnd', 1);
+                await expect(inputDate.textfield).toHaveScreenshot('05-input-date.png');
             });
 
             test('does not accept month > 12', async ({page}) => {
                 await tuiGoto(page, `${DemoRoute.InputDate}/API`);
-                await input.scrollIntoViewIfNeeded();
-                await input.focus();
+                await inputDate.textfield.scrollIntoViewIfNeeded();
+                await inputDate.textfield.focus();
                 await page.keyboard.type('1715');
 
-                await expect(input).toHaveJSProperty('selectionStart', '17.1'.length);
-                await expect(input).toHaveJSProperty('selectionEnd', '17.1'.length);
-                await expect(input).toHaveScreenshot('06-input-date.png');
+                await expect(inputDate.textfield).toHaveJSProperty(
+                    'selectionStart',
+                    '17.1'.length,
+                );
+                await expect(inputDate.textfield).toHaveJSProperty(
+                    'selectionEnd',
+                    '17.1'.length,
+                );
+                await expect(inputDate.textfield).toHaveScreenshot('06-input-date.png');
             });
 
             test('Type 999999 => 09.09.9999', async ({page}) => {
                 await tuiGoto(page, `${DemoRoute.InputDate}/API`);
-                await input.scrollIntoViewIfNeeded();
-                await input.focus();
+                await inputDate.textfield.scrollIntoViewIfNeeded();
+                await inputDate.textfield.focus();
                 await page.keyboard.type('999999');
 
-                await expect(input).toHaveJSProperty(
+                await expect(inputDate.textfield).toHaveJSProperty(
                     'selectionStart',
                     '09.09.9999'.length,
                 );
-                await expect(input).toHaveJSProperty('selectionEnd', '09.09.9999'.length);
-                await expect(input).toHaveScreenshot('07-input-date.png');
+                await expect(inputDate.textfield).toHaveJSProperty(
+                    'selectionEnd',
+                    '09.09.9999'.length,
+                );
+                await expect(inputDate.textfield).toHaveScreenshot('07-input-date.png');
             });
         });
+
+        test('Click any day after `Until today` was selected', async ({page}) => {
+            await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`);
+
+            await inputDate.textfield.click();
+            await calendar.itemButton.click();
+
+            await inputDate.textfield.click();
+
+            const [calendarSheet] = await calendar.getCalendarSheets();
+
+            await calendarSheet?.clickOnDay(1);
+
+            await expect(inputDate.textfield).toHaveScreenshot('10-input-date.png');
+        });
     });
 
     test.describe('Mobile', () => {

diff --git a/projects/demo-playwright/utils/page-objects/calendar.po.ts b/projects/demo-playwright/utils/page-objects/calendar.po.ts
@@ -0,0 +1,20 @@
+import type {Locator} from '@playwright/test';
+
+import {TuiCalendarSheetPO} from './calendar-sheet.po';
+
+export class TuiCalendarPO {
+    public readonly itemButton: Locator = this.host
+        .page()
+        .locator('tui-dropdown tui-calendar ~ * button');
+
+    constructor(private readonly host: Locator) {}
+
+    public async getCalendarSheets(): Promise<TuiCalendarSheetPO[]> {
+        const locators = await this.host
+            .page()
+            .locator('tui-calendar-sheet, tui-mobile-calendar-sheet')
+            .all();
+
+        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,10 +1,12 @@
+export * from './calendar.po';
 export * from './calendar-range.po';
 export * from './calendar-sheet.po';
 export * from './combo-box.po';
 export * from './documentation-api-page.po';
 export * from './documentation-page.po';
 export * from './input-card.po';
 export * from './input-card-group.po';
+export * from './input-date.po';
 export * from './input-date-range.po';
 export * from './input-date-time.po';
 export * from './input-month.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
@@ -0,0 +1,8 @@
+import type {Locator} from '@playwright/test';
+
+export class TuiInputDatePO {
+    public readonly textfield: Locator = this.host.getByRole('textbox');
+    public readonly calendar: Locator = this.host.page().locator('tui-calendar');
+
+    constructor(private readonly host: Locator) {}
+}