Skip to content

Commit 1e6522d

Browse files
PlamenaMitevaPlamenaMiteva
committed
test(date-range): adding two input date range tests #6271 
1 parent 4e757c7 commit 1e6522d

File tree

1 file changed

+150
-102
lines changed

1 file changed

+150
-102
lines changed

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

+150-102
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { IgxDateRangeComponent } from './igx-date-range.component';
22
import { ComponentFixture, async, TestBed, fakeAsync, tick } from '@angular/core/testing';
33
import { Component, OnInit, ViewChild, NgModule, DebugElement } from '@angular/core';
4-
import { IgxInputGroupModule } from '../input-group/index';
4+
import { IgxInputGroupModule} from '../input-group/index';
55
import { InteractionMode } from '../core/enums';
66
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
77
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -11,6 +11,12 @@ import { IgxButtonModule } from '../directives/button/button.directive';
1111
import { IgxDateRangeModule } from './igx-date-range.module';
1212
import { By } from '@angular/platform-browser';
1313
import { UIInteractions } from '../test-utils/ui-interactions.spec';
14+
import { configureTestSuite } from '../test-utils/configure-suite';
15+
import { HelperTestFunctions } from '../calendar/calendar-helper-utils';
16+
import { IgxDateTimeEditorModule } from '../directives/date-time-editor';
17+
18+
// The number of milliseconds in one day
19+
const ONE_DAY = 1000 * 60 * 60 * 24;
1420

1521
const CSS_CLASS_INPUT = 'igx-input-group__input';
1622
const CSS_CLASS_TOGGLE_BUTTON = 'igx-icon';
@@ -26,18 +32,22 @@ function getDatesInView(dates: DebugElement[]): DebugElement[] {
2632

2733
// tslint:disable: no-use-before-declare
2834
describe('IgxRangeDatePicker', () => {
35+
let fixture: ComponentFixture<any>;
2936
let calendarElement: DebugElement;
3037
let calendarWrapper: DebugElement;
31-
32-
// let singleInputRange: DateRangeSingleInputTestComponent;
33-
// let twoInputsRange: DateRangeTwoInputsTestComponent;
34-
let fixture: ComponentFixture<DateRangeTestComponent>;
35-
36-
beforeEach(async(() => {
37-
TestBed.configureTestingModule({
38-
imports: [DateRangeTestingModule]
39-
}).compileComponents();
40-
}));
38+
let dateRange: IgxDateRangeComponent;
39+
40+
/**
41+
* Formats a date to 'MM/dd/yyyy' string
42+
* @param date Date to be formatted
43+
*/
44+
function formatFullDate(date: Date): string {
45+
const year = `${date.getFullYear()}`.padStart(4, '0');
46+
const month = `${date.getMonth() + 1}`.padStart(2, '0');
47+
const day = `${date.getDate()}`.padStart(2, '0');
48+
const fullDate = [month, day, year].join('/');
49+
return fullDate;
50+
}
4151

4252
describe('Single Input', () => {
4353
beforeEach(fakeAsync(() => {
@@ -100,24 +110,115 @@ describe('IgxRangeDatePicker', () => {
100110
});
101111

102112
describe('Two Inputs', () => {
103-
it('Should update the start input on first date selection', () => {
104-
// TODO
113+
let startInput: DebugElement;
114+
let endInput: DebugElement;
115+
let calendarDays: DebugElement[];
116+
configureTestSuite();
117+
beforeAll(async(() => {
118+
TestBed.configureTestingModule({
119+
declarations: [
120+
DateRangeTestComponent,
121+
DateRangeTwoInputsTestComponent
122+
],
123+
imports: [IgxDateRangeModule, IgxDateTimeEditorModule, IgxInputGroupModule, FormsModule, NoopAnimationsModule]
124+
})
125+
.compileComponents();
126+
}));
127+
beforeEach(async () => {
128+
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
129+
fixture.detectChanges();
130+
dateRange = fixture.componentInstance.dateRange;
131+
startInput = fixture.debugElement.query(By.css('input'));
132+
endInput = fixture.debugElement.queryAll(By.css('input'))[1];
133+
calendarDays = fixture.debugElement.queryAll(By.css(HelperTestFunctions.DAY_CSSCLASS));
105134
});
106135

107-
it('Should update the end input on last date selection', () => {
108-
// TODO
136+
function selectDateRangeFromCalendar(startDateDay: number, dayRange: number) {
137+
const startDateDayElIndex = startDateDay - 1;
138+
const endDateDayElIndex = startDateDayElIndex + dayRange;
139+
dateRange.open();
140+
fixture.detectChanges();
141+
calendarDays[startDateDayElIndex].triggerEventHandler('click', UIInteractions.clickEvent);
142+
if (dayRange !== 0) {
143+
calendarDays[endDateDayElIndex].triggerEventHandler('click', UIInteractions.clickEvent);
144+
}
145+
dateRange.close();
146+
fixture.detectChanges();
147+
}
148+
149+
function verifyDateRange(startDate: Date, endDate: Date) {
150+
expect(dateRange.value.start).toEqual(startDate);
151+
expect(dateRange.value.end).toEqual(endDate);
152+
expect(startInput.nativeElement.value).toEqual(formatFullDate(startDate));
153+
expect(endInput.nativeElement.value).toEqual(formatFullDate(endDate));
154+
}
155+
156+
it('should assign start and end values correctly when selecting dates from the calendar', () => {
157+
fixture.componentInstance.mode = InteractionMode.DropDown;
158+
fixture.detectChanges();
159+
160+
let dayRange = 15;
161+
const today = new Date();
162+
let startDate = new Date(today.getFullYear(), today.getMonth(), 10, 0, 0, 0);
163+
let endDate = new Date(startDate);
164+
endDate.setDate(endDate.getDate() + dayRange);
165+
selectDateRangeFromCalendar(startDate.getDate(), dayRange);
166+
verifyDateRange(startDate, endDate);
167+
168+
dayRange = 13;
169+
startDate = new Date(today.getFullYear(), today.getMonth(), 6, 0, 0, 0);
170+
endDate = new Date(startDate);
171+
endDate.setDate(endDate.getDate() + dayRange);
172+
selectDateRangeFromCalendar(startDate.getDate(), dayRange);
173+
verifyDateRange(startDate, endDate);
109174
});
110175

111-
it('Should assign start and end input values correctly when selecting dates from the calendar', () => {
112-
// TODO
176+
it('should assign start and end values correctly when selecting dates in reversed order', () => {
177+
fixture.componentInstance.mode = InteractionMode.DropDown;
178+
fixture.detectChanges();
179+
180+
const dayRange = 10;
181+
const today = new Date();
182+
const startDate = new Date(today.getFullYear(), today.getMonth(), 10, 0, 0, 0);
183+
const endDate = new Date(startDate);
184+
endDate.setDate(endDate.getDate() + dayRange);
185+
selectDateRangeFromCalendar(startDate.getDate(), dayRange);
186+
verifyDateRange(startDate, endDate);
113187
});
114188

115-
it('Should clear end input if start and end input have values and a new selection is made', () => {
116-
// TODO
189+
it('should apply selection to start and end date when single date is selected', () => {
190+
fixture.componentInstance.mode = InteractionMode.DropDown;
191+
fixture.detectChanges();
192+
193+
const today = new Date();
194+
const date = new Date(today.getFullYear(), today.getMonth(), 4, 0, 0, 0);
195+
196+
selectDateRangeFromCalendar(date.getDate(), 0);
197+
verifyDateRange(date, date);
117198
});
118199

119-
it('Should do a range selection if a date is selected and "Today" is pressed', () => {
120-
// TODO
200+
it('should update inputs correctly on first and last date selection', () => {
201+
const today = new Date();
202+
const startDate = new Date(today.getFullYear(), today.getMonth(), 1, 0, 0, 0);
203+
const endDate = new Date(today.getFullYear(), today.getMonth() + 2, 0, 0, 0, 0);
204+
const differenceMs = Math.abs(startDate.getTime() - endDate.getTime());
205+
const dayRange = Math.round(differenceMs / ONE_DAY);
206+
selectDateRangeFromCalendar(startDate.getDate(), dayRange);
207+
verifyDateRange(startDate, endDate);
208+
});
209+
210+
it('should assign start and end values correctly when selecting through API', () => {
211+
let startDate = new Date(2020, 10, 8, 0, 0, 0);
212+
let endDate = new Date(2020, 11, 8, 0, 0, 0);
213+
dateRange.selectRange(startDate, endDate);
214+
fixture.detectChanges();
215+
verifyDateRange(startDate, endDate);
216+
217+
startDate = new Date(2003, 5, 18, 0, 0, 0);
218+
endDate = new Date(2003, 8, 18, 0, 0, 0);
219+
dateRange.selectRange(startDate, endDate);
220+
fixture.detectChanges();
221+
verifyDateRange(startDate, endDate);
121222
});
122223
});
123224

@@ -155,66 +256,27 @@ describe('IgxRangeDatePicker', () => {
155256
}));
156257
}); // Use component instance
157258

158-
describe('Templates ', () => {});
259+
describe('Templates ', () => { });
159260

160261
describe('Calendar UI', () => {
161-
162-
it('Should select today properly', fakeAsync(() => {
163-
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
164-
fixture.componentInstance.mode = InteractionMode.DropDown;
165-
fixture.detectChanges();
166-
167-
fixture.componentInstance.dateRange.open();
168-
tick();
169-
fixture.detectChanges();
170-
171-
const button = fixture.debugElement.query(By.css('.igx-button--flat'));
172-
UIInteractions.clickElement(button);
173-
tick();
174-
fixture.detectChanges();
175-
176-
// expect((fixture.componentInstance.dateRange.value as Date[]).length).toBe(1);
177-
}));
178-
179-
it('Should select a range when pressing "today" if a start date is selected', fakeAsync(() => {
180-
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
181-
fixture.componentInstance.mode = InteractionMode.DropDown;
182-
fixture.detectChanges();
183-
184-
fixture.componentInstance.dateRange.open();
185-
tick();
186-
fixture.detectChanges();
187-
188-
const button = fixture.debugElement.query(By.css('.igx-button--flat'));
189-
const dates = getDatesInView(fixture.debugElement.queryAll(By.css('.igx-calendar__date')));
190-
191-
UIInteractions.clickElement(dates[0].nativeElement);
192-
tick();
193-
fixture.detectChanges();
194-
// expect((fixture.componentInstance.dateRange.value as Date[]).length).toBe(1);
195-
196-
UIInteractions.clickElement(button);
197-
tick();
198-
fixture.detectChanges();
199-
// expect((fixture.componentInstance.dateRange.value as Date[]).length).toBeGreaterThan(1);
262+
configureTestSuite();
263+
beforeAll(async(() => {
264+
TestBed.configureTestingModule({
265+
declarations: [
266+
DateRangeTestComponent,
267+
DateRangeTwoInputsTestComponent
268+
],
269+
imports: [IgxDateRangeModule, IgxDateTimeEditorModule, IgxInputGroupModule, FormsModule, NoopAnimationsModule]
270+
})
271+
.compileComponents();
200272
}));
201-
202-
it('Should open the calendar on mouse click', fakeAsync(() => {
273+
beforeEach(async () => {
203274
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
204-
fixture.componentInstance.mode = InteractionMode.DropDown;
205275
fixture.detectChanges();
276+
dateRange = fixture.componentInstance.dateRange;
277+
});
206278

207-
spyOn(fixture.componentInstance.dateRange.onOpened, 'emit');
208-
209-
const startInput = fixture.debugElement.queryAll(By.css('.igx-input-group'))[1];
210-
UIInteractions.clickElement(startInput.nativeElement);
211-
tick();
212-
fixture.detectChanges();
213-
214-
expect(fixture.componentInstance.dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
215-
}));
216-
217-
it('Should move focus to the calendar on open in dropdown mode', fakeAsync(() => {
279+
it('should move focus to the calendar on open in dropdown mode', fakeAsync(() => {
218280
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
219281
fixture.componentInstance.mode = InteractionMode.DropDown;
220282
fixture.detectChanges();
@@ -226,7 +288,7 @@ describe('IgxRangeDatePicker', () => {
226288
expect(document.activeElement.textContent.trim()).toMatch(new Date().getDate().toString());
227289
}));
228290

229-
it('Should move focus to the calendar on open in dialog mode', fakeAsync(() => {
291+
it('should move focus to the calendar on open in dialog mode', fakeAsync(() => {
230292
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
231293
fixture.componentInstance.mode = InteractionMode.Dialog;
232294
fixture.detectChanges();
@@ -238,7 +300,7 @@ describe('IgxRangeDatePicker', () => {
238300
expect(document.activeElement.textContent.trim()).toMatch(new Date().getDate().toString());
239301
}));
240302

241-
it('Should move the focus to start input on close (date range with two inputs)', fakeAsync(() => {
303+
it('should move the focus to start input on close (date range with two inputs)', fakeAsync(() => {
242304
fixture = TestBed.createComponent(DateRangeTwoInputsTestComponent);
243305
fixture.componentInstance.mode = InteractionMode.DropDown;
244306
fixture.detectChanges();
@@ -259,7 +321,7 @@ describe('IgxRangeDatePicker', () => {
259321
expect(document.activeElement).toHaveClass('igx-input-group__input');
260322
}));
261323

262-
it('Should move the focus to the single input on close', fakeAsync(() => {
324+
it('should move the focus to the single input on close', fakeAsync(() => {
263325
fixture = TestBed.createComponent(DateRangeSingleInputTestComponent);
264326
fixture.componentInstance.mode = InteractionMode.DropDown;
265327
fixture.detectChanges();
@@ -328,32 +390,18 @@ export class DateRangeTestComponent implements OnInit {
328390
@Component({
329391
selector: 'igx-date-range-two-inputs-test',
330392
template: `
331-
<igx-input-group>
332-
<input #fullName igxInput type="text">
333-
<label for="fullName" igxLabel>Full Name</label>
334-
<igx-prefix>
335-
<igx-icon>person</igx-icon>
336-
</igx-prefix>
337-
</igx-input-group>
338-
<igx-date-range [doneButtonText]="doneButtonText" [mode]="mode">
339-
<igx-input-group>
340-
<input #startDate igxDateRangeStart igxInput type="text">
341-
<label for="startDate" igxLabel>Check-in Date</label>
342-
<igx-prefix>
343-
<igx-icon>today</igx-icon>
344-
</igx-prefix>
345-
</igx-input-group>
346-
<igx-input-group>
347-
<input #endDate igxDateRangeEnd igxInput type="text">
348-
<label for="endDate" igxLabel>Check-out Date</label>
349-
<igx-prefix>
350-
<igx-icon>today</igx-icon>
351-
</igx-prefix>
352-
</igx-input-group>
353-
</igx-date-range>
393+
<igx-date-range [mode]="mode">
394+
<igx-date-start>
395+
<input igxInput igxDateTimeEditor type="text" [(ngModel)]="startDate" required>
396+
</igx-date-start>
397+
<igx-date-end>
398+
<input igxInput igxDateTimeEditor type="text" [(ngModel)]="endDate" required>
399+
</igx-date-end>
400+
</igx-date-range>
354401
`
355402
})
356-
export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent { }
403+
export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent {
404+
}
357405

358406
@Component({
359407
selector: 'igx-date-range-single-input-test',

0 commit comments

Comments
 (0)