Skip to content

Commit 8b07053

Browse files
Ivan KitanovIvan Kitanov
Ivan Kitanov
authored and
Ivan Kitanov
committed
chore(dateRange): Adding tests new tests and refactoring existing ones
1 parent 94ea035 commit 8b07053

File tree

2 files changed

+185
-13
lines changed

2 files changed

+185
-13
lines changed

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

Lines changed: 175 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ControlsFunction } from '../test-utils/controls-functions.spec';
99
import { UIInteractions } from '../test-utils/ui-interactions.spec';
1010
import { HelperTestFunctions } from '../test-utils/calendar-helper-utils';
1111
import { CancelableEventArgs } from '../core/utils';
12-
import { DateRange, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent } from './date-range-picker-inputs.common';
12+
import { CustomDateRange, DateRange, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent } from './date-range-picker-inputs.common';
1313
import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
1414
import { DateRangeType } from '../core/dates';
1515
import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api';
@@ -25,6 +25,7 @@ import { IgxIconComponent } from '../icon/icon.component';
2525
import { registerLocaleData } from "@angular/common";
2626
import localeJa from "@angular/common/locales/ja";
2727
import localeBg from "@angular/common/locales/bg";
28+
import { CalendarDay } from '../calendar/common/model';
2829

2930
// The number of milliseconds in one day
3031
const DEBOUNCE_TIME = 16;
@@ -1382,6 +1383,173 @@ describe('IgxDateRangePicker', () => {
13821383
expect((fixture.componentInstance.dateRange.value.end as Date).getTime()).toEqual(range.end.getTime());
13831384
}));
13841385
});
1386+
1387+
describe('Predefined ranges', ()=> {
1388+
const predefinedRangesLength = 4;
1389+
const today = CalendarDay.today.native;
1390+
const last7DaysEnd = CalendarDay.today.add('day', -7).native;
1391+
const last30DaysEnd = CalendarDay.today.add('day', -29).native;
1392+
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
1393+
const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
1394+
const startOfYear = new Date(today.getFullYear(), 0, 1);
1395+
const previousThreeDaysStart = CalendarDay.today.add('day', -3).native;
1396+
const nextThreeDaysEnd = CalendarDay.today.add('day', 3).native;
1397+
1398+
const customRanges: CustomDateRange[] = [
1399+
{
1400+
label: 'Previous Three Days',
1401+
dateRange: {
1402+
start: previousThreeDaysStart,
1403+
end: today,
1404+
},
1405+
},
1406+
{
1407+
label: 'Next Three Days',
1408+
dateRange: {
1409+
start: today,
1410+
end: nextThreeDaysEnd,
1411+
},
1412+
},
1413+
];
1414+
1415+
const dateRanges: DateRange[] = [
1416+
{start: last7DaysEnd, end: today},
1417+
{start: startOfMonth, end: endOfMonth},
1418+
{start: last30DaysEnd, end: today},
1419+
{start: startOfYear, end: today},
1420+
{start: previousThreeDaysStart, end: today},
1421+
{start: today, end: nextThreeDaysEnd},
1422+
];
1423+
1424+
beforeEach(() => {
1425+
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
1426+
fixture.detectChanges();
1427+
dateRange = fixture.componentInstance.dateRange;
1428+
1429+
1430+
});
1431+
1432+
it('should not render predefined area when usePredefinedRanges is false and no custom ranges are provided', () => {
1433+
dateRange.open();
1434+
fixture.detectChanges();
1435+
1436+
const predefinedArea = document.querySelector('igx-predefined-ranges-area');
1437+
const chips = document.querySelectorAll('igx-chip');
1438+
1439+
console.log(predefinedArea);
1440+
1441+
expect(predefinedArea).toBeNull();
1442+
expect(chips.length).toEqual(0);
1443+
1444+
});
1445+
1446+
it('should render predefined area when usePredefinedRanges is true and no custom ranges are provided', () => {
1447+
dateRange.usePredefinedRanges = true;
1448+
fixture.detectChanges();
1449+
1450+
dateRange.open();
1451+
fixture.detectChanges();
1452+
1453+
const predefinedArea = document.querySelector('igx-predefined-ranges-area');
1454+
const chips = document.querySelectorAll('igx-chip');
1455+
1456+
expect(predefinedArea).toBeDefined();
1457+
expect(chips.length).toEqual(predefinedRangesLength);
1458+
});
1459+
1460+
it('should render predefined area when only custom ranges are provided', () => {
1461+
dateRange.customRanges = customRanges;
1462+
fixture.detectChanges();
1463+
1464+
dateRange.open();
1465+
fixture.detectChanges();
1466+
1467+
const predefinedArea = document.querySelector('igx-predefined-ranges-area');
1468+
const chips = document.querySelectorAll('igx-chip');
1469+
1470+
expect(predefinedArea).toBeDefined();
1471+
expect(chips.length).toEqual(customRanges.length);
1472+
});
1473+
1474+
it('should render predefined area when usePredefinedRanges is true and custom ranges are provided', () => {
1475+
dateRange.usePredefinedRanges = true;
1476+
dateRange.customRanges = customRanges;
1477+
fixture.detectChanges();
1478+
1479+
dateRange.open();
1480+
fixture.detectChanges();
1481+
1482+
const predefinedArea = document.querySelector('igx-predefined-ranges-area');
1483+
const chips = document.querySelectorAll('igx-chip');
1484+
1485+
expect(predefinedArea).toBeDefined();
1486+
expect(chips.length).toEqual(predefinedRangesLength + customRanges.length);
1487+
});
1488+
1489+
it('should render predefined area and emit selection event when the user performs selection via chips', () => {
1490+
const selectionSpy = spyOn(dateRange as any, 'handleSelection').and.callThrough();
1491+
1492+
dateRange.usePredefinedRanges = true;
1493+
dateRange.customRanges = customRanges;
1494+
fixture.detectChanges();
1495+
1496+
dateRange.open();
1497+
fixture.detectChanges();
1498+
1499+
const predefinedArea = document.querySelector('igx-predefined-ranges-area');
1500+
const chips = document.querySelectorAll('igx-chip');
1501+
1502+
expect(predefinedArea).toBeDefined();
1503+
expect(chips.length).toEqual(predefinedRangesLength + customRanges.length);
1504+
1505+
1506+
chips.forEach((chip, i) => {
1507+
chip.dispatchEvent(UIInteractions.getMouseEvent('click'));
1508+
fixture.detectChanges();
1509+
expect(dateRange.value).toEqual(dateRanges[i]);
1510+
1511+
});
1512+
1513+
expect(selectionSpy).toHaveBeenCalledTimes(predefinedRangesLength + customRanges.length);
1514+
});
1515+
1516+
it('should use provided resourceStrings for labels when available', () => {
1517+
const strings: any = {
1518+
last7Days: 'Last 7 - localized',
1519+
currentMonth: 'Current Month - localized',
1520+
yearToDate: 'YTD - localized',
1521+
igx_date_range_picker_last7Days: 'Last 7 - localized',
1522+
igx_date_range_picker_currentMonth: 'Current Month - localized',
1523+
igx_date_range_picker_yearToDate: 'YTD - localized',
1524+
// last30Days omitted to test fallback
1525+
};
1526+
1527+
dateRange.resourceStrings = strings;
1528+
dateRange.usePredefinedRanges = true;
1529+
dateRange.customRanges = [];
1530+
fixture.detectChanges();
1531+
1532+
dateRange.open();
1533+
fixture.detectChanges();
1534+
1535+
const predefinedArea = document.querySelector('igx-predefined-ranges-area');
1536+
const chips = document.querySelectorAll('igx-chip');
1537+
1538+
expect(predefinedArea).toBeDefined();
1539+
expect(chips.length).toEqual(predefinedRangesLength);
1540+
const labels: string[] = [];
1541+
1542+
chips.forEach((chip) => {
1543+
labels.push(chip.textContent.trim());
1544+
});
1545+
1546+
expect(labels).toContain('Last 7 - localized');
1547+
expect(labels).toContain('Current Month - localized');
1548+
expect(labels).toContain('YTD - localized');
1549+
1550+
expect(labels).toContain('Last 30 Days');
1551+
});
1552+
});
13851553
});
13861554

13871555
describe('Rendering', () => {
@@ -1606,7 +1774,10 @@ export class DateRangeDefaultComponent extends DateRangeTestComponent {
16061774
[disabled]="disabled"
16071775
[(ngModel)]="range"
16081776
[inputFormat]="inputFormat"
1609-
[displayFormat]="displayFormat" required>
1777+
[displayFormat]="displayFormat"
1778+
required
1779+
[usePredefinedRanges]="usePredefinedRanges"
1780+
[customRanges]="customRanges">
16101781
<igx-date-range-start>
16111782
<igx-picker-toggle igxPrefix>
16121783
<igx-icon>calendar_view_day</igx-icon>
@@ -1637,6 +1808,8 @@ export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent {
16371808
public inputFormat: string;
16381809
public displayFormat: string;
16391810
public override disabled = false;
1811+
public usePredefinedRanges = false;
1812+
public customRanges: CustomDateRange[] = [];
16401813
}
16411814
@Component({
16421815
selector: 'igx-date-range-two-inputs-ng-model',

‎projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.spec.ts

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ describe('IgxPredefinedRangesAreaComponent', () => {
4747
fixture.detectChanges();
4848
});
4949

50-
it('renders no chips by default', () => {
50+
it('should render no chips by default', () => {
5151
expect(getChips().length).toBe(0);
5252
});
5353

54-
it('renders predefined ranges when usePredefinedRanges = true', () => {
54+
it('should render predefined ranges when usePredefinedRanges = true', () => {
5555
component.usePredefinedRanges = true;
5656
fixture.detectChanges();
5757

@@ -63,7 +63,7 @@ describe('IgxPredefinedRangesAreaComponent', () => {
6363
});
6464
});
6565

66-
it('renders predefined + custom ranges together', () => {
66+
it('should render predefined + custom ranges together', () => {
6767
component.usePredefinedRanges = true;
6868
component.customRanges = customRanges;
6969
fixture.detectChanges();
@@ -76,9 +76,9 @@ describe('IgxPredefinedRangesAreaComponent', () => {
7676
const text = (de.nativeElement as HTMLElement).innerText.trim();
7777
expect(text).toBe(ranges[i].label);
7878
});
79-
});
79+
});
8080

81-
it('renders only custom ranges when usePredefinedRanges = false', () => {
81+
it('should render only custom ranges when usePredefinedRanges = false', () => {
8282
component.usePredefinedRanges = false;
8383
component.customRanges = customRanges;
8484
fixture.detectChanges();
@@ -91,9 +91,9 @@ describe('IgxPredefinedRangesAreaComponent', () => {
9191
const text = (de.nativeElement as HTMLElement).innerText.trim();
9292
expect(text).toBe(ranges[i].label);
9393
});
94-
});
94+
});
9595

96-
it('emits selected range on chip click', () => {
96+
it('should emit selected range on chip click', () => {
9797
component.usePredefinedRanges = true;
9898
component.customRanges = customRanges;
9999
fixture.detectChanges();
@@ -109,9 +109,9 @@ describe('IgxPredefinedRangesAreaComponent', () => {
109109
fixture.detectChanges();
110110
expect(emitSpy).toHaveBeenCalledWith(ranges[i].dateRange);
111111
});
112-
});
112+
});
113113

114-
it('uses provided resourceStrings for labels when available', () => {
114+
it('should use provided resourceStrings for labels when available', () => {
115115
const strings: any = {
116116
last7Days: 'Last 7 - localized',
117117
currentMonth: 'Current Month - localized',
@@ -135,7 +135,7 @@ describe('IgxPredefinedRangesAreaComponent', () => {
135135
expect(labels).toContain('YTD - localized');
136136

137137
expect(labels).toContain('Last 30 Days');
138-
});
138+
});
139139
});
140140

141141
@Component({
@@ -155,5 +155,4 @@ class PredefinedRangesDefaultComponent {
155155

156156
@ViewChild(IgxPredefinedRangesAreaComponent, { static: true })
157157
public predefinedRanges!: IgxPredefinedRangesAreaComponent;
158-
159158
}

0 commit comments

Comments
 (0)