-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
year-view.spec.ts
140 lines (114 loc) · 4.51 KB
/
year-view.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component, ViewChild} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdYearView} from './year-view';
import {MdCalendarBody} from './calendar-body';
import {MdNativeDateModule} from '../core/datetime/index';
import {FEB, JAN, JUL, JUN, MAR} from '../core/testing/month-constants';
describe('MdYearView', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MdNativeDateModule,
],
declarations: [
MdCalendarBody,
MdYearView,
// Test components.
StandardYearView,
YearViewWithDateFilter,
],
});
TestBed.compileComponents();
}));
describe('standard year view', () => {
let fixture: ComponentFixture<StandardYearView>;
let testComponent: StandardYearView;
let yearViewNativeElement: Element;
beforeEach(() => {
fixture = TestBed.createComponent(StandardYearView);
fixture.detectChanges();
let yearViewDebugElement = fixture.debugElement.query(By.directive(MdYearView));
yearViewNativeElement = yearViewDebugElement.nativeElement;
testComponent = fixture.componentInstance;
});
it('has correct year label', () => {
let labelEl = yearViewNativeElement.querySelector('.mat-calendar-body-label')!;
expect(labelEl.innerHTML.trim()).toBe('2017');
});
it('has 12 months', () => {
let cellEls = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell')!;
expect(cellEls.length).toBe(12);
});
it('shows selected month if in same year', () => {
let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-body-selected')!;
expect(selectedEl.innerHTML.trim()).toBe('MAR');
});
it('does not show selected month if in different year', () => {
testComponent.selected = new Date(2016, MAR, 10);
fixture.detectChanges();
let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-body-selected');
expect(selectedEl).toBeNull();
});
it('fires selected change event on cell clicked', () => {
let cellEls = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
(cellEls[cellEls.length - 1] as HTMLElement).click();
fixture.detectChanges();
let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-body-selected')!;
expect(selectedEl.innerHTML.trim()).toBe('DEC');
});
it('should mark active date', () => {
let cellEls = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
expect((cellEls[0] as HTMLElement).innerText.trim()).toBe('JAN');
expect(cellEls[0].classList).toContain('mat-calendar-body-active');
});
it('should allow selection of month with less days than current active date', () => {
testComponent.date = new Date(2017, JUL, 31);
fixture.detectChanges();
expect(testComponent.yearView._monthSelected(JUN));
fixture.detectChanges();
expect(testComponent.selected).toEqual(new Date(2017, JUN, 30));
});
});
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-body-cell');
expect(cells[0].classList).not.toContain('mat-calendar-body-disabled');
expect(cells[1].classList).toContain('mat-calendar-body-disabled');
});
});
});
@Component({
template: `
<md-year-view [activeDate]="date" [(selected)]="selected"></md-year-view>`,
})
class StandardYearView {
date = new Date(2017, JAN, 5);
selected = new Date(2017, MAR, 10);
@ViewChild(MdYearView) yearView: MdYearView<Date>;
}
@Component({
template: `<md-year-view [activeDate]="activeDate" [dateFilter]="dateFilter"></md-year-view>`
})
class YearViewWithDateFilter {
activeDate = new Date(2017, JAN, 1);
dateFilter(date: Date) {
if (date.getMonth() == JAN) {
return date.getDate() == 10;
}
if (date.getMonth() == FEB) {
return false;
}
return true;
}
}