@rifansi/angular-datetime-picker
Version:
Angular Date Time Picker
1,254 lines (1,037 loc) • 103 kB
text/typescript
/**
* date-time-picker.component.spec
*/
import { OwlDateTimeComponent } from './date-time-picker.component';
import {
ComponentFixture,
fakeAsync,
flush,
inject,
TestBed
} from '@angular/core/testing';
import {
Component,
FactoryProvider,
Type,
ValueProvider,
ViewChild
} from '@angular/core';
import { OwlDateTimeInputDirective } from './date-time-picker-input.directive';
import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { OwlDateTimeModule } from './date-time.module';
import { OverlayContainer } from '@angular/cdk/overlay';
import { OwlNativeDateTimeModule } from './adapter/native-date-time.module';
import {
dispatchKeyboardEvent,
dispatchMouseEvent,
createKeyboardEvent,
dispatchEvent,
dispatchFakeEvent
} from '../../test-helpers';
import { ENTER, ESCAPE, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { By } from '@angular/platform-browser';
import { OwlDateTimeContainerComponent } from './date-time-picker-container.component';
import { OwlDateTimeTriggerDirective } from './date-time-picker-trigger.directive';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import {DateView} from './date-time.class';
const JAN = 0,
FEB = 1,
MAR = 2,
APR = 3,
MAY = 4,
JUN = 5,
JUL = 6,
AUG = 7,
SEP = 8,
OCT = 9,
NOV = 10,
DEC = 11;
describe('OwlDateTimeComponent', () => {
const SUPPORTS_INTL = typeof Intl !== 'undefined';
// Creates a test component fixture.
function createComponent(
component: Type<any>,
imports: Type<any>[] = [],
providers: (FactoryProvider | ValueProvider)[] = [],
entryComponents: Type<any>[] = []
): ComponentFixture<any> {
TestBed.configureTestingModule({
imports: [
FormsModule,
OwlDateTimeModule,
NoopAnimationsModule,
ReactiveFormsModule,
...imports
],
providers,
declarations: [component, ...entryComponents]
});
TestBed.overrideModule(BrowserDynamicTestingModule, {
}).compileComponents();
return TestBed.createComponent(component);
}
afterEach(inject([OverlayContainer], (container: OverlayContainer) => {
container.ngOnDestroy();
}));
describe('with OwlNativeDateTimeModule', () => {
describe('standard DateTimePicker', () => {
let fixture: ComponentFixture<StandardDateTimePickerComponent>;
let testComponent: StandardDateTimePickerComponent;
let containerElement: HTMLElement;
beforeEach(fakeAsync(() => {
fixture = createComponent(StandardDateTimePickerComponent, [
OwlNativeDateTimeModule
]);
fixture.detectChanges();
testComponent = fixture.componentInstance;
}));
afterEach(fakeAsync(() => {
testComponent.dateTimePicker.close();
fixture.detectChanges();
flush();
}));
it('should initialize with correct value shown in input', () => {
if (SUPPORTS_INTL) {
expect(
fixture.nativeElement.querySelector('input').value
).toBe('1/1/2020, 12:00 AM');
}
});
it('should open popup when pickerMode is "popup"', () => {
expect(
document.querySelector('.cdk-overlay-pane.owl-dt-popup')
).toBeNull();
testComponent.dateTimePicker.open();
fixture.detectChanges();
expect(
document.querySelector('.cdk-overlay-pane.owl-dt-popup')
).not.toBeNull();
});
it('should open dialog when pickerMode is "dialog"', () => {
testComponent.pickerMode = 'dialog';
fixture.detectChanges();
expect(
document.querySelector(
'.owl-dt-dialog owl-dialog-container'
)
).toBeNull();
testComponent.dateTimePicker.open();
fixture.detectChanges();
expect(
document.querySelector(
'.owl-dt-dialog owl-dialog-container'
)
).not.toBeNull();
});
it('should open dateTimePicker if opened input is set to true', fakeAsync(() => {
testComponent.opened = true;
fixture.detectChanges();
flush();
expect(
document.querySelector('.owl-dt-container')
).not.toBeNull();
testComponent.opened = false;
fixture.detectChanges();
flush();
expect(document.querySelector('.owl-dt-container')).toBeNull();
}));
it('should NOT open dateTimePicker if it is disabled', () => {
testComponent.disabled = true;
fixture.detectChanges();
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
expect(
document.querySelector('owl-date-time-container')
).toBeNull();
testComponent.dateTimePicker.open();
fixture.detectChanges();
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
expect(
document.querySelector('owl-date-time-container')
).toBeNull();
});
it('disabled dateTimePicker input should open the picker panel if dateTimePicker is enabled', () => {
testComponent.dateTimePicker.disabled = false;
testComponent.dateTimePickerInput.disabled = true;
fixture.detectChanges();
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
testComponent.dateTimePicker.open();
fixture.detectChanges();
expect(
document.querySelector('.cdk-overlay-pane')
).not.toBeNull();
});
it('should close popup when fn close is called', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
const popup = document.querySelector('.cdk-overlay-pane');
expect(popup).not.toBeNull();
expect(
parseInt(getComputedStyle(popup).height, 10)
).not.toBe(0);
testComponent.dateTimePicker.close();
fixture.detectChanges();
flush();
const newHeight = getComputedStyle(popup).height;
expect(newHeight).toBe('0px');
}));
it('should close the popup when pressing ESCAPE', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be open.'
);
dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
}));
it('should close dialog when fn close is called', fakeAsync(() => {
testComponent.pickerMode = 'dialog';
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(
document.querySelector('owl-dialog-container')
).not.toBeNull();
testComponent.dateTimePicker.close();
fixture.detectChanges();
flush();
expect(
document.querySelector('owl-dialog-container')
).toBeNull();
}));
it('should close popup panel when cancel button clicked', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const btns = containerElement.querySelectorAll(
'.owl-dt-container-control-button'
);
dispatchMouseEvent(btns[0], 'click'); // 'Cancel' button
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
}));
it('should close popup panel and not update input value when cancel button clicked', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const monthCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
(monthCell as HTMLElement).click();
fixture.detectChanges();
const btns = containerElement.querySelectorAll(
'.owl-dt-container-control-button'
);
dispatchMouseEvent(btns[0], 'click'); // 'Cancel' button
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
expect(testComponent.dateTimePickerInput.value).toEqual(
new Date(2020, JAN, 1)
); // not update to clicked value
}));
it('should update input value to pickerMoment value and close popup panel when set button clicked', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
expect(
containerDebugElement.componentInstance.pickerMoment
).toEqual(new Date(2020, JAN, 1));
const btns = containerElement.querySelectorAll(
'.owl-dt-container-control-button'
);
dispatchMouseEvent(btns[1], 'click'); // 'Set' button
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
expect(testComponent.dateTimePickerInput.value).toEqual(
new Date(2020, JAN, 1)
);
}));
it('should update input value to clicked date value and close popup panel when set button clicked', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
expect(
containerDebugElement.componentInstance.pickerMoment
).toEqual(new Date(2020, JAN, 1));
const monthCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
(monthCell as HTMLElement).click();
fixture.detectChanges();
const btns = containerElement.querySelectorAll(
'.owl-dt-container-control-button'
);
dispatchMouseEvent(btns[1], 'click'); // 'Set' button
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
expect(testComponent.dateTimePickerInput.value).toEqual(
new Date(2020, JAN, 2)
);
}));
it('should set startAt fallback to input value', () => {
expect(testComponent.dateTimePicker.startAt).toEqual(
new Date(2020, JAN, 1)
);
});
it('input should aria-owns owl-date-time-container after opened in popup mode', fakeAsync(() => {
const inputEl = fixture.debugElement.query(By.css('input'))
.nativeElement;
expect(inputEl.getAttribute('aria-owns')).toBeNull();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
fixture.detectChanges();
const ownedElementId = inputEl.getAttribute('aria-owns');
expect(ownedElementId).not.toBeNull();
const ownedElement = document.getElementById(ownedElementId);
expect(ownedElement).not.toBeNull();
expect((ownedElement as Element).tagName.toLowerCase()).toBe(
'owl-date-time-container'
);
}));
it('input should aria-owns owl-date-time-container after opened in dialog mode', fakeAsync(() => {
testComponent.pickerMode = 'dialog';
fixture.detectChanges();
const inputEl = fixture.debugElement.query(By.css('input'))
.nativeElement;
expect(inputEl.getAttribute('aria-owns')).toBeNull();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
fixture.detectChanges();
const ownedElementId = inputEl.getAttribute('aria-owns');
expect(ownedElementId).not.toBeNull();
const ownedElement = document.getElementById(ownedElementId);
expect(ownedElement).not.toBeNull();
expect((ownedElement as Element).tagName.toLowerCase()).toBe(
'owl-date-time-container'
);
}));
it('should close the picker popup panel using ALT + UP_ARROW', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(true);
const event = createKeyboardEvent('keydown', UP_ARROW);
Object.defineProperty(event, 'altKey', { get: () => true });
dispatchEvent(document.body, event);
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(false);
}));
describe('with only calendar', () => {
beforeEach(() => {
testComponent.pickerType = 'calendar';
fixture.detectChanges();
});
it('should initialize with correct value shown in input', () => {
if (SUPPORTS_INTL) {
expect(
fixture.nativeElement.querySelector('input').value
).toBe('1/1/2020');
}
});
it('should NOT have any container control button', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const btns = containerElement.querySelectorAll(
'.owl-dt-container-control-button'
);
expect(btns.length).toBe(0);
}));
it('should update input value to clicked date value and close popup panel when date cell is clicked', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
expect(
containerDebugElement.componentInstance.pickerMoment
).toEqual(new Date(2020, JAN, 1));
const dateCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
expect(testComponent.dateTimePickerInput.value).toEqual(
new Date(2020, JAN, 2)
);
}));
it('should update input value to clicked date value and close popup panel when date cell is clicked via pressing enter',
fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
expect(
containerDebugElement.componentInstance.pickerMoment
).toEqual(new Date(2020, JAN, 1));
const calendarBodyEl = containerElement.querySelector(
'.owl-dt-calendar-body'
);
dispatchKeyboardEvent(
calendarBodyEl,
'keydown',
RIGHT_ARROW
);
fixture.detectChanges();
flush();
dispatchKeyboardEvent(calendarBodyEl, 'keydown', ENTER);
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
expect(testComponent.dateTimePickerInput.value).toEqual(
new Date(2020, JAN, 2)
);
}));
it('should close popup panel when click on the selected date', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
expect(
containerDebugElement.componentInstance.pickerMoment
).toEqual(new Date(2020, JAN, 1));
expect(testComponent.dateTimePicker.selected).toEqual(
new Date(2020, JAN, 1)
);
const dateCell = containerElement.querySelector(
'[aria-label="January 1, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
expect(testComponent.dateTimePickerInput.value).toEqual(
new Date(2020, JAN, 1)
);
}));
});
describe('with only timer', () => {
beforeEach(() => {
testComponent.pickerType = 'timer';
fixture.detectChanges();
});
it('should initialize with correct value shown in input', () => {
if (SUPPORTS_INTL) {
expect(
fixture.nativeElement.querySelector('input').value
).toBe('12:00 AM');
}
});
it('should have container control buttons', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const btns = containerElement.querySelectorAll(
'.owl-dt-container-control-button'
);
expect(btns.length).toBe(2);
}));
});
});
describe('range DateTimePicker', () => {
let fixture: ComponentFixture<RangeDateTimePickerComponent>;
let testComponent: RangeDateTimePickerComponent;
let containerElement: HTMLElement;
beforeEach(fakeAsync(() => {
fixture = createComponent(RangeDateTimePickerComponent, [
OwlNativeDateTimeModule
]);
fixture.detectChanges();
testComponent = fixture.componentInstance;
}));
afterEach(fakeAsync(() => {
testComponent.dateTimePicker.close();
fixture.detectChanges();
flush();
}));
it('should initialize with correct value shown in input', () => {
if (SUPPORTS_INTL) {
expect(
fixture.nativeElement.querySelector('input').value
).toBe('1/1/2020, 12:00 AM - 2/1/2020, 12:00 AM');
}
});
it('should have default activeSelectedIndex value as 0', () => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
expect(
containerDebugElement.componentInstance.activeSelectedIndex
).toBe(0);
});
it('clicking the dateCell should set the rangeFrom value when both rangeFrom and rangeTo had NO value', fakeAsync(() => {
testComponent.dates = [];
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(0);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(
containerDebugElement.componentInstance.activeSelectedIndex
).toBe(0);
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
expect(testComponent.dateTimePicker.selecteds[0]).toEqual(
new Date(2020, JAN, 2)
);
expect(testComponent.dateTimePicker.selecteds[1]).toBe(null);
}));
it('clicking the dateCell should set the rangeFrom value when both rangeFrom and rangeTo already had value', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(
containerDebugElement.componentInstance.activeSelectedIndex
).toBe(0);
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
expect(testComponent.dateTimePicker.selecteds[0]).toEqual(
new Date(2020, JAN, 2)
);
expect(testComponent.dateTimePicker.selecteds[1]).toBe(null);
}));
it('clicking the dateCell should set the rangeFrom value when dateCell value is before the old rangeFrom value',
fakeAsync(() => {
testComponent.dates = [new Date(2020, JAN, 2), null];
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 1, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(
containerDebugElement.componentInstance.activeSelectedIndex
).toBe(0);
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
expect(testComponent.dateTimePicker.selecteds[0]).toEqual(
new Date(2020, JAN, 1)
);
expect(testComponent.dateTimePicker.selecteds[1]).toBe(null);
}));
it('clicking the dateCell should set the rangeTo value when rangeFrom already had value', fakeAsync(() => {
testComponent.dates = [new Date(2020, JAN, 2), null];
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 3, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(
containerDebugElement.componentInstance.activeSelectedIndex
).toBe(1);
expect(testComponent.dateTimePicker.selecteds.length).toBe(2);
expect(testComponent.dateTimePicker.selecteds[0]).toEqual(
new Date(2020, JAN, 2)
);
expect(testComponent.dateTimePicker.selecteds[1]).toEqual(
new Date(2020, JAN, 3)
);
}));
it('if startAt value is set, the start time value should be shown in the rangeTo calendar start time', fakeAsync(() => {
testComponent.startAt = new Date('1/19/2020, 09:33 AM');
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const timeCells = containerElement.querySelectorAll<HTMLInputElement>('.owl-dt-timer-input');
expect(timeCells[0].value).toEqual('09');
expect(timeCells[1].value).toEqual('33');
}));
it('if endAt value is set, the end time value should be shown in the rangeTo calendar end time', fakeAsync(() => {
testComponent.dates = [new Date(2020, JAN, 2), null];
testComponent.endAt = new Date('1/19/2020, 10:55 PM');
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 20, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
const timeCells = containerElement.querySelectorAll<HTMLInputElement>('.owl-dt-timer-input');
expect(timeCells[0].value).toEqual('22');
expect(timeCells[1].value).toEqual('55');
}));
it('auto select previous time if dates is selected', fakeAsync(() => {
testComponent.dates = [new Date('1/19/2020, 09:33 AM'), new Date('1/22/2020, 10:44 PM')];
testComponent.dateTimePicker.open();
fixture.detectChanges();
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 20, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
const timeInput = containerElement.querySelectorAll<HTMLInputElement>('.owl-dt-timer-input');
expect(timeInput[0].value).toEqual('09');
expect(timeInput[1].value).toEqual('33');
}));
it('should have the container info row', () => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const infoRow = containerElement.querySelector(
'.owl-dt-container-info'
);
expect(infoRow).toBeTruthy();
});
it('should set the activeSelectedIndex via clicking the info row radio', fakeAsync(() => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const radioBtns = containerElement.querySelectorAll(
'.owl-dt-container-range'
);
for (let i = 0; i < radioBtns.length; i++) {
dispatchMouseEvent(radioBtns[i], 'click');
fixture.detectChanges();
flush();
expect(
containerDebugElement.componentInstance
.activeSelectedIndex
).toBe(i);
}
}));
describe('with only calendar', () => {
beforeEach(() => {
testComponent.pickerType = 'calendar';
fixture.detectChanges();
});
it('should initialize with correct value shown in input', () => {
if (SUPPORTS_INTL) {
expect(
fixture.nativeElement.querySelector('input').value
).toBe('1/1/2020 - 2/1/2020');
}
});
it('should NOT close the dateTimePicker popup panel when only the rangeFrom value is selected', fakeAsync(() => {
testComponent.dates = [];
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(
0
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const dateCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.opened).toBe(
true,
'Expected dateTimePicker to be opened.'
);
}));
it('should close the dateTimePicker popup panel when both the rangeFrom and the rangeTo value are selected',
fakeAsync(() => {
testComponent.dates = [];
fixture.detectChanges();
testComponent.dateTimePicker.open();
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(
0
);
const containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
let dateCell = containerElement.querySelector(
'[aria-label="January 2, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
dateCell = containerElement.querySelector(
'[aria-label="January 3, 2020"]'
);
dispatchMouseEvent(dateCell, 'click');
fixture.detectChanges();
flush();
expect(testComponent.dateTimePicker.selecteds.length).toBe(
2
);
expect(testComponent.dateTimePicker.opened).toBe(
false,
'Expected dateTimePicker to be closed.'
);
}));
});
});
describe('DateTimePicker with too many inputs', () => {
it('should throw when multiple inputs registered', fakeAsync(() => {
const fixture = createComponent(MultiInputDateTimePickerComponent, [
OwlNativeDateTimeModule
]);
expect(() => fixture.detectChanges()).toThrow();
}));
});
describe('DateTimePicker with no input', () => {
let fixture: ComponentFixture<NoInputDateTimePickerComponent>;
let testComponent: NoInputDateTimePickerComponent;
beforeEach(fakeAsync(() => {
fixture = createComponent(NoInputDateTimePickerComponent, [
OwlNativeDateTimeModule
]);
fixture.detectChanges();
testComponent = fixture.componentInstance;
}));
afterEach(fakeAsync(() => {
testComponent.dateTimePicker.close();
fixture.detectChanges();
}));
it('should NOT throw when accessing disabled property', () => {
expect(
() => testComponent.dateTimePicker.disabled
).not.toThrow();
});
it('should throw when opened with no registered inputs', fakeAsync(() => {
expect(() => testComponent.dateTimePicker.open()).toThrow();
}));
});
describe('DateTimePicker with startAt', () => {
let fixture: ComponentFixture<DateTimePickerWithStartAtComponent>;
let testComponent: DateTimePickerWithStartAtComponent;
beforeEach(fakeAsync(() => {
fixture = createComponent(DateTimePickerWithStartAtComponent, [
OwlNativeDateTimeModule
]);
fixture.detectChanges();
testComponent = fixture.componentInstance;
}));
afterEach(fakeAsync(() => {
testComponent.dateTimePicker.close();
fixture.detectChanges();
}));
it('should override input value by explicit startAt', () => {
expect(testComponent.dateTimePicker.startAt).toEqual(
new Date(2010, JAN, 1)
);
});
});
describe('DateTimePicker with startView', () => {
let fixture: ComponentFixture<DateTimePickerWithStartViewComponent>;
let testComponent: DateTimePickerWithStartViewComponent;
let containerDebugElement;
let containerElement;
beforeEach(() => {
fixture = createComponent(DateTimePickerWithStartViewComponent, [
OwlNativeDateTimeModule
]);
fixture.detectChanges();
testComponent = fixture.componentInstance;
});
afterEach(() => {
testComponent.dateTimePicker.close();
fixture.detectChanges();
});
describe('set to year', () => {
beforeEach(() => {
testComponent.startView = DateView.YEAR;
fixture.detectChanges();
});
it('should start at the year view', () => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const yearTable = containerElement.querySelector(
'table.owl-dt-calendar-year-table'
);
expect(yearTable).toBeTruthy();
});
it('should fire monthSelected when user selects calendar month in year view', fakeAsync(() => {
spyOn(testComponent, 'onMonthSelection');
expect(
testComponent.onMonthSelection
).not.toHaveBeenCalled();
testComponent.dateTimePicker.open();
fixture.detectChanges();
containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const cells = containerElement.querySelectorAll(
'.owl-dt-calendar-cell'
);
dispatchMouseEvent(cells[0], 'click');
fixture.detectChanges();
flush();
expect(testComponent.onMonthSelection).toHaveBeenCalled();
}));
});
describe('set to multi-years', () => {
beforeEach(() => {
testComponent.startView = DateView.MULTI_YEARS;
fixture.detectChanges();
});
it('should start at the multi-years view', () => {
testComponent.dateTimePicker.open();
fixture.detectChanges();
containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const multiYearTable = containerElement.querySelector(
'table.owl-dt-calendar-multi-year-table'
);
expect(multiYearTable).toBeTruthy();
});
it('should fire yearSelected when user selects calendar year in multi-years view', fakeAsync(() => {
spyOn(testComponent, 'onYearSelection');
expect(
testComponent.onYearSelection
).not.toHaveBeenCalled();
testComponent.dateTimePicker.open();
fixture.detectChanges();
containerDebugElement = fixture.debugElement.query(
By.directive(OwlDateTimeContainerComponent)
);
containerElement = containerDebugElement.nativeElement;
const cells = containerElement.querySelectorAll(
'.owl-dt-calendar-cell'
);
dispatchMouseEvent(cells[0], 'click');
fixture.detectChanges();
flush();
expect(testComponent.onYearSelection).toHaveBeenCalled();
}));
});
});
describe('DateTimePicker with NgModel', () => {
let fixture: ComponentFixture<DateTimePickerWithNgModelComponent>;
let testComponent: DateTimePickerWithNgModelComponent;
beforeEach(fakeAsync(() => {
fixture = createComponent(DateTimePickerWithNgModelComponent, [
OwlNativeDateTimeModule
]);
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
testComponent = fixture.componentInstance;
});
}));
afterEach(fakeAsync(() => {
testComponent.dateTimePicker.close();
fixture.detectChanges();
flush();
}));
it('should update dateTimePicker when model changes', fakeAsync(() => {
expect(testComponent.dateTimePickerInput.value).toBeNull();
expect(testComponent.dateTimePicker.selected).toBeNull();
const selected = new Date(2017, JAN, 1);
testComponent.moment = selected;
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.dateTimePickerInput.value).toEqual(
selected
);
expect(testComponent.dateTimePicker.selected).toEqual(selected);
}));
it('should update model when date is selected', fakeAsync(() => {
expect(testComponent.moment).toBeNull();
expect(testComponent.dateTimePickerInput.value).toBeNull();
const selected = new Date(2017, JAN, 1);
testComponent.dateTimePicker.select(selected);
fixture.detectChanges();
flush();
testComponent.dateTimePicker.confirmSelect();
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.moment).toEqual(selected);
expect(testComponent.dateTimePickerInput.value).toEqual(
selected
);
}));
it('should mark input dirty after input event', () => {
const inputEl = fixture.debugElement.query(By.css('input'))
.nativeElement;
expect(inputEl.classList).toContain('ng-pristine');
inputEl.value = '2001-01-01';
dispatchFakeEvent(inputEl, 'input');
fixture.detectChanges();
expect(inputEl.classList).toContain('ng-dirty');
});
it('should mark input dirty after date selected', fakeAsync(() => {
const inputEl = fixture.debugElement.query(By.css('input'))
.nativeElement;
expect(inputEl.classList).toContain('ng-pristine');
testComponent.dateTimePicker.select(new Date(2017, JAN, 1));
fixture.detectChanges();
flush();
testComponent.dateTimePicker.confirmSelect();