@imihai/angular-datetime-picker 21.0.2 → 22.0.0

package/projects/picker/src/lib/date-time/calendar-month-view.component.spec.ts

@@ -0,0 +1,394 @@
+/**
+ * calendar-month-view.component.spec
+ */
+import { registerLocaleData } from '@angular/common';
+import localeDutch from '@angular/common/locales/nl';
+import { DateTimeAdapter } from './adapter/date-time-adapter.class';
+import { OwlMonthViewComponent } from './calendar-month-view.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OwlDateTimeIntl } from './date-time-picker-intl.service';
+import { OwlNativeDateTimeModule } from './adapter/native-date-time.module';
+import { OwlDateTimeModule } from './date-time.module';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { dispatchKeyboardEvent } from '../../test-helpers';
+import {
+    DOWN_ARROW,
+    END,
+    ENTER,
+    HOME,
+    LEFT_ARROW,
+    PAGE_DOWN,
+    PAGE_UP,
+    RIGHT_ARROW,
+    UP_ARROW
+} from '@angular/cdk/keycodes';
+
+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('OwlMonthViewComponent', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [OwlNativeDateTimeModule, OwlDateTimeModule],
+            declarations: [
+                StandardMonthViewComponent,
+                MonthViewWithDateFilterComponent
+            ],
+            providers: [OwlDateTimeIntl]
+        }).compileComponents();
+    });
+
+    describe('standard month view', () => {
+        let fixture: ComponentFixture<StandardMonthViewComponent>;
+        let testComponent: StandardMonthViewComponent;
+        let monthViewDebugElement: DebugElement;
+        let monthViewElement: HTMLElement;
+        let monthViewInstance: OwlMonthViewComponent<Date>;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(StandardMonthViewComponent);
+            fixture.detectChanges();
+
+            monthViewDebugElement = fixture.debugElement.query(
+                By.directive(OwlMonthViewComponent)
+            );
+            monthViewElement = monthViewDebugElement.nativeElement;
+            testComponent = fixture.componentInstance;
+            monthViewInstance = monthViewDebugElement.componentInstance;
+        });
+
+        it('should have 42 calendar day cells', () => {
+            const cellEls = monthViewElement.querySelectorAll(
+                '.owl-dt-calendar-cell'
+            );
+            expect(cellEls.length).toBe(42);
+        });
+
+        it('should show selected date if in same month', () => {
+            const selectedEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-cell-selected'
+            );
+            expect(selectedEl.innerHTML.trim()).toBe('10');
+        });
+
+        it('should NOT show selected date if in different month', () => {
+            testComponent.selected = new Date(2018, MAR, 10);
+            fixture.detectChanges();
+            const selectedEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-cell-selected'
+            );
+            expect(selectedEl).toBeNull();
+        });
+
+        it('should mark active date', () => {
+            const selectedElContent = monthViewElement.querySelector(
+                '.owl-dt-calendar-cell-active .owl-dt-calendar-cell-content'
+            );
+            expect(selectedElContent.innerHTML.trim()).toBe('5');
+        });
+
+        it('should set Sunday as first day of week by default', () => {
+            expect(monthViewInstance.firstDayOfWeek).toBe(0);
+            const weekdayCells = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Sunday');
+        });
+
+        it('should set Monday as first day of week if firstDayOfWeek set to 1', () => {
+            monthViewInstance.firstDayOfWeek = 1;
+            fixture.detectChanges();
+            const weekdayCells = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Monday');
+        });
+
+        it('should set Saturday as first day of week if firstDayOfWeek set to 6', () => {
+            monthViewInstance.firstDayOfWeek = 6;
+            fixture.detectChanges();
+            const weekdayCells = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Saturday');
+        });
+
+        it('should decrement date on left arrow press', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
+            fixture.detectChanges();
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 4));
+
+            monthViewInstance.pickerMoment = new Date(2017, JAN, 1);
+            fixture.detectChanges();
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2016, DEC, 31));
+        });
+
+        it('should increment date on right arrow press', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 6));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 7));
+        });
+
+        it('should go up a row on up arrow press', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2017, DEC, 29));
+
+            monthViewInstance.pickerMoment = new Date(2017, JAN, 7);
+            fixture.detectChanges();
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2016, DEC, 31));
+        });
+
+        it('should go down a row on down arrow press', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 12));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 19));
+        });
+
+        it('should go to beginning of the month on home press', () => {
+            monthViewInstance.pickerMoment = new Date(2018, JAN, 7);
+            fixture.detectChanges();
+
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 1));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 1));
+        });
+
+        it('should go to end of the month on end press', () => {
+            monthViewInstance.pickerMoment = new Date(2018, JAN, 7);
+            fixture.detectChanges();
+
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 31));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 31));
+        });
+
+        it('should go back one month on page up press', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2017, DEC, 5));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2017, NOV, 5));
+        });
+
+        it('should go forward one month on page down press', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, FEB, 5));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
+            fixture.detectChanges();
+
+            expect(testComponent.pickerMoment).toEqual(new Date(2018, MAR, 5));
+        });
+
+        it('should select active date on enter', () => {
+            const calendarBodyEl = monthViewElement.querySelector(
+                '.owl-dt-calendar-body'
+            );
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
+            fixture.detectChanges();
+
+            expect(testComponent.selected).toEqual(new Date(2018, JAN, 10));
+
+            dispatchKeyboardEvent(calendarBodyEl, 'keydown', ENTER);
+            fixture.detectChanges();
+
+            expect(testComponent.selected).toEqual(new Date(2018, JAN, 4));
+        });
+    });
+
+    describe('month view with date filter', () => {
+        let fixture: ComponentFixture<MonthViewWithDateFilterComponent>;
+        let monthViewNativeElement: Element;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(MonthViewWithDateFilterComponent);
+            fixture.detectChanges();
+
+            const monthViewDebugElement = fixture.debugElement.query(
+                By.directive(OwlMonthViewComponent)
+            );
+            monthViewNativeElement = monthViewDebugElement.nativeElement;
+        });
+
+        it('should disable filtered dates', () => {
+            const cellOne = monthViewNativeElement.querySelector(
+                '[aria-label="January 1, 2018"]'
+            );
+            const cellTwo = monthViewNativeElement.querySelector(
+                '[aria-label="January 2, 2018"]'
+            );
+            expect(cellOne.classList).toContain(
+                'owl-dt-calendar-cell-disabled'
+            );
+            expect(cellTwo.classList).not.toContain(
+                'owl-dt-calendar-cell-disabled'
+            );
+        });
+    });
+
+
+    describe('standard month view (locale tests)', () => {
+        let fixture: ComponentFixture<StandardMonthViewComponent>;
+        let adapter: DateTimeAdapter<unknown>;
+        let monthViewDebugElement: DebugElement;
+        let monthViewElement: HTMLElement;
+        let monthViewInstance: OwlMonthViewComponent<Date>;
+
+        beforeAll(() => {
+            registerLocaleData(localeDutch);
+        });
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(StandardMonthViewComponent);
+
+            adapter = TestBed.inject(DateTimeAdapter);
+            monthViewDebugElement = fixture.debugElement.query(
+                By.directive(OwlMonthViewComponent)
+            );
+            monthViewElement = monthViewDebugElement.nativeElement;
+            monthViewInstance = monthViewDebugElement.componentInstance;
+        });
+
+        it('should derive the first day of the week based on the active locale', () => {
+            adapter.setLocale('nl-NL');
+
+            fixture.detectChanges();
+            const weekdayCells = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCells[0].getAttribute('aria-label')).toBe('maandag');
+        });
+
+        it('should fallback to Sunday as first day of the week when when locale data is missing', () => {
+            adapter.setLocale('unknown');
+
+            fixture.detectChanges();
+            const weekdayCells = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Sunday');
+        });
+
+        it('should update the default day of the week when locale changes', () => {
+            adapter.setLocale('nl-NL');
+
+            fixture.detectChanges();
+            const weekdayCellsNl = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCellsNl[0].getAttribute('aria-label')).toBe('maandag');
+
+            adapter.setLocale('en-US');
+
+            fixture.detectChanges();
+            const weekdayCellsUs = monthViewElement.querySelectorAll(
+                '.owl-dt-weekday'
+            );
+            expect(weekdayCellsUs[0].getAttribute('aria-label')).toBe('Sunday');
+        });
+    });
+});
+
+@Component({
+    standalone: false,
+    template: `
+        <owl-date-time-month-view
+                [(selected)]="selected"
+                [(pickerMoment)]="pickerMoment"></owl-date-time-month-view>
+    `
+})
+class StandardMonthViewComponent {
+    selected = new Date(2018, JAN, 10);
+    pickerMoment = new Date(2018, JAN, 5);
+}
+
+@Component({
+    standalone: false,
+    template: `
+        <owl-date-time-month-view
+                [(pickerMoment)]="pickerMoment"
+                [dateFilter]="dateFilter"></owl-date-time-month-view>
+    `
+})
+class MonthViewWithDateFilterComponent {
+    pickerMoment = new Date(2018, JAN, 1);
+    dateFilter(date: Date) {
+      // tslint:disable-next-line:triple-equals
+        return date.getDate() % 2 === 0;
+    }
+}