add tests

angular · May 26, 2017 · eac2720 · eac2720
1 parent d8f9ce0
commit eac2720
Showing 1 changed file with 96 additions and 0 deletions.
diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -30,6 +30,7 @@ describe('MdDatepicker', () => {
           ReactiveFormsModule,
         ],
         declarations: [
+          DatepickerWithChangeAndInputEvents,
           DatepickerWithFilterAndValidation,
           DatepickerWithFormControl,
           DatepickerWithMinAndMax,
@@ -486,6 +487,81 @@ describe('MdDatepicker', () => {
         expect(cells[1].classList).not.toContain('mat-calendar-body-disabled');
       });
     });
+
+    describe('datepicker with change and input events', () => {
+      let fixture: ComponentFixture<DatepickerWithChangeAndInputEvents>;
+      let testComponent: DatepickerWithChangeAndInputEvents;
+      let inputEl: HTMLInputElement;;
+
+      beforeEach(async(() => {
+        fixture = TestBed.createComponent(DatepickerWithChangeAndInputEvents);
+        fixture.detectChanges();
+
+        testComponent = fixture.componentInstance;
+        inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+        spyOn(testComponent, 'onChange');
+        spyOn(testComponent, 'onInput');
+        spyOn(testComponent, 'onDateChange');
+        spyOn(testComponent, 'onDateInput');
+      }));
+
+      afterEach(async(() => {
+        testComponent.datepicker.close();
+        fixture.detectChanges();
+      }));
+
+      it('should fire input and dateInput events when user types input', () => {
+        expect(testComponent.onChange).not.toHaveBeenCalled();
+        expect(testComponent.onDateChange).not.toHaveBeenCalled();
+        expect(testComponent.onInput).not.toHaveBeenCalled();
+        expect(testComponent.onDateInput).not.toHaveBeenCalled();
+
+        dispatchFakeEvent(inputEl, 'input');
+        fixture.detectChanges();
+
+        expect(testComponent.onChange).not.toHaveBeenCalled();
+        expect(testComponent.onDateChange).not.toHaveBeenCalled();
+        expect(testComponent.onInput).toHaveBeenCalled();
+        expect(testComponent.onDateInput).toHaveBeenCalled();
+      });
+
+      it('should fire change and dateChange events when user commits typed input', () => {
+        expect(testComponent.onChange).not.toHaveBeenCalled();
+        expect(testComponent.onDateChange).not.toHaveBeenCalled();
+        expect(testComponent.onInput).not.toHaveBeenCalled();
+        expect(testComponent.onDateInput).not.toHaveBeenCalled();
+
+        dispatchFakeEvent(inputEl, 'change');
+        fixture.detectChanges();
+
+        expect(testComponent.onChange).toHaveBeenCalled();
+        expect(testComponent.onDateChange).toHaveBeenCalled();
+        expect(testComponent.onInput).not.toHaveBeenCalled();
+        expect(testComponent.onDateInput).not.toHaveBeenCalled();
+      });
+
+      it('should fire dateChange and dateInput events when user selects calendar date', () => {
+        expect(testComponent.onChange).not.toHaveBeenCalled();
+        expect(testComponent.onDateChange).not.toHaveBeenCalled();
+        expect(testComponent.onInput).not.toHaveBeenCalled();
+        expect(testComponent.onDateInput).not.toHaveBeenCalled();
+
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        expect(document.querySelector('md-dialog-container')).not.toBeNull();
+
+        let cells = document.querySelectorAll('.mat-calendar-body-cell');
+        dispatchMouseEvent(cells[0], 'click');
+        fixture.detectChanges();
+
+        expect(testComponent.onChange).not.toHaveBeenCalled();
+        expect(testComponent.onDateChange).toHaveBeenCalled();
+        expect(testComponent.onInput).not.toHaveBeenCalled();
+        expect(testComponent.onDateInput).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('with missing DateAdapter and MD_DATE_FORMATS', () => {
@@ -629,3 +705,23 @@ class DatepickerWithFilterAndValidation {
   date: Date;
   filter = (date: Date) => date.getDate() != 1;
 }
+
+
+@Component({
+  template: `
+    <input [mdDatepicker]="d" (change)="onChange()" (input)="onInput()"
+           (dateChange)="onDateChange()" (dateInput)="onDateInput()">
+    <md-datepicker #d [touchUi]="true"></md-datepicker>
+  `
+})
+class DatepickerWithChangeAndInputEvents {
+  @ViewChild('d') datepicker: MdDatepicker<Date>;
+
+  onChange() {}
+
+  onInput() {}
+
+  onDateChange() {}
+
+  onDateInput() {}
+}