Skip to content

Commit

Permalink
fix(legacy): InputDateRange double backspace to clear textfield (#9707
Browse files Browse the repository at this point in the history 
)

Co-authored-by: taiga-family-bot <[email protected]>
  • Loading branch information
@mdlufy @taiga-family-bot
mdlufy and taiga-family-bot authored Nov 12, 2024
1 parent 80b3257 commit c80cadc
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 5 deletions.
39 changes: 36 additions & 3 deletions projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
} from '../../../playwright.options';
import {
CHAR_NO_BREAK_SPACE,
TuiCalendarPO,
TuiCalendarSheetPO,
TuiDocumentationPagePO,
tuiGoto,
Expand All @@ -31,11 +32,16 @@ test.describe('InputDateRange', () => {
test.describe('API', () => {
let example!: Locator;

let calendar!: TuiCalendarPO;

test.beforeEach(() => {
example = documentationPage.apiPageExample;

inputDateRange = new TuiInputDateRangePO(
example.locator('tui-input-date-range'),
);

calendar = new TuiCalendarPO(inputDateRange.calendar);
});

['s', 'm', 'l'].forEach((size) => {
Expand All @@ -44,7 +50,7 @@ test.describe('InputDateRange', () => {
}) => {
await tuiGoto(
page,
`components/input-date-range/API?tuiTextfieldSize=${size}`,
`${DemoRoute.InputDateRange}/API?tuiTextfieldSize=${size}`,
);

await inputDateRange.textfield.click();
Expand Down Expand Up @@ -171,7 +177,7 @@ test.describe('InputDateRange', () => {

await tuiGoto(
page,
'components/input-date-range/API?items$=1&sandboxExpanded=true',
`${DemoRoute.InputDateRange}/API?items$=1&sandboxExpanded=true`,
);

await inputDateRange.textfield.click();
Expand All @@ -191,7 +197,7 @@ test.describe('InputDateRange', () => {
});

test('Calendar shows end of period, when selected any range', async ({page}) => {
await tuiGoto(page, 'components/input-date-range/API?items$=1');
await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1`);

await inputDateRange.textfield.click();
await inputDateRange.selectItem(0);
Expand All @@ -201,6 +207,33 @@ test.describe('InputDateRange', () => {
await expect(example).toHaveScreenshot('09-calendar-shows-end-of-period.png');
});

test('Press backspace to remove item, textfield is empty', async ({page}) => {
await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1`);

await inputDateRange.textfield.click();
await calendar.itemButton.first().click();

await inputDateRange.textfield.focus();
await inputDateRange.textfield.press('Backspace');

await expect(inputDateRange.textfield).toHaveValue('');
await expect(inputDateRange.textfield).toHaveScreenshot(
'10-input-date-range.png',
);
});

test('Enter item date, it converts to item name', async ({page}) => {
await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1`);

await inputDateRange.textfield.focus();
await inputDateRange.textfield.fill('25.09.2020 - 25.09.2020');

await expect(inputDateRange.textfield).toHaveValue('Today');
await expect(inputDateRange.textfield).toHaveScreenshot(
'11-input-date-range.png',
);
});

test.describe('Mobile emulation', () => {
test.use({
viewport: {
Expand Down
6 changes: 5 additions & 1 deletion projects/legacy/components/input-date-range/input-date-range.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,12 @@ export class TuiInputDateRangeComponent
this.onOpenChange(true);
}

if (this.activePeriod) {
this.nativeValue = '';
}

this.value =
value.length === DATE_RANGE_FILLER_LENGTH
value.length === DATE_RANGE_FILLER_LENGTH && !this.activePeriod
? TuiDayRange.normalizeParse(value, this.dateFormat.mode)
: null;

Expand Down
73 changes: 72 additions & 1 deletion projects/legacy/components/input-date-range/test/input-date-range.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type {DebugElement, Type} from '@angular/core';
import {ChangeDetectionStrategy, Component, Optional, ViewChild} from '@angular/core';
import type {ComponentFixture} from '@angular/core/testing';
import {TestBed} from '@angular/core/testing';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {By} from '@angular/platform-browser';
import {
RANGE_SEPARATOR_CHAR,
Expand All @@ -16,6 +16,7 @@ import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
import {
TUI_DATE_RANGE_VALUE_TRANSFORMER,
TUI_DATE_VALUE_TRANSFORMER,
tuiCreateDefaultDayRangePeriods,
TuiDayRangePeriod,
} from '@taiga-ui/kit';
import {
Expand All @@ -30,6 +31,7 @@ describe('InputDateRangeComponent', () => {
@Component({
standalone: true,
imports: [
FormsModule,
ReactiveFormsModule,
TuiInputDateRangeModule,
TuiRoot,
Expand All @@ -44,6 +46,7 @@ describe('InputDateRangeComponent', () => {
[min]="min"
[readOnly]="readOnly"
[tuiTextfieldCleaner]="cleaner"
[(ngModel)]="value"
></tui-input-date-range>
</tui-root>
`,
Expand All @@ -61,6 +64,11 @@ describe('InputDateRangeComponent', () => {
),
);

public value: TuiDayRange | [Date, Date] | null = new TuiDayRange(
TuiDay.currentLocal().append({day: -2}),
TuiDay.currentLocal().append({day: -2}),
);

public cleaner = false;

public readOnly = false;
Expand Down Expand Up @@ -202,6 +210,69 @@ describe('InputDateRangeComponent', () => {
expect(component.open).toBe(true);
});
});

describe('With items', () => {
beforeEach(() => {
testComponent.items = tuiCreateDefaultDayRangePeriods();
});

it('when entering item date, input shows named date', async () => {
const today = TuiDay.currentLocal();

inputPO.sendText(
`${today.toString()}${RANGE_SEPARATOR_CHAR}${today.toString()}`,
);

await fixture.whenStable();

expect(inputPO.value).toBe('Today');
});

it('when control value updated with item date, input shows named date', async () => {
const today = TuiDay.currentLocal();

testComponent.control.setValue(new TuiDayRange(today, today));
fixture.detectChanges();

await fixture.whenStable();

expect(inputPO.value).toBe('Today');
});

it('when ngModel value updated with item date, input shows named date', async () => {
const today = TuiDay.currentLocal();

testComponent.value = new TuiDayRange(today, today);
fixture.detectChanges();

await fixture.whenStable();

expect(inputPO.value).toBe('Today');
});

it('when selected item date via calendar, input shows named date', async () => {
inputPO.sendText('');

fixture.detectChanges();

const [leftCalendar] = getCalendars();

expect(leftCalendar).toBeTruthy();

if (leftCalendar) {
getCalendarCell(
leftCalendar,
TuiDay.currentLocal().day,
)?.nativeElement?.click();
}

fixture.detectChanges();

await fixture.whenStable();

expect(inputPO.value).toBe('Today');
});
});
});

describe('InputDateRangeComponent + TUI_DATE_FORMAT="MDY" + TUI_DATE_SEPARATOR="/"', () => {
Expand Down

0 comments on commit c80cadc

Please sign in to comment.