From 07a99ce56a45c7fb5364d628bcbf4105085fc025 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Sun, 4 Aug 2024 15:19:34 +0300
Subject: [PATCH] fix(kit): fix `CalendarRange` switch month with maxLength

---
 .../kit/calendar-range/calendar-range.spec.ts | 30 +++++++++++++++++++
 .../utils/page-objects/calendar-range.po.ts   | 12 ++++++++
 .../utils/page-objects/index.ts               |  1 +
 .../primitive-calendar-range.component.ts     |  2 +-
 .../primitive-calendar-range.template.html    |  2 +-
 ...primitive-calendar-range.component.spec.ts |  9 ++++++
 6 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts
 create mode 100644 projects/demo-playwright/utils/page-objects/calendar-range.po.ts

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
new file mode 100644
index 000000000000..12e856d928f1
--- /dev/null
+++ b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts
@@ -0,0 +1,30 @@
+import {
+    TuiCalendarRangePO,
+    TuiDocumentationPagePO,
+    tuiGoto,
+} from '@demo-playwright/utils';
+import {expect, Locator, test} from '@playwright/test';
+
+const {describe, beforeEach} = test;
+
+describe('CalendarRange', () => {
+    describe('API', () => {
+        let documentationPage: TuiDocumentationPagePO;
+        let example: Locator;
+        let calendarRange: TuiCalendarRangePO;
+
+        beforeEach(({page}) => {
+            documentationPage = new TuiDocumentationPagePO(page);
+            example = documentationPage.apiPageExample;
+            calendarRange = new TuiCalendarRangePO(example.locator('tui-calendar-range'));
+        });
+
+        test('When click on right calendar, months not switch', async ({page}) => {
+            await tuiGoto(page, 'components/calendar-range/API?maxLength$=0');
+            await calendarRange.clickRightCalendar();
+
+            await documentationPage.prepareApiPageBeforeScreenshot();
+            await expect(page).toHaveScreenshot('calendar-range-max-length-click.png');
+        });
+    });
+});
diff --git a/projects/demo-playwright/utils/page-objects/calendar-range.po.ts b/projects/demo-playwright/utils/page-objects/calendar-range.po.ts
new file mode 100644
index 000000000000..dc1d373c6f56
--- /dev/null
+++ b/projects/demo-playwright/utils/page-objects/calendar-range.po.ts
@@ -0,0 +1,12 @@
+import {Locator} from '@playwright/test';
+
+export class TuiCalendarRangePO {
+    constructor(private readonly host: Locator) {}
+
+    async clickRightCalendar(): Promise<void> {
+        return this.host
+            .locator('[automation-id="tui-calendar__calendar"]')
+            .last()
+            .click();
+    }
+}
diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
index 85e65eba88e3..4924e3a6a281 100644
--- a/projects/demo-playwright/utils/page-objects/index.ts
+++ b/projects/demo-playwright/utils/page-objects/index.ts
@@ -1,4 +1,5 @@
 export * from './calendar.po';
+export * from './calendar-range.po';
 export * from './documentation-page.po';
 export * from './input-card.po';
 export * from './input-card-grouped.po';
diff --git a/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts b/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts
index 5759a0ec9e05..e05159e0a046 100644
--- a/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts
+++ b/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts
@@ -138,7 +138,7 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
             return this.max;
         }
 
-        if (month.monthBefore(this.min)) {
+        if (month.monthSameOrBefore(this.min)) {
             return this.min.append({month: 1});
         }
 
diff --git a/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.template.html b/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.template.html
index e40f763679f9..2bc7c8642e6a 100644
--- a/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.template.html
+++ b/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.template.html
@@ -18,7 +18,7 @@
     [max]="max"
     [min]="min"
     [minViewedMonth]="cappedUserViewedMonthFirst | tuiMapper: monthOffset : 1"
-    [month]="userViewedMonthSecond.monthSameOrBefore(min) ? (min | tuiMapper: monthOffset : 1) : userViewedMonthSecond"
+    [month]="userViewedMonthSecond"
     [showAdjacent]="false"
     [value]="value"
     [(hoveredItem)]="hoveredItem"
diff --git a/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts b/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts
index c45d4b848961..04ecbf884d90 100644
--- a/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts
+++ b/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts
@@ -96,6 +96,15 @@ describe('PrimitiveRangeCalendar component', () => {
             component.ngOnInit();
             expect(component.userViewedMonthSecond).toEqual(minDate.append({month: 1}));
         });
+
+        it('When min later than given month, return next month after min', () => {
+            const minDate = TuiDay.currentLocal().append({month: 1});
+
+            component.min = minDate;
+            component.ngOnInit();
+
+            expect(component.userViewedMonthSecond).toEqual(minDate.append({month: 1}));
+        });
     });
 
     describe('cappedUserViewedMonthSecond', () => {