add unit tests

angular · Mar 10, 2017 · 205d7b3 · 205d7b3
1 parent 40fbfce
commit 205d7b3
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 1 deletion.
diff --git a/src/lib/core/datetime/simple-date.spec.ts b/src/lib/core/datetime/simple-date.spec.ts
@@ -37,4 +37,23 @@ describe('SimpleDate', () => {
     expect(new SimpleDate(2017, 0, 1).add({years: 1, months: 1, days: 1}))
         .toEqual(new SimpleDate(2018, 1, 2));
   });
+
+  it('clamps date at lower bound', () => {
+    let date = new SimpleDate(2017, 0, 1);
+    let lower = new SimpleDate(2018, 1, 2);
+    let upper = new SimpleDate(2019, 2, 3);
+    expect(date.clamp(lower, upper)).toEqual(lower);
+  });
+
+  it('clamps date at upper bound', () => {
+    let date = new SimpleDate(2020, 0, 1);
+    let lower = new SimpleDate(2018, 1, 2);
+    let upper = new SimpleDate(2019, 2, 3);
+    expect(date.clamp(lower, upper)).toEqual(upper);
+  });
+
+  it('clamp treats null as unbounded', () => {
+    let date = new SimpleDate(2017, 0, 1);
+    expect(date.clamp(null, null)).toEqual(date);
+  });
 });
diff --git a/src/lib/datepicker/calendar-table.spec.ts b/src/lib/datepicker/calendar-table.spec.ts
@@ -2,6 +2,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {MdCalendarCell, MdCalendarTable} from './calendar-table';
 import {By} from '@angular/platform-browser';
+import {SimpleDate} from '../core/datetime/simple-date';
 
 
 describe('MdCalendarTable', () => {
@@ -12,6 +13,7 @@ describe('MdCalendarTable', () => {
 
         // Test components.
         StandardCalendarTable,
+        CalendarTableWithDisabledCells,
       ],
     });
 
@@ -85,6 +87,38 @@ describe('MdCalendarTable', () => {
           .toContain('mat-calendar-table-selected', 'today should be selected');
     });
   });
+
+  describe('calendar table with disabled cells', () => {
+    let fixture: ComponentFixture<CalendarTableWithDisabledCells>;
+    let testComponent: CalendarTableWithDisabledCells;
+    let calendarTableNativeElement: Element;
+    let cellEls: NodeListOf<Element>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CalendarTableWithDisabledCells);
+      fixture.detectChanges();
+
+      let calendarTableDebugElement = fixture.debugElement.query(By.directive(MdCalendarTable));
+      calendarTableNativeElement = calendarTableDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+      cellEls = calendarTableNativeElement.querySelectorAll('.mat-calendar-table-cell');
+    });
+
+    it('should only allow selection of disabled cells when allowDisabledSelection is true', () => {
+      (cellEls[0] as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(testComponent.selected).toBeFalsy();
+
+      testComponent.allowDisabledSelection = true;
+      fixture.detectChanges();
+
+      (cellEls[0] as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(testComponent.selected).toBe(1);
+    });
+  });
 });
 
 
@@ -112,6 +146,23 @@ class StandardCalendarTable {
 }
 
 
+@Component({
+  template: `<md-calendar-table [rows]="rows"
+                                [allowDisabledSelection]="allowDisabledSelection"
+                                (selectedValueChange)="selected = $event">
+             </md-calendar-table>`
+})
+class CalendarTableWithDisabledCells {
+  rows = [[1, 2, 3, 4]].map(r => r.map(d => {
+    let cell = createCell(d);
+    cell.enabled = d % 2 == 0;
+    return cell;
+  }));
+  allowDisabledSelection = false;
+  selected: SimpleDate;
+}
+
+
 function createCell(value: number) {
-  return new MdCalendarCell(value, `${value}`);
+  return new MdCalendarCell(value, `${value}`, true);
 }
diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts
@@ -23,6 +23,8 @@ describe('MdCalendar', () => {
 
         // Test components.
         StandardCalendar,
+        CalendarWithMinMax,
+        CalendarWithDateFilter,
       ],
     });
 
@@ -128,6 +130,108 @@ describe('MdCalendar', () => {
       expect(testComponent.selected).toEqual(new SimpleDate(2017, 0, 31));
     });
   });
+
+  describe('calendar with min and max date', () => {
+    let fixture: ComponentFixture<CalendarWithMinMax>;
+    let testComponent: CalendarWithMinMax;
+    let calendarElement: HTMLElement;
+    let prevButton: HTMLElement;
+    let nextButton: HTMLElement;
+    let calendarInstance: MdCalendar;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CalendarWithMinMax);
+
+      let calendarDebugElement = fixture.debugElement.query(By.directive(MdCalendar));
+      calendarElement = calendarDebugElement.nativeElement;
+      prevButton = calendarElement.querySelector('.mat-calendar-previous-button') as HTMLElement;
+      nextButton = calendarElement.querySelector('.mat-calendar-next-button') as HTMLElement;
+      calendarInstance = calendarDebugElement.componentInstance;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should clamp startAt value below min date', () => {
+      testComponent.startAt = new SimpleDate(2000, 0, 1);
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2016, 0, 1));
+    });
+
+    it('should clamp startAt value above max date', () => {
+      testComponent.startAt = new SimpleDate(2020, 0, 1);
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2018, 0, 1));
+    });
+
+    it('should not go back past min date', () => {
+      testComponent.startAt = new SimpleDate(2016, 1, 1);
+      fixture.detectChanges();
+
+      expect(prevButton.classList).not.toContain('mat-calendar-disabled');
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2016, 1, 1));
+
+      prevButton.click();
+      fixture.detectChanges();
+
+      expect(prevButton.classList).toContain('mat-calendar-disabled');
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2016, 0, 1));
+
+      prevButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2016, 0, 1));
+    });
+
+    it('should not go forward past max date', () => {
+      testComponent.startAt = new SimpleDate(2017, 11, 1);
+      fixture.detectChanges();
+
+      expect(nextButton.classList).not.toContain('mat-calendar-disabled');
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2017, 11, 1));
+
+      nextButton.click();
+      fixture.detectChanges();
+
+      expect(nextButton.classList).toContain('mat-calendar-disabled');
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2018, 0, 1));
+
+      nextButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentPeriod).toEqual(new SimpleDate(2018, 0, 1));
+    });
+  });
+
+  describe('calendar with date filter', () => {
+    let fixture: ComponentFixture<CalendarWithDateFilter>;
+    let testComponent: CalendarWithDateFilter;
+    let calendarElement: HTMLElement;
+    let calendarInstance: MdCalendar;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CalendarWithDateFilter);
+      fixture.detectChanges();
+
+      let calendarDebugElement = fixture.debugElement.query(By.directive(MdCalendar));
+      calendarElement = calendarDebugElement.nativeElement;
+      calendarInstance = calendarDebugElement.componentInstance;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should disable and prevent selection of filtered dates', () => {
+      let cells = calendarElement.querySelectorAll('.mat-calendar-table-cell');
+      (cells[0] as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(testComponent.selected).toBeFalsy();
+
+      (cells[1] as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(testComponent.selected).toEqual(new SimpleDate(2017, 0, 2));
+    });
+  });
 });
 
 
@@ -137,3 +241,25 @@ describe('MdCalendar', () => {
 class StandardCalendar {
   selected: SimpleDate;
 }
+
+
+@Component({
+  template: `<md-calendar [startAt]="startAt" minDate="1/1/2016" maxDate="1/1/2018"></md-calendar>`
+})
+class CalendarWithMinMax {
+  startAt: SimpleDate;
+}
+
+
+@Component({
+  template: `
+    <md-calendar startAt="1/1/2017" [(selected)]="selected" [dateFilter]="dateFilter"></md-calendar>
+  `
+})
+class CalendarWithDateFilter {
+  selected: SimpleDate;
+
+  dateFilter (date: SimpleDate) {
+    return date.date % 2 == 0;
+  }
+}
diff --git a/src/lib/datepicker/month-view.spec.ts b/src/lib/datepicker/month-view.spec.ts
@@ -19,6 +19,7 @@ describe('MdMonthView', () => {
 
         // Test components.
         StandardMonthView,
+        MonthViewWithDateFilter,
       ],
     });
 
@@ -71,6 +72,27 @@ describe('MdMonthView', () => {
       expect(selectedEl.innerHTML.trim()).toBe('31');
     });
   });
+
+  describe('month view with date filter', () => {
+    let fixture: ComponentFixture<MonthViewWithDateFilter>;
+    let testComponent: MonthViewWithDateFilter;
+    let monthViewNativeElement: Element;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MonthViewWithDateFilter);
+      fixture.detectChanges();
+
+      let monthViewDebugElement = fixture.debugElement.query(By.directive(MdMonthView));
+      monthViewNativeElement = monthViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should disabled filtered dates', () => {
+      let cells = monthViewNativeElement.querySelectorAll('.mat-calendar-table-cell');
+      expect(cells[0].classList).toContain('mat-calendar-table-disabled');
+      expect(cells[1].classList).not.toContain('mat-calendar-table-disabled');
+    });
+  });
 });
 
 
@@ -81,3 +103,13 @@ class StandardMonthView {
   date = new SimpleDate(2017, 0, 5);
   selected = new SimpleDate(2017, 0, 10);
 }
+
+
+@Component({
+  template: `<md-month-view date="1/1/2017" [dateFilter]="dateFilter"></md-month-view>`
+})
+class MonthViewWithDateFilter {
+  dateFilter(date: SimpleDate) {
+    return date.date % 2 == 0;
+  }
+}
diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts
@@ -19,6 +19,7 @@ describe('MdYearView', () => {
 
         // Test components.
         StandardYearView,
+        YearViewWithDateFilter,
       ],
     });
 
@@ -71,6 +72,27 @@ describe('MdYearView', () => {
       expect(selectedEl.innerHTML.trim()).toBe('DEC');
     });
   });
+
+  describe('year view with date filter', () => {
+    let fixture: ComponentFixture<YearViewWithDateFilter>;
+    let testComponent: YearViewWithDateFilter;
+    let yearViewNativeElement: Element;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(YearViewWithDateFilter);
+      fixture.detectChanges();
+
+      let yearViewDebugElement = fixture.debugElement.query(By.directive(MdYearView));
+      yearViewNativeElement = yearViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should disabled months with no enabled days', () => {
+      let cells = yearViewNativeElement.querySelectorAll('.mat-calendar-table-cell');
+      expect(cells[0].classList).not.toContain('mat-calendar-table-disabled');
+      expect(cells[1].classList).toContain('mat-calendar-table-disabled');
+    });
+  });
 });
 
 
@@ -81,3 +103,19 @@ class StandardYearView {
   date = new SimpleDate(2017, 0, 5);
   selected = new SimpleDate(2017, 2, 10);
 }
+
+
+@Component({
+  template: `<md-year-view date="1/1/2017" [dateFilter]="dateFilter"></md-year-view>`
+})
+class YearViewWithDateFilter {
+  dateFilter(date: SimpleDate) {
+    if (date.month == 0) {
+      return date.date == 10;
+    }
+    if (date.month == 1) {
+      return false;
+    }
+    return true;
+  }
+}