fix(kit): CalendarRange not switch month with selected value (#9695)

taiga-family · Nov 6, 2024 · 0e5f250 · 0e5f250
1 parent 755d517
commit 0e5f250
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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 {