fix(kit): InputDateTime does not change filler on dynamic change of…

… `[timeMode]` prop (#6891)
taiga-family · Feb 27, 2024 · 70e039f · 70e039f
1 parent c70e4f4
commit 70e039f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts b/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
@@ -2,6 +2,7 @@ import {
     TuiDocumentationPagePO,
     tuiGoto,
     TuiInputDateTimePO,
+    TuiSelectPO,
 } from '@demo-playwright/utils';
 import {expect, Locator, test} from '@playwright/test';
 
@@ -147,6 +148,29 @@ test.describe('InputDateTime', () => {
                 '15.11.2018, '.length,
             );
         });
+
+        test('change filler on dynamic change of [timeMode] prop', async ({page}) => {
+            await tuiGoto(page, 'components/input-date-time/API?timeMode=HH:MM');
+            await inputDateTime.textfield.focus();
+            await expect(inputDateTime.host).toHaveScreenshot('03-timeMode=HH:MM.png');
+
+            const timeModeRow = documentationPage.getRow('[timeMode]');
+            const timeModeSelect = new TuiSelectPO(
+                (await documentationPage.getSelect(timeModeRow)) as Locator,
+            );
+
+            await timeModeSelect.textfield.click();
+            await timeModeSelect.selectOptions([1]);
+            await inputDateTime.textfield.focus();
+            await expect(inputDateTime.host).toHaveScreenshot('03-timeMode=HH:MM.SS.png');
+
+            await timeModeSelect.textfield.click();
+            await timeModeSelect.selectOptions([2]);
+            await inputDateTime.textfield.focus();
+            await expect(inputDateTime.host).toHaveScreenshot(
+                '03-timeMode=HH:MM.SS.MSS.png',
+            );
+        });
     });
 
     test.describe('invalid date', () => {

diff --git a/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts b/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts
@@ -99,6 +99,10 @@ export class TuiDocumentationApiPagePO {
         }
     }
 
+    protected getRow(rowName: string): Locator {
+        return this.page.locator(`.t-table .t-row:has-text("${rowName}")`);
+    }
+
     protected async getRows(): Promise<Locator[]> {
         return this.page.locator('.t-table .t-row:not(.t-row_header)').all();
     }

diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
@@ -15,6 +15,7 @@ export * from './input-tag.po';
 export * from './input-time.po';
 export * from './multi-select.po';
 export * from './range.po';
+export * from './select.po';
 export * from './slider.po';
 export * from './table-pagination-page.po';
 export * from './textfield-with-data-list.po';
diff --git a/projects/demo-playwright/utils/page-objects/input-date-time.po.ts b/projects/demo-playwright/utils/page-objects/input-date-time.po.ts
@@ -4,7 +4,7 @@ export class TuiInputDateTimePO {
     protected readonly textfield: Locator = this.host.getByRole('textbox');
     protected readonly calendar: Locator = this.host.page().locator('tui-calendar');
 
-    constructor(private readonly host: Locator) {}
+    constructor(public readonly host: Locator) {}
 
     protected async selectDayViaCalendar(day: number): Promise<void> {
         return this.calendar

diff --git a/projects/kit/components/input-date-time/input-date-time.component.ts b/projects/kit/components/input-date-time/input-date-time.component.ts
@@ -53,7 +53,7 @@ import {
     tuiDateStreamWithTransformer,
     TuiInputDateOptions,
 } from '@taiga-ui/kit/tokens';
-import {combineLatest, map, Observable, takeUntil, timer} from 'rxjs';
+import {BehaviorSubject, combineLatest, map, Observable, takeUntil, timer} from 'rxjs';
 
 @Component({
     selector: 'tui-input-date-time',
@@ -78,6 +78,7 @@ export class TuiInputDateTimeComponent
     private readonly options = inject(TUI_INPUT_DATE_OPTIONS);
     private readonly textfieldSize = inject(TUI_TEXTFIELD_SIZE);
     private month: TuiMonth | null = null;
+    private readonly timeMode$ = new BehaviorSubject<TuiTimeMode>('HH:MM');
     protected readonly timeTexts$ = inject(TUI_TIME_TEXTS);
     protected readonly dateTexts$ = inject(TUI_DATE_TEXTS);
     protected override readonly valueTransformer = inject(
@@ -98,7 +99,13 @@ export class TuiInputDateTimeComponent
     public defaultActiveYearMonth = TuiMonth.currentLocal();
 
     @Input()
-    public timeMode: TuiTimeMode = 'HH:MM';
+    public set timeMode(value: TuiTimeMode) {
+        this.timeMode$.next(value);
+    }
+
+    public get timeMode(): TuiTimeMode {
+        return this.timeMode$.value;
+    }
 
     protected open = false;
 
@@ -110,8 +117,13 @@ export class TuiInputDateTimeComponent
                 changeDateSeparator(dateTexts[this.dateFormat], this.dateSeparator),
             ),
         ),
-        this.timeTexts$.pipe(map(texts => texts[this.timeMode])),
-    ]).pipe(map(fillers => this.getDateTimeString(...fillers)));
+        this.timeTexts$,
+        this.timeMode$,
+    ]).pipe(
+        map(([dateFiller, timeTexts, timeMode]) =>
+            this.getDateTimeString(dateFiller, timeTexts[timeMode]),
+        ),
+    );
 
     protected readonly dateFormat = inject(TUI_DATE_FORMAT);
     protected readonly dateSeparator = inject(TUI_DATE_SEPARATOR);