Skip to content

Commit d2c3096

Browse files
wnvkownvko
committed
test(date-picker): add test for reactive form, #6471 
1 parent 57017ef commit d2c3096

File tree

1 file changed

+95
-86
lines changed

1 file changed

+95
-86
lines changed

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

+95-86
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ViewChild, ElementRef } from '@angular/core';
22
import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
3-
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
3+
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
66
import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
@@ -206,7 +206,7 @@ describe('IgxDatePicker', () => {
206206
expect(input).toEqual(document.activeElement);
207207
}));
208208

209-
it('When a modal datepicker is closed via outside click, the focus should remain on the input',
209+
it('When a modal datepicker is closed via outside click, the focus should remain on the input',
210210
fakeAsync(() => {
211211
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
212212
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
@@ -230,7 +230,7 @@ describe('IgxDatePicker', () => {
230230
expect(input).toEqual(document.activeElement);
231231
}));
232232

233-
it('When datepicker is closed upon selecting a date, the focus should remain on the input',
233+
it('When datepicker is closed upon selecting a date, the focus should remain on the input',
234234
fakeAsync(() => {
235235
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
236236
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
@@ -301,97 +301,97 @@ describe('IgxDatePicker', () => {
301301
});
302302

303303
it('When datepicker in "dropdown" mode is closed via outside click, the input should not receive focus',
304-
fakeAsync(() => {
305-
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
306-
fixture.detectChanges();
304+
fakeAsync(() => {
305+
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
306+
fixture.detectChanges();
307307

308-
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
309-
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
310-
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
308+
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
309+
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
310+
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
311311

312-
expect(overlayToggle.length).toEqual(0);
312+
expect(overlayToggle.length).toEqual(0);
313313

314-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
315-
flush();
316-
fixture.detectChanges();
314+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
315+
flush();
316+
fixture.detectChanges();
317317

318-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
319-
expect(overlayToggle[0]).not.toBeNull();
320-
expect(overlayToggle[0]).not.toBeUndefined();
318+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
319+
expect(overlayToggle[0]).not.toBeNull();
320+
expect(overlayToggle[0]).not.toBeUndefined();
321321

322-
const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
323-
dummyInput.focus();
324-
dummyInput.click();
325-
tick();
326-
fixture.detectChanges();
322+
const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
323+
dummyInput.focus();
324+
dummyInput.click();
325+
tick();
326+
fixture.detectChanges();
327327

328-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
329-
expect(overlayToggle[0]).toEqual(undefined);
330-
expect(input).not.toEqual(document.activeElement);
331-
expect(dummyInput).toEqual(document.activeElement);
332-
}));
328+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
329+
expect(overlayToggle[0]).toEqual(undefined);
330+
expect(input).not.toEqual(document.activeElement);
331+
expect(dummyInput).toEqual(document.activeElement);
332+
}));
333333

334334
it('When datepicker in "dropdown" mode, should focus input on user interaction with Today btn, Cancel btn, Enter Key, Escape key',
335-
fakeAsync(() => {
336-
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
337-
fixture.detectChanges();
338-
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
339-
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
340-
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
341-
expect(overlayToggle.length).toEqual(0);
335+
fakeAsync(() => {
336+
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
337+
fixture.detectChanges();
338+
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
339+
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
340+
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
341+
expect(overlayToggle.length).toEqual(0);
342342

343-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
344-
flush();
345-
fixture.detectChanges();
346-
const buttons = document.getElementsByClassName('igx-button--flat');
347-
expect(buttons.length).toEqual(2);
343+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
344+
flush();
345+
fixture.detectChanges();
346+
const buttons = document.getElementsByClassName('igx-button--flat');
347+
expect(buttons.length).toEqual(2);
348348

349-
// Today btn
350-
const todayBtn = buttons[1] as HTMLElement;
351-
expect(todayBtn.innerText).toBe('Today');
352-
todayBtn.click();
353-
tick();
354-
fixture.detectChanges();
355-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
356-
expect(overlayToggle[0]).toEqual(undefined);
357-
expect(input).toEqual(document.activeElement);
349+
// Today btn
350+
const todayBtn = buttons[1] as HTMLElement;
351+
expect(todayBtn.innerText).toBe('Today');
352+
todayBtn.click();
353+
tick();
354+
fixture.detectChanges();
355+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
356+
expect(overlayToggle[0]).toEqual(undefined);
357+
expect(input).toEqual(document.activeElement);
358358

359-
// Cancel btn
360-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
361-
flush();
362-
fixture.detectChanges();
363-
const cancelBtn = buttons[0] as HTMLElement;
364-
expect(cancelBtn.innerText).toBe('Cancel');
365-
cancelBtn.click();
366-
tick();
367-
fixture.detectChanges();
368-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
369-
expect(overlayToggle[0]).toEqual(undefined);
370-
expect(input).toEqual(document.activeElement);
359+
// Cancel btn
360+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
361+
flush();
362+
fixture.detectChanges();
363+
const cancelBtn = buttons[0] as HTMLElement;
364+
expect(cancelBtn.innerText).toBe('Cancel');
365+
cancelBtn.click();
366+
tick();
367+
fixture.detectChanges();
368+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
369+
expect(overlayToggle[0]).toEqual(undefined);
370+
expect(input).toEqual(document.activeElement);
371371

372-
// Enter key
373-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
374-
flush();
375-
fixture.detectChanges();
376-
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
377-
tick();
378-
fixture.detectChanges();
379-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
380-
expect(overlayToggle[0]).toEqual(undefined);
381-
expect(input).toEqual(document.activeElement);
372+
// Enter key
373+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
374+
flush();
375+
fixture.detectChanges();
376+
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
377+
tick();
378+
fixture.detectChanges();
379+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
380+
expect(overlayToggle[0]).toEqual(undefined);
381+
expect(input).toEqual(document.activeElement);
382382

383-
// Esc key
384-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
385-
flush();
386-
fixture.detectChanges();
387-
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
388-
tick();
389-
fixture.detectChanges();
383+
// Esc key
384+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
385+
flush();
386+
fixture.detectChanges();
387+
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
388+
tick();
389+
fixture.detectChanges();
390390

391-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
392-
expect(overlayToggle[0]).toEqual(undefined);
393-
expect(input).toEqual(document.activeElement);
394-
}));
391+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
392+
expect(overlayToggle[0]).toEqual(undefined);
393+
expect(input).toEqual(document.activeElement);
394+
}));
395395

396396
it('Datepicker week start day (Monday)', () => {
397397
const fixture = TestBed.createComponent(IgxDatePickerWithWeekStartComponent);
@@ -1260,7 +1260,7 @@ describe('IgxDatePicker', () => {
12601260
}));
12611261
});
12621262

1263-
describe('Reactive form', () => {
1263+
fdescribe('Reactive form', () => {
12641264
let fixture: ComponentFixture<IgxDatePickerReactiveFormComponent>;
12651265
let datePicker: IgxDatePickerComponent;
12661266

@@ -1270,6 +1270,15 @@ describe('IgxDatePicker', () => {
12701270
fixture.detectChanges();
12711271
});
12721272

1273+
it('Should properly initialize when used as a form control in reactive form', fakeAsync(() => {
1274+
expect(datePicker).toBeDefined();
1275+
expect(datePicker.value).toEqual(new Date(2000, 10, 15));
1276+
1277+
const datePickerFormReference = fixture.componentInstance.reactiveForm.controls.datePickerReactive;
1278+
expect(datePickerFormReference).toBeDefined();
1279+
expect(datePickerFormReference.status).toEqual('VALID');
1280+
}));
1281+
12731282
// Bug #6025 Date picker does not disable in reactive form
12741283
it('Should disable when form is disabled', fakeAsync(() => {
12751284
fixture.detectChanges();
@@ -1282,6 +1291,7 @@ describe('IgxDatePicker', () => {
12821291
expect(datePicker.collapsed).toBeFalsy();
12831292

12841293
datePicker.closeCalendar();
1294+
tick();
12851295
fixture.detectChanges();
12861296

12871297
formGroup.disable();
@@ -1443,11 +1453,10 @@ export class IgxDatePickerOpeningComponent {
14431453

14441454
@Component({
14451455
template: `
1446-
<form [formGroup]="reactiveForm">
1447-
<p>
1456+
<form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">
14481457
<igx-date-picker formControlName="datePickerReactive" #datePickerReactive></igx-date-picker>
1449-
</p>
1450-
</form>
1458+
<button type="submit" [disabled]="!reactiveForm.valid">Submit</button>
1459+
</form>
14511460
`
14521461
})
14531462
class IgxDatePickerReactiveFormComponent {
@@ -1457,7 +1466,7 @@ class IgxDatePickerReactiveFormComponent {
14571466

14581467
constructor(fb: FormBuilder) {
14591468
this.reactiveForm = fb.group({
1460-
datePickerReactive: new FormControl(''),
1469+
datePickerReactive: [new Date(2000, 10, 15)],
14611470
});
14621471
}
14631472
onSubmitReactive() { }

0 commit comments

Comments
 (0)