Skip to content

Commit 8169e8b

Browse files
hanastasovhanastasov
committed
fix(calendar): keep months order #6375 
1 parent 16ee6ad commit 8169e8b

14 files changed

+489
-303
lines changed

‎projects/igniteui-angular/src/lib/calendar/calendar-base.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
313313
/**
314314
*@hidden
315315
*/
316-
public calendarModel: Calendar;
316+
protected calendarModel: Calendar;
317317

318318
/**
319319
* @hidden

‎projects/igniteui-angular/src/lib/calendar/calendar-helper-utils.ts‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import { By } from '@angular/platform-browser';
2+
3+
export class HelperTestFunctions {
4+
public static DAYS_VIEW = 'igx-days-view';
5+
public static CALENDAR = 'igx-calendar';
6+
public static SELECTED_DATE = 'igx-calendar__date--selected';
7+
public static ICON_CSSCLASS = '.igx-icon';
8+
public static OVERLAY_CSSCLASS = '.igx-overlay';
9+
public static MODAL_OVERLAY_CSSCLASS = 'igx-overlay__wrapper--modal';
10+
11+
public static CALENDAR_CSSCLASS = '.igx-calendar';
12+
public static CALENDAR_HEADER_CSSCLASS = '.igx-calendar__header';
13+
public static CALENDAR_HEADER_YEAR_CSSCLASS = '.igx-calendar__header-year';
14+
public static CALENDAR_HEADER_DATE_CSSCLASS = '.igx-calendar__header-date';
15+
public static WEEKSTART_LABEL_CSSCLASS = '.igx-calendar__label';
16+
public static VERTICAL_CALENDAR_CSSCLASS = '.igx-calendar--vertical';
17+
public static DAY_CSSCLASS = '.igx-calendar__date';
18+
public static CURRENT_DATE_CSSCLASS = '.igx-calendar__date--current';
19+
public static INACTIVE_DAYS_CSSCLASS = '.igx-calendar__date--inactive';
20+
public static HIDDEN_DAYS_CSSCLASS = '.igx-calendar__date--hidden';
21+
public static SELECTED_DATE_CSSCLASS = '.igx-calendar__date--selected';
22+
public static RANGE_CSSCLASS = 'igx-calendar__date--range';
23+
public static CALENDAR_ROW_CSSCLASS = '.igx-calendar__body-row';
24+
public static CALENDAR_ROW_WRAP_CSSCLASS = '.igx-calendar__body-row--wrap';
25+
public static CALENDAR_COLUMN_CSSCLASS = '.igx-calendar__body-column';
26+
public static MONTH_CSSCLASS = '.igx-calendar__month';
27+
public static CURRENT_MONTH_CSSCLASS = '.igx-calendar__month--current';
28+
public static YEAR_CSSCLASS = '.igx-calendar__year';
29+
public static CURRENT_YEAR_CSSCLASS = '.igx-calendar__year--current';
30+
31+
public static CALENDAR_PREV_BUTTON_CSSCLASS = '.igx-calendar-picker__prev';
32+
public static CALENDAR_NEXT_BUTTON_CSSCLASS = '.igx-calendar-picker__next';
33+
public static CALENDAR_DATE_CSSCLASS = '.igx-calendar-picker__date';
34+
35+
public static CALENDAR_SUBHEADERS_SELECTOR =
36+
'div:not(' + HelperTestFunctions.CALENDAR_PREV_BUTTON_CSSCLASS + '):not(' + HelperTestFunctions.CALENDAR_NEXT_BUTTON_CSSCLASS + ')';
37+
38+
public static verifyMonthsViewNumber(fixture, monthsView: number, checkCurrentDate = false) {
39+
const el = fixture.nativeElement ? fixture.nativeElement : fixture;
40+
const daysView = el.querySelectorAll(HelperTestFunctions.DAYS_VIEW);
41+
expect(daysView).toBeDefined();
42+
expect(daysView.length).toBe(monthsView);
43+
const monthPickers = HelperTestFunctions.getCalendarSubHeader(el).querySelectorAll('div');
44+
expect(monthPickers.length).toBe(monthsView + 2); // plus the navigation arrows
45+
if (checkCurrentDate) {
46+
const currentDate = el.querySelector(HelperTestFunctions.CURRENT_DATE_CSSCLASS);
47+
expect(currentDate).not.toBeNull();
48+
}
49+
}
50+
51+
public static verifyCalendarHeader(fixture, selectedDate: Date) {
52+
const daysView = fixture.nativeElement.querySelector(HelperTestFunctions.CALENDAR_HEADER_CSSCLASS);
53+
expect(daysView).not.toBeNull();
54+
const year = fixture.nativeElement.querySelector(HelperTestFunctions.CALENDAR_HEADER_YEAR_CSSCLASS);
55+
expect(year).not.toBeNull();
56+
expect(Number(year.innerText)).toEqual(selectedDate.getFullYear());
57+
const date = fixture.nativeElement.querySelector(HelperTestFunctions.CALENDAR_HEADER_DATE_CSSCLASS);
58+
expect(date).not.toBeNull();
59+
const dateParts = selectedDate.toUTCString().split(' '); // (weekday, date month year)
60+
expect(date.children[0].innerText.trim()).toEqual(dateParts[0]);
61+
expect(date.children[1].innerText.trim()).toEqual(dateParts[2] + ' ' + Number(dateParts[1]));
62+
}
63+
64+
public static verifyNoRangeSelectionCreated(fixture, monthNumber: number) {
65+
expect(HelperTestFunctions.getMonthView(fixture, monthNumber).querySelector('.igx-calendar__date--range')).toBeNull();
66+
expect(HelperTestFunctions.getMonthView(fixture, monthNumber).querySelector('.igx-calendar__date--first')).toBeNull();
67+
expect(HelperTestFunctions.getMonthView(fixture, monthNumber).querySelector('.igx-calendar__date--last')).toBeNull();
68+
}
69+
70+
public static verifyCalendarSubHeader(fixture, monthNumber: number, viewDate: Date) {
71+
const monthPickers = HelperTestFunctions.getCalendarSubHeader(fixture).querySelectorAll('div');
72+
const dateParts = viewDate.toString().split(' '); // weekday month day year
73+
expect(monthPickers[monthNumber].children[0].innerHTML.trim()).toEqual(dateParts[1]);
74+
expect(monthPickers[monthNumber].children[1].innerHTML.trim()).toEqual(dateParts[3]);
75+
}
76+
77+
public static verifyCalendarSubHeaders(fixture, viewDates: Date[]) {
78+
const dom = fixture.nativeElement ? fixture.nativeElement : fixture;
79+
const monthPickers = HelperTestFunctions.getCalendarSubHeader(dom).querySelectorAll(this.CALENDAR_SUBHEADERS_SELECTOR);
80+
expect(monthPickers.length).toEqual(viewDates.length);
81+
for (let index = 0; index < viewDates.length; index++) {
82+
const dateParts = viewDates[index].toString().split(' '); // weekday month day year
83+
expect(monthPickers[index].children[0].innerHTML.trim()).toEqual(dateParts[1]);
84+
expect(monthPickers[index].children[1].innerHTML.trim()).toEqual(dateParts[3]);
85+
}
86+
}
87+
88+
public static getHiddenDays(fixture, monthNumber: number) {
89+
const monthView = HelperTestFunctions.getMonthView(fixture, monthNumber);
90+
return monthView.querySelectorAll(HelperTestFunctions.HIDDEN_DAYS_CSSCLASS);
91+
}
92+
93+
public static getInactiveDays(fixture, monthNumber: number) {
94+
const monthView = HelperTestFunctions.getMonthView(fixture, monthNumber);
95+
return monthView.querySelectorAll(HelperTestFunctions.INACTIVE_DAYS_CSSCLASS);
96+
}
97+
98+
public static getCalendarSubHeader(fixture): HTMLElement {
99+
const element = fixture.nativeElement ? fixture.nativeElement : fixture;
100+
return element.querySelector('div.igx-calendar-picker');
101+
}
102+
103+
public static getMonthView(fixture, monthsViewNumber: number) {
104+
const domEL = fixture.nativeElement ? fixture.nativeElement : fixture;
105+
return domEL.querySelectorAll('igx-days-view')[monthsViewNumber];
106+
}
107+
108+
public static getMonthViewDates(fixture, monthsViewNumber: number) {
109+
const month = HelperTestFunctions.getMonthView(fixture, monthsViewNumber);
110+
return month.querySelectorAll(HelperTestFunctions.DAY_CSSCLASS);
111+
}
112+
113+
public static getMonthViewInactiveDates(fixture, monthsViewNumber: number) {
114+
const month = HelperTestFunctions.getMonthView(fixture, monthsViewNumber);
115+
return month.querySelectorAll(HelperTestFunctions.INACTIVE_DAYS_CSSCLASS);
116+
}
117+
118+
public static getMonthViewSelectedDates(fixture, monthsViewNumber: number) {
119+
const month = HelperTestFunctions.getMonthView(fixture, monthsViewNumber);
120+
return month.querySelectorAll(HelperTestFunctions.SELECTED_DATE_CSSCLASS +
121+
`:not(${HelperTestFunctions.HIDDEN_DAYS_CSSCLASS})`);
122+
}
123+
124+
public static getMonthsFromMonthView(fixture) {
125+
return fixture.nativeElement.querySelector('igx-months-view')
126+
.querySelectorAll('.igx-calendar__month, .igx-calendar__month--current');
127+
}
128+
129+
public static getYearsFromYearView(fixture) {
130+
return fixture.nativeElement.querySelector('igx-years-view')
131+
.querySelectorAll('.igx-calendar__year, .igx-calendar__year--current');
132+
}
133+
134+
public static getCurrentYearsFromYearView(fixture) {
135+
return fixture.nativeElement.querySelector('igx-years-view')
136+
.querySelector('.igx-calendar__year--current');
137+
}
138+
139+
public static getNexArrowElement(fixture) {
140+
return fixture.debugElement.query(By.css(HelperTestFunctions.CALENDAR_NEXT_BUTTON_CSSCLASS)).nativeElement;
141+
}
142+
143+
public static getPreviousArrowElement(fixture) {
144+
return fixture.debugElement.query(By.css(HelperTestFunctions.CALENDAR_PREV_BUTTON_CSSCLASS)).nativeElement;
145+
}
146+
147+
public static verifyDateSelected(el) {
148+
expect(
149+
el.nativeElement.classList.contains(
150+
HelperTestFunctions.SELECTED_DATE
151+
)
152+
).toBe(true);
153+
}
154+
155+
public static verifyDateNotSelected(el) {
156+
expect(
157+
el.nativeElement.classList.contains(
158+
HelperTestFunctions.SELECTED_DATE
159+
)
160+
).toBe(false);
161+
}
162+
}

0 commit comments

Comments
 (0)