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 index 988831b2aebe..283843ae420c 100644 --- 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,9 +102,9 @@ 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'); }); @@ -102,9 +112,9 @@ test.describe('InputDate', () => { 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'); }); @@ -112,40 +122,64 @@ test.describe('InputDate', () => { 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 new file mode 100644 index 000000000000..af10c5f2e800 --- /dev/null +++ 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 { + 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 index ff2d2f702817..e3808d3ce9eb 100644 --- a/projects/demo-playwright/utils/page-objects/index.ts +++ b/projects/demo-playwright/utils/page-objects/index.ts @@ -1,3 +1,4 @@ +export * from './calendar.po'; export * from './calendar-range.po'; export * from './calendar-sheet.po'; export * from './combo-box.po'; @@ -5,6 +6,7 @@ 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 new file mode 100644 index 000000000000..df59f891c556 --- /dev/null +++ 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) {} +}