fix(kit): CalendarRange shows last available month when max and ite…

…ms set (#9147)
taiga-family · Sep 24, 2024 · 14d644f · 14d644f
2 parents 702803c + 6d3665a
commit 14d644f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts
@@ -11,12 +11,19 @@ test.describe('CalendarRange', () => {
     let calendarRange!: TuiCalendarRangePO;
     let documentationPage!: TuiDocumentationPagePO;
 
+    test.use({
+        viewport: {width: 650, height: 650},
+    });
+
     test.beforeEach(async ({page}) => {
         await tuiGoto(page, DemoRoute.CalendarRange, {
             date: new Date(2020, 8, 25),
         });
 
         documentationPage = new TuiDocumentationPagePO(page);
+        example = documentationPage.apiPageExample;
+
+        calendarRange = new TuiCalendarRangePO(example.locator('tui-calendar-range'));
     });
 
     test.describe('Examples', () => {
@@ -57,4 +64,12 @@ test.describe('CalendarRange', () => {
             );
         });
     });
+
+    test.describe('API', () => {
+        test('Maximum month when items not empty', async ({page}) => {
+            await tuiGoto(page, `${DemoRoute.CalendarRange}/API?items$=1&max$=4`);
+
+            await expect(example).toHaveScreenshot('06-maximum-month-with-items.png');
+        });
+    });
 });
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
@@ -97,6 +97,18 @@ test.describe('InputDateRange', () => {
             });
         });
 
+        test('Maximum month when items not empty', async ({page}) => {
+            await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1&max$=7`);
+            await inputDateRange.textfield.click();
+
+            await expect(inputDateRange.textfield).toHaveScreenshot(
+                '06-textfield-maximum-month-with-items.png',
+            );
+            await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                '06-calendar-maximum-month-with-items.png',
+            );
+        });
+
         test.describe('prevents changes if you enter an invalid date', () => {
             test('day > 31', async ({page}) => {
                 await tuiGoto(page, `${DemoRoute.InputDateRange}/API`);

diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -256,7 +256,9 @@ export class TuiCalendarRange implements OnInit, OnChanges {
         if (this.value) {
             this.defaultViewedMonth = this.items.length ? this.value.to : this.value.from;
         } else if (this.max && this.defaultViewedMonth.monthSameOrAfter(this.max)) {
-            this.defaultViewedMonth = this.max.append({month: -1});
+            this.defaultViewedMonth = this.items.length
+                ? this.max
+                : this.max.append({month: -1});
         } else if (this.min && this.defaultViewedMonth.monthSameOrBefore(this.min)) {
             this.defaultViewedMonth = this.min;
         }

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
@@ -258,6 +258,18 @@ describe('rangeCalendarComponent', () => {
             expect(component.defaultViewedMonth).toEqual(minDate);
         });
 
+        it('when max and items not empty, defaultViewedMonth is max', () => {
+            const maxDate = TuiDay.currentLocal();
+
+            testComponent.max = maxDate;
+            fixture.detectChanges();
+
+            component.ngOnInit();
+            fixture.detectChanges();
+
+            expect(component.defaultViewedMonth).toEqual(maxDate);
+        });
+
         it('isItemActive returns true when value is set to today after being changed to yesterday', () => {
             const today = TuiDay.currentLocal();
             const yesterday = today.append({day: -1});