chore(demo-playwright): InputDate add test click any day after Until today

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,10 @@ 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 +68,11 @@ 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 +82,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 +100,81 @@ 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, 'components/input-date/API?items$=1');
+
+            await inputDate.textfield.click();
+            await inputDate.itemButton.click();
+
+            await inputDate.textfield.click();
+            await calendar.clickOnCalendarDay(1);
+
+            await expect(inputDate.textfield).toHaveScreenshot('10-input-date.png');
+        });
     });
 
     test.describe('Mobile', () => {

projects/demo-playwright/utils/page-objects/calendar.po.ts

@@ -0,0 +1,19 @@
+import type {Locator} from '@playwright/test';
+
+export class TuiCalendarPO {
+    constructor(private readonly host: Locator) {}
+
+    public async getDays(): Promise<Locator[]> {
+        return this.host.locator('[automation-id="tui-primitive-calendar__cell"]').all();
+    }
+
+    public async clickOnCalendarDay(day: number): Promise<void> {
+        const cells = await this.getDays();
+
+        for (const cell of cells) {
+            if ((await cell.textContent())?.trim() === day.toString()) {
+                return cell.click();
+            }
+        }
+    }
+}

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';

projects/demo-playwright/utils/page-objects/input-date.po.ts

@@ -0,0 +1,11 @@
+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');
+    public readonly itemButton: Locator = this.host
+        .page()
+        .locator('tui-dropdown tui-calendar ~ * button');
+
+    constructor(private readonly host: Locator) {}
+}