diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 93f67bb9563..1b418e77544 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -8,6 +8,7 @@ import { FormsModule, FormControl, Validators } from '@angular/forms'; import { IgxCalendarComponent } from '../calendar/index'; import { IgxDateRangePickerModule } from './date-range-picker.module'; import { By } from '@angular/platform-browser'; +import {ControlsFunction} from '../test-utils/controls-functions.spec'; import { UIInteractions } from '../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../test-utils/configure-suite'; import { HelperTestFunctions } from '../calendar/calendar-helper-utils'; @@ -20,7 +21,8 @@ import { DateRange } from './date-range-picker-inputs.common'; // The number of milliseconds in one day const ONE_DAY = 1000 * 60 * 60 * 24; const DEBOUNCE_TIME = 16; -const defaultIconText = 'calendar_today'; +const dEFAULT_ICON_TEXT = 'calendar_today'; +const DEFAULT_FORMAT_OPTIONS = {day: '2-digit', month: '2-digit', year: 'numeric'}; const CSS_CLASS_INPUT_GROUP = '.igx-input-group__bundle'; const CSS_CLASS_INPUT = '.igx-input-group__input'; const CSS_CLASS_CALENDAR = 'igx-calendar'; @@ -187,24 +189,6 @@ describe('IgxDateRangePicker', () => { let calendar: DebugElement; let calendarDays: DebugElement[]; - /** - * Formats a date to 'MM/dd/yyyy' string - * @param date Date to be formatted - */ - function formatFullDate(date: Date): string { - const year = `${date.getFullYear()}`.padStart(4, '0'); - const month = `${date.getMonth() + 1}`.padStart(2, '0'); - const day = `${date.getDate()}`.padStart(2, '0'); - const fullDate = [month, day, year].join('/'); - return fullDate; - } - - function formatLongDate(date: Date): string { - const result = date.toLocaleString('en-US', { month: 'long', day: 'numeric' }); - const year = date.getFullYear(); - return `${result}, ${year}`; - } - function selectDateRangeFromCalendar(startDateDay: number, dayRange: number) { const startDateDayElIndex = startDateDay - 1; const endDateDayElIndex = startDateDayElIndex + dayRange; @@ -340,7 +324,10 @@ describe('IgxDateRangePicker', () => { endDate = new Date(today.getFullYear(), today.getMonth(), 5, 0, 0, 0); dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - expect(singleInputElement.nativeElement.value).toEqual(`${formatLongDate(startDate)} - ${formatLongDate(endDate)}`); + const longDateOptions = { month: 'long', day: 'numeric' }; + let inputStartDate = `${ControlsFunction.formatDate(startDate, longDateOptions)}, ${startDate.getFullYear()}`; + let inputEndDate = `${ControlsFunction.formatDate(endDate, longDateOptions)}, ${endDate.getFullYear()}`; + expect(singleInputElement.nativeElement.value).toEqual(`${inputStartDate} - ${inputEndDate}`); dateRange.value = null; @@ -355,8 +342,9 @@ describe('IgxDateRangePicker', () => { dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - let inputStartDate = startDate.toLocaleDateString('en', { day: 'numeric', month: 'numeric', year: '2-digit' }); - let inputEndDate = endDate.toLocaleDateString('en', { day: 'numeric', month: 'numeric', year: '2-digit' }); + const shortDateOptions = { day: 'numeric', month: 'numeric', year: '2-digit' }; + inputStartDate = ControlsFunction.formatDate(startDate, shortDateOptions); + inputEndDate = ControlsFunction.formatDate(endDate, shortDateOptions); expect(singleInputElement.nativeElement.value).toEqual(`${inputStartDate} - ${inputEndDate}`); dateRange.value = null; @@ -372,8 +360,9 @@ describe('IgxDateRangePicker', () => { dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - inputStartDate = startDate.toLocaleString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); - inputEndDate = endDate.toLocaleString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); + const fullDateOptions = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }; + inputStartDate = ControlsFunction.formatDate(startDate, fullDateOptions); + inputEndDate = ControlsFunction.formatDate(endDate, fullDateOptions); expect(singleInputElement.nativeElement.value).toEqual(`${inputStartDate} - ${inputEndDate}`); dateRange.value = null; @@ -388,10 +377,11 @@ describe('IgxDateRangePicker', () => { dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - inputStartDate = startDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'numeric', year: '2-digit' }). - replace(/\//g, '-'); - inputEndDate = endDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'numeric', year: '2-digit' }). - replace(/\//g, '-'); + const customFormatOptions = { day: 'numeric', month: 'numeric', year: '2-digit' }; + inputStartDate = ControlsFunction.formatDate(startDate, customFormatOptions, 'en-GB'). + replace(/\//g, '-'); + inputEndDate = ControlsFunction.formatDate(endDate, customFormatOptions, 'en-GB'). + replace(/\//g, '-'); expect(singleInputElement.nativeElement.value).toEqual(`${inputStartDate} - ${inputEndDate}`); }); @@ -641,8 +631,8 @@ describe('IgxDateRangePicker', () => { function verifyDateRange() { expect(dateRange.value.start).toEqual(startDate); expect(dateRange.value.end).toEqual(endDate); - expect(startInput.nativeElement.value).toEqual(formatFullDate(startDate)); - const expectedEndDate = endDate ? formatFullDate(endDate) : ''; + expect(startInput.nativeElement.value).toEqual(ControlsFunction.formatDate(startDate, DEFAULT_FORMAT_OPTIONS)); + const expectedEndDate = endDate ? ControlsFunction.formatDate(endDate, DEFAULT_FORMAT_OPTIONS) : ''; expect(endInput.nativeElement.value).toEqual(expectedEndDate); } @@ -768,8 +758,8 @@ describe('IgxDateRangePicker', () => { endDate = new Date(today.getFullYear(), today.getMonth(), 5, 0, 0, 0); dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - expect(startInput.nativeElement.value).toEqual(formatFullDate(startDate)); - expect(endInput.nativeElement.value).toEqual(formatFullDate(endDate)); + expect(startInput.nativeElement.value).toEqual(ControlsFunction.formatDate(startDate, DEFAULT_FORMAT_OPTIONS)); + expect(endInput.nativeElement.value).toEqual(ControlsFunction.formatDate(endDate, DEFAULT_FORMAT_OPTIONS)); fixture.componentInstance.displayFormat = 'shortDate'; fixture.detectChanges(); @@ -779,10 +769,9 @@ describe('IgxDateRangePicker', () => { dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - let inputStartDate = startDate.toLocaleDateString('en', { day: 'numeric', month: 'numeric', year: '2-digit' }); - let inputEndDate = endDate.toLocaleDateString('en', { day: 'numeric', month: 'numeric', year: '2-digit' }); - expect(startInput.nativeElement.value).toEqual(inputStartDate); - expect(endInput.nativeElement.value).toEqual(inputEndDate); + const shortDateFormatOptions = {day: 'numeric', month: 'numeric', year: '2-digit'}; + expect(startInput.nativeElement.value).toEqual(ControlsFunction.formatDate(startDate, shortDateFormatOptions)); + expect(endInput.nativeElement.value).toEqual(ControlsFunction.formatDate(endDate, shortDateFormatOptions)); fixture.componentInstance.displayFormat = 'fullDate'; fixture.detectChanges(); @@ -792,11 +781,9 @@ describe('IgxDateRangePicker', () => { dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - inputStartDate = - startDate.toLocaleString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); - inputEndDate = endDate.toLocaleString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); - expect(startInput.nativeElement.value).toEqual(inputStartDate); - expect(endInput.nativeElement.value).toEqual(inputEndDate); + const fullDateFormatOptions = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }; + expect(startInput.nativeElement.value).toEqual(ControlsFunction.formatDate(startDate, fullDateFormatOptions)); + expect(endInput.nativeElement.value).toEqual(ControlsFunction.formatDate(endDate, fullDateFormatOptions)); fixture.componentInstance.displayFormat = 'dd-MM-yy'; fixture.detectChanges(); @@ -806,10 +793,11 @@ describe('IgxDateRangePicker', () => { dateRange.selectRange(startDate, endDate); fixture.detectChanges(); - inputStartDate = startDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'numeric', year: '2-digit' }). - replace(/\//g, '-'); - inputEndDate = endDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'numeric', year: '2-digit' }). - replace(/\//g, '-'); + const customFormatOptions = { day: 'numeric', month: 'numeric', year: '2-digit' }; + const inputStartDate = ControlsFunction.formatDate(startDate, customFormatOptions, 'en-GB'). + replace(/\//g, '-'); + const inputEndDate = ControlsFunction.formatDate(endDate, customFormatOptions, 'en-GB'). + replace(/\//g, '-'); expect(startInput.nativeElement.value).toEqual(inputStartDate); expect(endInput.nativeElement.value).toEqual(inputEndDate); }); @@ -886,7 +874,7 @@ describe('IgxDateRangePicker', () => { fixture.detectChanges(); const inputGroup = fixture.debugElement.query(By.css(CSS_CLASS_INPUT_GROUP)); - expect(inputGroup.children[0].nativeElement.innerText).toBe(defaultIconText); + expect(inputGroup.children[0].nativeElement.innerText).toBe(dEFAULT_ICON_TEXT); expect(inputGroup.children[0].children[0].classes[CSS_CLASS_ICON]).toBeTruthy(); }); @@ -907,7 +895,7 @@ describe('IgxDateRangePicker', () => { expect(suffixSingleRangeInput.children[1].children[0].classes[CSS_CLASS_ICON]).toBeTruthy(); const addPrefixSingleRangeInput = inputGroups[2]; - expect(addPrefixSingleRangeInput.children[0].nativeElement.innerText).toBe(defaultIconText); + expect(addPrefixSingleRangeInput.children[0].nativeElement.innerText).toBe(dEFAULT_ICON_TEXT); expect(addPrefixSingleRangeInput.children[0].children[0].classes[CSS_CLASS_ICON]).toBeTruthy(); expect(addPrefixSingleRangeInput.children[1].nativeElement.innerText).toBe(additionalIconText); expect(addPrefixSingleRangeInput.children[1].children[0].classes[CSS_CLASS_ICON]).toBeTruthy(); diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts index ff2a64a38d9..da5f17e7f41 100644 --- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts @@ -8,6 +8,7 @@ import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxInputGroupModule, IgxInputGroupComponent, IgxInputDirective } from '../../input-group'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import {ControlsFunction} from '../../test-utils/controls-functions.spec'; import { UIInteractions } from '../../test-utils/ui-interactions.spec'; describe('IgxDateTimeEditor', () => { @@ -331,6 +332,7 @@ describe('IgxDateTimeEditor', () => { }); describe('Integration tests', () => { + const dateTimeOptions = {day: '2-digit', month: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'}; let fixture; let inputElement: DebugElement; let dateTimeEditorDirective: IgxDateTimeEditorDirective; @@ -351,36 +353,6 @@ describe('IgxDateTimeEditor', () => { inputElement = fixture.debugElement.query(By.css('input')); dateTimeEditorDirective = inputElement.injector.get(IgxDateTimeEditorDirective); }); - // 'dd/MM/yyyy HH:mm:ss'; - function formatFullDateTime(date: Date): string { - const year = `${date.getFullYear()}`.padStart(4, '0'); - const month = `${date.getMonth()}`.padStart(2, '0'); - const day = `${date.getDate()}`.padStart(2, '0'); - const fullDate = [day, month, year].join('/'); - const hours = `${date.getHours()}`.padStart(2, '0'); - const minutes = `${date.getMinutes()}`.padStart(2, '0'); - const seconds = `${date.getSeconds()}`.padStart(2, '0'); - const fullTime = [hours, minutes, seconds].join(':'); - return `${fullDate} ${fullTime}`; - } - function formatFullDate(date: Date): string { - return date.toLocaleString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); - } - function formatLongDate(date: Date): string { - const result = date.toLocaleString('en-US', { month: 'long', day: 'numeric' }); - const year = date.getFullYear(); - return `${result}, ${year}`; - } - function formatLongTime(date: Date): string { - const result = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }); - const offset = date.getTimezoneOffset(); - const tz = (offset > 0 ? '-' : '+') + (Math.abs(offset) / 60); - return `${result} GMT${tz}`; - } - function formatShortTime(date: Date): string { - const result = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); - return result; - } it('should correctly display input format during user input', () => { fixture.componentInstance.dateTimeFormat = 'dd/MM/yy'; fixture.detectChanges(); @@ -417,8 +389,8 @@ describe('IgxDateTimeEditor', () => { expect(inputElement.nativeElement.value).toEqual('8_/__/____ __:__:__'); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - const date = new Date(2000, 1, 8, 0, 0, 0); - let result = formatFullDateTime(date); + const date = new Date(2000, 0, 8, 0, 0, 0); + let result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -432,7 +404,7 @@ describe('IgxDateTimeEditor', () => { fixture.detectChanges(); date.setFullYear(2005); date.setDate(1); - result = formatFullDateTime(date); + result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -446,7 +418,7 @@ describe('IgxDateTimeEditor', () => { fixture.detectChanges(); date.setFullYear(2000); date.setHours(3); - result = formatFullDateTime(date); + result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); }); it('should not accept invalid date and time parts.', () => { @@ -497,8 +469,8 @@ describe('IgxDateTimeEditor', () => { expect(inputElement.nativeElement.value).toEqual('__/__/0000 __:__:__'); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - const date = new Date(2000, 1, 1, 0, 0, 0); - let result = formatFullDateTime(date); + const date = new Date(2000, 0, 1, 0, 0, 0); + let result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -511,7 +483,7 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); date.setFullYear(2005); - result = formatFullDateTime(date); + result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -524,7 +496,7 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); date.setFullYear(2016); - result = formatFullDateTime(date); + result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -537,7 +509,7 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); date.setFullYear(169); - result = formatFullDateTime(date); + result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/169,/g, '0169'); expect(inputElement.nativeElement.value).toEqual(result); }); it('should support different display and input formats.', () => { @@ -550,7 +522,8 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); let date = new Date(2000, 0, 9, 0, 0, 0); - let result = formatLongDate(date); + const options = { month: 'long', day: 'numeric' }; + let result = `${ControlsFunction.formatDate(date, options)}, ${date.getFullYear()}`; expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -564,11 +537,9 @@ describe('IgxDateTimeEditor', () => { expect(inputElement.nativeElement.value).toEqual('__/__/169_ __:__:__'); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - date = new Date(169, 1, 1, 0, 0, 0); - const year = date.getFullYear(); - const month = `${date.getMonth()}`.padStart(2, '0'); - const day = `${date.getDate()}`.padStart(2, '0'); - result = [day, month, year].join('/'); + date = new Date(169, 0, 1, 0, 0, 0); + const customOptions = {day: '2-digit', month: '2-digit', year: 'numeric' }; + result = ControlsFunction.formatDate(date, customOptions); expect(inputElement.nativeElement.value).toEqual(result); }); it('should support long and short date formats', () => { @@ -581,7 +552,8 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); let date = new Date(2000, 0, 9, 0, 0, 0); - let result = formatLongDate(date); + const longDateOptions = { month: 'long', day: 'numeric' }; + let result = `${ControlsFunction.formatDate(date, longDateOptions)}, ${date.getFullYear()}`; expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -595,7 +567,8 @@ describe('IgxDateTimeEditor', () => { expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__'); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - result = date.toLocaleDateString('en', { day: 'numeric', month: 'numeric', year: '2-digit' }); + const shortDateOptions = { day: 'numeric', month: 'numeric', year: '2-digit' }; + result = ControlsFunction.formatDate(date, shortDateOptions); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -609,7 +582,8 @@ describe('IgxDateTimeEditor', () => { expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__'); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - result = formatFullDate(date); + const fullDateOptions = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }; + result = ControlsFunction.formatDate(date, fullDateOptions); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -624,7 +598,8 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); date = new Date(0, 0, 0, 1, 0, 0); - result = formatShortTime(date); + const shortTimeOptions = { hour: 'numeric', minute: 'numeric', hour12: true }; + result = ControlsFunction.formatDate(date, shortTimeOptions); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -639,16 +614,20 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); date = new Date(0, 0, 0, 2, 0, 0); - result = formatLongTime(date); + const longTimeOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; + result = ControlsFunction.formatDate(date, longTimeOptions); + const offset = date.getTimezoneOffset(); + const tz = (offset > 0 ? '-' : '+') + (Math.abs(offset) / 60); + result = `${result} GMT${tz}`; expect(inputElement.nativeElement.value).toEqual(result); }); it('should be able to apply custom display format.', fakeAsync(() => { // default format - const date = new Date(2003, 4, 5, 0, 0, 0); + const date = new Date(2003, 3, 5, 0, 0, 0); fixture.componentInstance.date = new Date(2003, 3, 5, 0, 0, 0); fixture.detectChanges(); tick(); - let result = formatFullDateTime(date); + let result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); // custom format @@ -658,22 +637,22 @@ describe('IgxDateTimeEditor', () => { fixture.detectChanges(); UIInteractions.simulateTyping('1', inputElement); date.setDate(15); - result = formatFullDateTime(date); + result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); date.setMonth(3); - const resultDate = - date.toLocaleString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }) - .replace(/,/g, ''); - result = `${resultDate} ${formatShortTime(date)}`; + const shortTimeOptions = { hour: 'numeric', minute: 'numeric', hour12: true }; + const dateOptions = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }; + const resultDate = ControlsFunction.formatDate(date, dateOptions, 'en-GB').replace(/,/g, ''); + result = `${resultDate} ${ControlsFunction.formatDate(date, shortTimeOptions)}`; expect(inputElement.nativeElement.value).toEqual(result); })); it('should convert dates correctly on paste when different display and input formats are set.', () => { // display format = input format let date = new Date(2020, 10, 10, 10, 10, 10); - let inputDate = formatFullDateTime(date); + let inputDate = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); inputElement.triggerEventHandler('focus', {}); fixture.detectChanges(); UIInteractions.simulatePaste(inputDate, inputElement, 0, 19); @@ -689,8 +668,8 @@ describe('IgxDateTimeEditor', () => { UIInteractions.simulatePaste(inputDate, inputElement, 0, 19); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - let year = (date.getFullYear().toString()).slice(-2); - const result = [date.getDate(), date.getMonth(), year].join('/'); + const shortDateOptions = {day: 'numeric', month: 'numeric', year: '2-digit'}; + const result = ControlsFunction.formatDate(date, shortDateOptions, 'en-GB'); expect(inputElement.nativeElement.value).toEqual(result); inputDate = '6/7/28'; @@ -716,23 +695,23 @@ describe('IgxDateTimeEditor', () => { date = new Date(2028, 7, 16, 0, 0, 0); inputDate = '16/07/28'; - const month = `${date.getMonth()}`.padStart(2, '0'); - year = (date.getFullYear().toString()).slice(-2); - inputDate = [date.getDate(), month, year].join('/'); + const longDateOptions = {day: '2-digit', month: '2-digit', year: '2-digit'}; + inputDate = ControlsFunction.formatDate(date, longDateOptions, 'en-GB'); inputElement.triggerEventHandler('focus', {}); fixture.detectChanges(); UIInteractions.simulatePaste(inputDate, inputElement, 0, 19); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - inputDate = [date.getDate(), month, date.getFullYear()].join('/'); + longDateOptions.year = 'numeric'; + inputDate = ControlsFunction.formatDate(date, longDateOptions, 'en-GB'); expect(inputElement.nativeElement.value).toEqual(inputDate); }); it('should clear input date on clear()', fakeAsync(() => { - const date = new Date(2003, 4, 5); - fixture.componentInstance.date = new Date(2003, 3, 5); + const date = new Date(2003, 3, 5); + fixture.componentInstance.date = date; fixture.detectChanges(); tick(); - const result = formatFullDateTime(date); + const result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); dateTimeEditorDirective.clear(); @@ -740,10 +719,10 @@ describe('IgxDateTimeEditor', () => { })); it('should move the caret to the start/end of the portion with CTRL + arrow left/right keys.', fakeAsync(() => { const date = new Date(2003, 4, 5); - fixture.componentInstance.date = new Date(2003, 3, 5); + fixture.componentInstance.date = date; fixture.detectChanges(); tick(); - const result = formatFullDateTime(date); + const result = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(result); const inputHTMLElement = inputElement.nativeElement as HTMLInputElement; @@ -812,7 +791,7 @@ describe('IgxDateTimeEditor', () => { fixture.detectChanges(); let date = new Date(2009, 10, 10, 10, 10, 10); - let inputDate = formatFullDateTime(date); + let inputDate = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); inputElement.triggerEventHandler('focus', {}); fixture.detectChanges(); UIInteractions.simulatePaste(inputDate, inputElement, 0, 19); @@ -828,8 +807,8 @@ describe('IgxDateTimeEditor', () => { UIInteractions.simulateTyping('27', inputElement, 8, 8); inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - date = new Date(2027, 1, 1, 0, 0, 0); - inputDate = formatFullDateTime(date); + date = new Date(2027, 0, 1, 0, 0, 0); + inputDate = ControlsFunction.formatDate(date, dateTimeOptions, 'en-GB').replace(/,/g, ''); expect(inputElement.nativeElement.value).toEqual(inputDate); }); it('should be able to customize prompt char.', () => { @@ -865,8 +844,8 @@ describe('IgxDateTimeEditor', () => { inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement }); fixture.detectChanges(); - const year = (newDate.getFullYear().toString()).slice(-2); - const result = [newDate.getDate(), newDate.getMonth() + 1, year].join('/'); + const options = {day: '2-digit', month: '2-digit', year: '2-digit'}; + const result = ControlsFunction.formatDate(newDate, options, 'en-GB'); expect(inputElement.nativeElement.value).toEqual(result); expect(dateTimeEditorDirective.valueChange.emit).toHaveBeenCalledTimes(1); expect(dateTimeEditorDirective.valueChange.emit).toHaveBeenCalledWith(newDate); diff --git a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts index 3121d312686..b61279c3f66 100644 --- a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts @@ -17,68 +17,79 @@ export const BUTTON_DISABLED_CLASS = 'igx-button--disabled'; export class ControlsFunction { public static getChipRemoveButton(chip: HTMLElement): HTMLElement { - return chip.querySelector(CHIP_REMOVE_BUTTON); + return chip.querySelector(CHIP_REMOVE_BUTTON); } public static clickChipRemoveButton(chip: HTMLElement) { const removeButton = ControlsFunction.getChipRemoveButton(chip); removeButton.click(); - } + } - public static getDropDownSelectedItem(element: DebugElement): DebugElement { + public static getDropDownSelectedItem(element: DebugElement): DebugElement { return element.query(By.css(DROP_DOWN_SELECTED_ITEM_CLASS)); - } - - public static clickDropDownItem(fix: ComponentFixture, index: number) { - const list: HTMLElement = fix.nativeElement.querySelector(DROP_DOWN_SCROLL_CLASS); - const items = list.querySelectorAll(DROP_DOWN__ITEM_CLASS); - const item = items.item(index); - UIInteractions.simulateClickEvent(item); - fix.detectChanges(); - } - - public static verifyButtonIsSelected(element: HTMLElement, selected: boolean = true) { - expect(element.classList.contains(BUTTON_SELECTED_CLASS)).toEqual(selected); - } - - public static verifyButtonIsDisabled(element: HTMLElement, disabled: boolean = true) { - expect(element.classList.contains(BUTTON_DISABLED_CLASS)).toEqual(disabled); - } - - public static verifyCheckboxState(element: HTMLElement, checked: boolean = true, indeterminate = false) { - expect(element.classList.contains(CHECKBOX_CHECKED_CLASS)).toEqual(checked); - expect(element.classList.contains(CHECKBOX_IND_CLASS)).toEqual(indeterminate); - } - - public static getCheckboxElement(name: string, element: DebugElement, fix) { - const checkboxElements = element.queryAll(By.css('igx-checkbox')); - const chkElement = checkboxElements.find((el) => - (el.context as IgxCheckboxComponent).placeholderLabel.nativeElement.innerText === name); - - return chkElement; - } - - public static getCheckboxInput(name: string, element: DebugElement, fix) { - const checkboxEl = ControlsFunction.getCheckboxElement(name, element, fix); - const chkInput = checkboxEl.query(By.css('input')).nativeElement as HTMLInputElement; - - return chkInput; - } - - public static getCheckboxInputs(element: DebugElement): HTMLInputElement[] { - const checkboxElements = element.queryAll(By.css('igx-checkbox')); - const inputs = []; - checkboxElements.forEach((el) => { - inputs.push(el.query(By.css('input')).nativeElement as HTMLInputElement); - }); - - return inputs; - } - - public static verifyCheckbox(name: string, isChecked: boolean, isDisabled: boolean, element: DebugElement, fix) { - const chkInput = ControlsFunction.getCheckboxInput(name, element, fix); - expect(chkInput.type).toBe('checkbox'); - expect(chkInput.disabled).toBe(isDisabled); - expect(chkInput.checked).toBe(isChecked); - } + } + + public static clickDropDownItem(fix: ComponentFixture, index: number) { + const list: HTMLElement = fix.nativeElement.querySelector(DROP_DOWN_SCROLL_CLASS); + const items = list.querySelectorAll(DROP_DOWN__ITEM_CLASS); + const item = items.item(index); + UIInteractions.simulateClickEvent(item); + fix.detectChanges(); + } + + public static verifyButtonIsSelected(element: HTMLElement, selected: boolean = true) { + expect(element.classList.contains(BUTTON_SELECTED_CLASS)).toEqual(selected); + } + + public static verifyButtonIsDisabled(element: HTMLElement, disabled: boolean = true) { + expect(element.classList.contains(BUTTON_DISABLED_CLASS)).toEqual(disabled); + } + + public static verifyCheckboxState(element: HTMLElement, checked: boolean = true, indeterminate = false) { + expect(element.classList.contains(CHECKBOX_CHECKED_CLASS)).toEqual(checked); + expect(element.classList.contains(CHECKBOX_IND_CLASS)).toEqual(indeterminate); + } + + public static getCheckboxElement(name: string, element: DebugElement, fix) { + const checkboxElements = element.queryAll(By.css('igx-checkbox')); + const chkElement = checkboxElements.find((el) => + (el.context as IgxCheckboxComponent).placeholderLabel.nativeElement.innerText === name); + + return chkElement; + } + + public static getCheckboxInput(name: string, element: DebugElement, fix) { + const checkboxEl = ControlsFunction.getCheckboxElement(name, element, fix); + const chkInput = checkboxEl.query(By.css('input')).nativeElement as HTMLInputElement; + + return chkInput; + } + + public static getCheckboxInputs(element: DebugElement): HTMLInputElement[] { + const checkboxElements = element.queryAll(By.css('igx-checkbox')); + const inputs = []; + checkboxElements.forEach((el) => { + inputs.push(el.query(By.css('input')).nativeElement as HTMLInputElement); + }); + + return inputs; + } + + public static verifyCheckbox(name: string, isChecked: boolean, isDisabled: boolean, element: DebugElement, fix) { + const chkInput = ControlsFunction.getCheckboxInput(name, element, fix); + expect(chkInput.type).toBe('checkbox'); + expect(chkInput.disabled).toBe(isDisabled); + expect(chkInput.checked).toBe(isChecked); + } + + /** + * Formats a date according to the provided formatting options + * @param date Date to be formatted + * @param formatOptions DateTime formatting options + * @param locale Date language + */ + public static formatDate(date: Date, formatOptions: object, locale = 'en-US'): string { + const dateFormatter = new Intl.DateTimeFormat(locale, formatOptions); + return `${dateFormatter.format(date)}`; + } }