fix(addon-mobile): InputDateRange throws error on single date selec…

…tion (#9411)
taiga-family · Oct 10, 2024 · 93c08d4 · 93c08d4
1 parent d0577d6
commit 93c08d4
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 28 deletions.
diff --git a/...ts/addon-mobile/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.ts b/...ts/addon-mobile/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.ts
@@ -131,11 +131,13 @@ export class TuiMobileCalendarDropdown {
     }
 
     protected confirm(value: any): void {
+        const normalizedValue = this.range ? this.selectedPeriod : value;
+
         if (this.control) {
-            this.control.value = value;
+            this.control.value = normalizedValue;
         }
 
-        this.observer?.next(value);
+        this.observer?.next(normalizedValue);
         this.close();
     }
 

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
@@ -2,33 +2,42 @@ import {DemoRoute} from '@demo/routes';
 import type {Locator} from '@playwright/test';
 import {expect, test} from '@playwright/test';
 
+import {
+    TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
+    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
+    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
+} from '../../../playwright.options';
 import {
     CHAR_NO_BREAK_SPACE,
-    TuiCalendarPO,
+    TuiCalendarSheetPO,
     TuiDocumentationPagePO,
     tuiGoto,
     TuiInputDateRangePO,
+    TuiMobileCalendarPO,
 } from '../../../utils';
 
 test.describe('InputDateRange', () => {
-    let example!: Locator;
     let inputDateRange!: TuiInputDateRangePO;
     let documentationPage!: TuiDocumentationPagePO;
 
     test.use({
         viewport: {width: 650, height: 650},
     });
 
-    test.beforeEach(async ({page}) => {
-        await tuiGoto(page, DemoRoute.InputDateRange);
-
+    test.beforeEach(({page}) => {
         documentationPage = new TuiDocumentationPagePO(page);
-        example = documentationPage.apiPageExample;
-
-        inputDateRange = new TuiInputDateRangePO(example.locator('tui-input-date-range'));
     });
 
     test.describe('API', () => {
+        let example!: Locator;
+
+        test.beforeEach(() => {
+            example = documentationPage.apiPageExample;
+            inputDateRange = new TuiInputDateRangePO(
+                example.locator('tui-input-date-range'),
+            );
+        });
+
         ['s', 'm', 'l'].forEach((size) => {
             test(`correct filler display for size ${size.toUpperCase()}`, async ({
                 page,
@@ -43,7 +52,7 @@ test.describe('InputDateRange', () => {
                 await expect(inputDateRange.textfield).toHaveScreenshot(
                     `01-textfield-size-${size}-empty.png`,
                 );
-                await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                await expect(inputDateRange.calendar).toHaveScreenshot(
                     `01-calendar-size-${size}-empty.png`,
                 );
 
@@ -52,7 +61,7 @@ test.describe('InputDateRange', () => {
                 await expect(inputDateRange.textfield).toHaveScreenshot(
                     `02-textfield-size-${size}-set-day.png`,
                 );
-                await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                await expect(inputDateRange.calendar).toHaveScreenshot(
                     `02-calendar-size-${size}-set-day.png`,
                 );
 
@@ -61,7 +70,7 @@ test.describe('InputDateRange', () => {
                 await expect(inputDateRange.textfield).toHaveScreenshot(
                     `03-textfield-size-${size}-set-from-date.png`,
                 );
-                await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                await expect(inputDateRange.calendar).toHaveScreenshot(
                     `03-calendar-size-${size}-set-from-date.png`,
                 );
 
@@ -70,7 +79,7 @@ test.describe('InputDateRange', () => {
                 await expect(inputDateRange.textfield).toHaveScreenshot(
                     `04-textfield-size-${size}-set-to-date.png`,
                 );
-                await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                await expect(inputDateRange.calendar).toHaveScreenshot(
                     `04-calendar-size-${size}-set-to-date.png`,
                 );
             });
@@ -83,7 +92,7 @@ test.describe('InputDateRange', () => {
             await expect(inputDateRange.textfield).toHaveScreenshot(
                 '05-textfield-maximum-month.png',
             );
-            await expect(inputDateRange.calendarRange).toHaveScreenshot(
+            await expect(inputDateRange.calendar).toHaveScreenshot(
                 '05-calendar-maximum-month.png',
             );
         });
@@ -104,7 +113,7 @@ test.describe('InputDateRange', () => {
             await expect(inputDateRange.textfield).toHaveScreenshot(
                 '06-textfield-maximum-month-with-items.png',
             );
-            await expect(inputDateRange.calendarRange).toHaveScreenshot(
+            await expect(inputDateRange.calendar).toHaveScreenshot(
                 '06-calendar-maximum-month-with-items.png',
             );
         });
@@ -156,8 +165,8 @@ test.describe('InputDateRange', () => {
         });
 
         test('Select from [items] => select date range from calendar', async ({page}) => {
-            const calendar = new TuiCalendarPO(
-                inputDateRange.calendarRange.locator('tui-calendar'),
+            const calendarSheet = new TuiCalendarSheetPO(
+                inputDateRange.calendar.locator('tui-calendar-sheet'),
             );
 
             await tuiGoto(
@@ -171,7 +180,7 @@ test.describe('InputDateRange', () => {
             await expect(inputDateRange.textfield).toHaveValue('Today');
 
             await inputDateRange.textfield.click();
-            await calendar.clickOnCalendarDay(21);
+            await calendarSheet.clickOnDay(21);
 
             await expect(inputDateRange.textfield).toHaveValue(
                 `21.09.2020${CHAR_NO_BREAK_SPACE}–${CHAR_NO_BREAK_SPACE}25.09.2020`,
@@ -191,9 +200,45 @@ test.describe('InputDateRange', () => {
 
             await expect(example).toHaveScreenshot('09-calendar-shows-end-of-period.png');
         });
+
+        test.describe('Mobile emulation', () => {
+            test.use({
+                viewport: {
+                    width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
+                    height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
+                },
+                userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
+            });
+
+            let mobileCalendar!: TuiMobileCalendarPO;
+
+            test.beforeEach(() => {
+                mobileCalendar = new TuiMobileCalendarPO(inputDateRange.calendar);
+            });
+
+            test('Selection of only single date produces range with the same start and end', async ({
+                page,
+            }) => {
+                await tuiGoto(page, `${DemoRoute.InputDateRange}/API`);
+                await inputDateRange.textfieldIcon.click();
+
+                const [calendarSheet] = await mobileCalendar.getCalendarSheets();
+
+                await calendarSheet?.clickOnDay(17);
+                await mobileCalendar.confirmButton.click();
+
+                await expect(inputDateRange.textfield).toHaveValue(
+                    `17.08.2020${CHAR_NO_BREAK_SPACE}–${CHAR_NO_BREAK_SPACE}17.08.2020`,
+                );
+            });
+        });
     });
 
     test.describe('Examples', () => {
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, DemoRoute.InputDateRange);
+        });
+
         test('Select second same range => after close/open calendar displays selected period displays correctly', async () => {
             const example = documentationPage.getExample('#custom-period');
 
@@ -209,7 +254,7 @@ test.describe('InputDateRange', () => {
             expect(await inputDateRange.itemHasCheckmark(2)).toBeTruthy();
 
             await expect(inputDateRange.textfield).toHaveValue('Yet another yesterday');
-            await expect(inputDateRange.calendarRange).toHaveScreenshot(
+            await expect(inputDateRange.calendar).toHaveScreenshot(
                 '08-calendar-correct-selected-period-after-close-open.png',
             );
         });

diff --git a/...ywright/utils/page-objects/calendar.po.ts → ...t/utils/page-objects/calendar-sheet.po.ts b/...ywright/utils/page-objects/calendar.po.ts → ...t/utils/page-objects/calendar-sheet.po.ts
@@ -1,13 +1,17 @@
 import type {Locator} from '@playwright/test';
 
-export class TuiCalendarPO {
+export class TuiCalendarSheetPO {
     constructor(private readonly host: Locator) {}
 
     public async getDays(): Promise<Locator[]> {
-        return this.host.locator('[automation-id="tui-calendar-sheet__cell"]').all();
+        return this.host
+            .locator(
+                '[automation-id="tui-calendar-sheet__cell"], [automation-id="tui-primitive-calendar-mobile__cell"]',
+            )
+            .all();
     }
 
-    public async clickOnCalendarDay(day: number): Promise<void> {
+    public async clickOnDay(day: number): Promise<void> {
         const cells = await this.getDays();
 
         for (const cell of cells) {

diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
@@ -1,5 +1,5 @@
-export * from './calendar.po';
 export * from './calendar-range.po';
+export * from './calendar-sheet.po';
 export * from './combo-box.po';
 export * from './documentation-api-page.po';
 export * from './documentation-page.po';
@@ -14,6 +14,7 @@ export * from './input-range.po';
 export * from './input-slider.po';
 export * from './input-tag.po';
 export * from './input-time.po';
+export * from './mobile-calendar.po';
 export * from './multi-select.po';
 export * from './range.po';
 export * from './select.po';

diff --git a/projects/demo-playwright/utils/page-objects/input-date-range.po.ts b/projects/demo-playwright/utils/page-objects/input-date-range.po.ts
@@ -3,18 +3,22 @@ import {expect} from '@playwright/test';
 
 export class TuiInputDateRangePO {
     public readonly textfield: Locator = this.host.getByRole('textbox');
-    public readonly calendarRange: Locator = this.host
+    public readonly textfieldIcon: Locator = this.host.getByTestId(
+        'tui-input-date-range__icon',
+    );
+
+    public readonly calendar: Locator = this.host
         .page()
-        .locator('tui-calendar-range');
+        .locator('tui-calendar-range, tui-mobile-calendar');
 
-    public readonly items = this.calendarRange.locator(
+    public readonly items = this.calendar.locator(
         '[automation-id="tui-calendar-range__menu"]',
     );
 
     constructor(private readonly host: Locator) {}
 
     public async getItems(): Promise<Locator[]> {
-        const dataList = this.calendarRange.locator(
+        const dataList = this.calendar.locator(
             '[automation-id="tui-calendar-range__menu"]',
         );
 

diff --git a/projects/demo-playwright/utils/page-objects/mobile-calendar.po.ts b/projects/demo-playwright/utils/page-objects/mobile-calendar.po.ts
@@ -0,0 +1,18 @@
+import {TuiCalendarSheetPO} from '@demo-playwright/utils';
+import type {Locator} from '@playwright/test';
+
+export class TuiMobileCalendarPO {
+    public cancelButton = this.host.getByTestId('tui-mobile-calendar__cancel');
+    public confirmButton = this.host.getByTestId('tui-mobile-calendar__confirm');
+
+    constructor(private readonly host: Locator) {}
+
+    public async getCalendarSheets(): Promise<TuiCalendarSheetPO[]> {
+        const locators = await this.host
+            .page()
+            .locator('tui-calendar-sheet, tui-mobile-calendar-sheet')
+            .all();
+
+        return locators.map((x) => new TuiCalendarSheetPO(x));
+    }
+}