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 index da1585501bf22..1bc71f83a0a02 100644 --- 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 @@ -160,6 +160,39 @@ test.describe('InputDateRange', () => { '07-item-and-calendar-interactions.png', ); }); + + test('Prevent selection of range with disabled days', async ({page}) => { + const calendar = new TuiCalendarPO( + inputDateRange.calendarRange.locator('tui-calendar'), + ); + + const getCellState = async (cell: Locator): Promise => + cell.getAttribute('data-state'); + + const getDaysState = async (): Promise> => + Promise.all((await calendar.getDays()).map(getCellState)); + + await tuiGoto(page, 'components/input-date-range/API?disabledItemHandler$=1'); + + await inputDateRange.textfield.click(); + + // check disabled items length before day selection + expect( + (await getDaysState()).filter(state => state === 'disabled'), + ).toHaveLength(20); + + await calendar.clickOnCalendarDay(7); + + // check range which includes disabled days + // range should have only 2 enabled items + expect( + (await getDaysState()).filter(state => state !== 'disabled'), + ).toHaveLength(2); + + await expect(example).toHaveScreenshot( + '09-prevent-disabled-days-selection.png', + ); + }); }); test.describe('Examples', () => {