diff --git a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts index 692cf08b9ebb..4bdc3c9d4304 100644 --- a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts +++ b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts @@ -64,6 +64,24 @@ test.describe('CalendarRange', () => { '05-calendar-range-correct-display-defaults-items-and-values.png', ); }); + + test.describe('With value', () => { + test('Month switching via chevron', async () => { + example = documentationPage.getExample('#with-value'); + calendarRange = new TuiCalendarRangePO( + example.locator('tui-calendar-range'), + ); + + const getPreviousMonthChevron = (): Locator => + example.locator('tui-spin-button > button').first(); + + await getPreviousMonthChevron().click(); + + await expect(example).toHaveScreenshot( + '07-calendar-range-with-value-click-chevron.png', + ); + }); + }); }); test.describe('API', () => { diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 10c3e811fb09..fd1e8de3aa2e 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -202,7 +202,7 @@ export class TuiCalendarRange implements OnInit, OnChanges { } protected onMonthChange(month: TuiMonth): void { - this.defaultViewedMonth = month; + this.month = month; } protected onDayClick(day: TuiDay): void { diff --git a/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts index 537626fc5234..647c0d4a2206 100644 --- a/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts +++ b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts @@ -362,6 +362,19 @@ describe('rangeCalendarComponent', () => { expect(component.defaultViewedMonth.toString()).toBe(defaultMonth.toString()); }); + + it('if value selected, updating defaultViewedMonth via chevron change viewed month', () => { + testComponent.value = new TuiDayRange( + TuiDay.currentLocal().append({month: 1}), + TuiDay.currentLocal().append({month: 1}), + ); + fixture.detectChanges(); + + component['onMonthChange'](updatedMonth); + fixture.detectChanges(); + + expect(component.defaultViewedMonth.toString()).toBe(updatedMonth.toString()); + }); }); function getCalendar(): DebugElement | null {