-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
year-view.spec.ts
128 lines (106 loc) · 4.14 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
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdYearView} from './year-view';
import {MdCalendarBody} from './calendar-body';
import {MdNativeDateModule, DateAdapter, NativeDateAdapter} from '../core/datetime/index';
import {FEB, JAN, 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');
});
});
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);
}
@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;
}
}