From aa00bcd6d33b4b81c6b8cee5388ed35d81977759 Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Thu, 29 Jun 2017 11:23:45 -0700 Subject: [PATCH] Added tests for cascade and removed async testing. --- src/demo-app/datepicker/datepicker-demo.html | 6 +-- src/lib/datepicker/datepicker-toggle.ts | 2 +- src/lib/datepicker/datepicker.spec.ts | 51 +++++++++++++++----- src/lib/datepicker/datepicker.ts | 5 +- 4 files changed, 44 insertions(+), 20 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html index 51cf86d3965f..0aab603d2ba2 100644 --- a/src/demo-app/datepicker/datepicker-demo.html +++ b/src/demo-app/datepicker/datepicker-demo.html @@ -28,7 +28,7 @@

Options

Result

- + Input disabled, datepicker popup enabled

- { constructor(public _intl: MdDatepickerIntl) {} _open(event: Event): void { - if (this.datepicker && !this._disabled) { + if (this.datepicker && !this.disabled) { this.datepicker.open(); event.stopPropagation(); } diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 6a99fefb8ee2..9cf6af79d00f 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -75,27 +75,28 @@ describe('MdDatepicker', () => { fixture.detectChanges(); })); - it('open non-touch should open popup', async(() => { + it('open non-touch should open popup', () => { expect(document.querySelector('.cdk-overlay-pane')).toBeNull(); testComponent.datepicker.open(); fixture.detectChanges(); expect(document.querySelector('.cdk-overlay-pane')).not.toBeNull(); - })); + }); - it('open touch should open dialog', async(() => { + it('open touch should open dialog', () => { testComponent.touch = true; fixture.detectChanges(); + expect(document.querySelector('md-dialog-container')).toBeNull(); testComponent.datepicker.open(); fixture.detectChanges(); expect(document.querySelector('md-dialog-container')).not.toBeNull(); - })); + }); - it('open in disabled mode should not open the calendar', async(() => { + it('open in disabled mode should not open the calendar', () => { testComponent.disabled = true; fixture.detectChanges(); @@ -107,9 +108,22 @@ describe('MdDatepicker', () => { expect(document.querySelector('.cdk-overlay-pane')).toBeNull(); expect(document.querySelector('md-dialog-container')).toBeNull(); - })); + }); + + it('disabled datepicker input should open the calendar if datepicker is enabled', () => { + testComponent.datepicker.disabled = false; + testComponent.datepickerInput.disabled = true; + fixture.detectChanges(); + + expect(document.querySelector('.cdk-overlay-pane')).toBeNull(); + + testComponent.datepicker.open(); + fixture.detectChanges(); + + expect(document.querySelector('.cdk-overlay-pane')).not.toBeNull(); + }); - it('close should close popup', async(() => { + it('close should close popup', () => { testComponent.datepicker.open(); fixture.detectChanges(); @@ -123,7 +137,7 @@ describe('MdDatepicker', () => { fixture.whenStable().then(() => { expect(parseInt(getComputedStyle(popup).height as string)).toBe(0); }); - })); + }); it('should close the popup when pressing ESCAPE', () => { testComponent.datepicker.open(); @@ -142,7 +156,7 @@ describe('MdDatepicker', () => { .toBe(true, 'Expected default ESCAPE action to be prevented.'); }); - it('close should close dialog', async(() => { + it('close should close dialog', () => { testComponent.touch = true; fixture.detectChanges(); @@ -157,9 +171,9 @@ describe('MdDatepicker', () => { fixture.whenStable().then(() => { expect(document.querySelector('md-dialog-container')).toBeNull(); }); - })); + }); - it('setting selected should update input and close calendar', async(() => { + it('setting selected should update input and close calendar', () => { testComponent.touch = true; fixture.detectChanges(); @@ -177,7 +191,7 @@ describe('MdDatepicker', () => { expect(document.querySelector('md-dialog-container')).toBeNull(); expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2)); }); - })); + }); it('startAt should fallback to input value', () => { expect(testComponent.datepicker.startAt).toEqual(new Date(2020, JAN, 1)); @@ -456,6 +470,19 @@ describe('MdDatepicker', () => { expect(document.querySelector('md-dialog-container')).not.toBeNull(); }); + it('should not open calendar when toggle clicked if datepicker is disabled', () => { + testComponent.datepicker.disabled = true; + fixture.detectChanges(); + + expect(document.querySelector('md-dialog-container')).toBeNull(); + + let toggle = fixture.debugElement.query(By.css('button')); + dispatchMouseEvent(toggle.nativeElement, 'click'); + fixture.detectChanges(); + + expect(document.querySelector('md-dialog-container')).toBeNull(); + }); + it('should set the `button` type on the trigger to prevent form submissions', () => { let toggle = fixture.debugElement.query(By.css('button')).nativeElement; expect(toggle.getAttribute('type')).toBe('button'); diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index cf6a3af1d5eb..ea9d315ff3d9 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -217,10 +217,7 @@ export class MdDatepicker implements OnDestroy { /** Open the calendar. */ open(): void { - if (this.opened) { - return; - } - if (this.disabled) { + if (this.opened || this.disabled) { return; } if (!this._datepickerInput) {