Skip to content

Commit

Permalink
chore: use KeyboardEvent constructor in datepicker tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinbuhmann
kevinbuhmann committed Jan 10, 2023
1 parent b41ac97 commit 3a0f109
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 39 deletions.
9 changes: 4 additions & 5 deletions projects/angular/src/forms/datepicker/calendar.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { DateNavigationService } from './providers/date-navigation.service';
import { DatepickerFocusService } from './providers/datepicker-focus.service';
import { LocaleHelperService } from './providers/locale-helper.service';
import { ViewManagerService } from './providers/view-manager.service';
import { createKeyboardEvent } from './utils/test-utils';

export default function () {
describe('Calendar Component', () => {
Expand Down Expand Up @@ -102,7 +101,7 @@ export default function () {
dateNavigationService.initializeCalendar();
dateNavigationService.focusedDay = new DayModel(2015, 0, 2);

const upArrowEvent = createKeyboardEvent(Keys.ArrowUp, 'keydown');
const upArrowEvent = new KeyboardEvent('keydown', { key: Keys.ArrowUp });

context.clarityDirective.onKeyDown(upArrowEvent);

Expand All @@ -118,7 +117,7 @@ export default function () {
dateNavigationService.initializeCalendar();
dateNavigationService.focusedDay = new DayModel(2014, 11, 25);

const downArrowEvent = createKeyboardEvent(Keys.ArrowDown, 'keydown');
const downArrowEvent = new KeyboardEvent('keydown', { key: Keys.ArrowDown });

context.clarityDirective.onKeyDown(downArrowEvent);

Expand All @@ -134,7 +133,7 @@ export default function () {
dateNavigationService.initializeCalendar();
dateNavigationService.focusedDay = new DayModel(2015, 0, 2);

const leftArrowEvent = createKeyboardEvent(Keys.ArrowLeft, 'keydown');
const leftArrowEvent = new KeyboardEvent('keydown', { key: Keys.ArrowLeft });

context.clarityDirective.onKeyDown(leftArrowEvent);

Expand All @@ -150,7 +149,7 @@ export default function () {
dateNavigationService.initializeCalendar();
dateNavigationService.focusedDay = new DayModel(2014, 11, 31);

const rightArrowEvent = createKeyboardEvent(Keys.ArrowRight, 'keydown');
const rightArrowEvent = new KeyboardEvent('keydown', { key: Keys.ArrowRight });

context.clarityDirective.onKeyDown(rightArrowEvent);

Expand Down
33 changes: 16 additions & 17 deletions projects/angular/src/forms/datepicker/monthpicker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { DateNavigationService } from './providers/date-navigation.service';
import { DatepickerFocusService } from './providers/datepicker-focus.service';
import { LocaleHelperService } from './providers/locale-helper.service';
import { ViewManagerService } from './providers/view-manager.service';
import { createKeyboardEvent } from './utils/test-utils';

export default function () {
describe('Monthpicker Component', () => {
Expand Down Expand Up @@ -92,25 +91,25 @@ export default function () {
const buttons: HTMLButtonElement[] = context.clarityElement.querySelectorAll('button');
expect(buttons[1].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
context.detectChanges();

expect(buttons[1].tabIndex).toBe(-1);
expect(buttons[2].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowUp, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowUp }));
context.detectChanges();

expect(buttons[2].tabIndex).toBe(-1);
expect(buttons[1].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
context.detectChanges();

expect(buttons[1].tabIndex).toBe(-1);
expect(buttons[7].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
context.detectChanges();

expect(buttons[7].tabIndex).toBe(-1);
Expand Down Expand Up @@ -206,7 +205,7 @@ export default function () {
expect(context.clarityDirective.getTabIndex(11)).toBe(0, "Month 11 doesn't have tabindex 0");

for (let i = 10; i >= 0; i--) {
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowUp, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowUp }));
expect(context.clarityDirective.getTabIndex(i)).toBe(0, 'Month ' + i + " doesn't have tabindex 0");
expect(context.clarityDirective.getTabIndex(i + 1)).toBe(
-1,
Expand All @@ -216,7 +215,7 @@ export default function () {

// Boundary
expect(context.clarityDirective.getTabIndex(0)).toBe(0, "Month 0 does't have tabindex 0");
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowUp, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowUp }));
expect(context.clarityDirective.getTabIndex(0)).toBe(0, "Month 0 does't have tabindex 0");
});

Expand All @@ -226,7 +225,7 @@ export default function () {
expect(context.clarityDirective.getTabIndex(0)).toBe(0, "Month 0 doesn't have tabindex 0");

for (let i = 1; i <= 11; i++) {
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
expect(context.clarityDirective.getTabIndex(i)).toBe(0, 'Month ' + i + " doesn't have tabindex 0");
expect(context.clarityDirective.getTabIndex(i - 1)).toBe(
-1,
Expand All @@ -236,7 +235,7 @@ export default function () {

// Boundary
expect(context.clarityDirective.getTabIndex(11)).toBe(0, "Month 11 does't have tabindex 0");
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
expect(context.clarityDirective.getTabIndex(11)).toBe(0, "Month 11 does't have tabindex 0");
});

Expand All @@ -249,19 +248,19 @@ export default function () {
// Inner for loop tests boundary
// We start with the 0th index and move right twice
for (let j = 0; j < 2; j++) {
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
expect(context.clarityDirective.getTabIndex(i + 6)).toBe(0, 'Month ' + (i + 6) + "doesn't have tabindex 0");
expect(context.clarityDirective.getTabIndex(i)).toBe(-1, 'Month ' + i + "doesn't have tabindex -1");
}

// After each boundary test we adjust the focus to the next month
// Jan -> Feb -> Mar -> Apr -> May -> Jun
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
}

expect(context.clarityDirective.getTabIndex(5)).toBe(0, "Month 5 doesn't have the tabindex 0");
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
expect(context.clarityDirective.getTabIndex(5)).toBe(-1, "Month 5 doesn't have the tabindex -1");
expect(context.clarityDirective.getTabIndex(11)).toBe(0, "Month 11 doesn't have the tabindex -1");
});
Expand All @@ -274,7 +273,7 @@ export default function () {
// Inner for loop tests boundary
// We start with the 6th index and move left twice
for (let j = 0; j < 2; j++) {
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
expect(context.clarityDirective.getTabIndex(i)).toBe(0, 'Month ' + i + "doesn't have tabindex 0");
expect(context.clarityDirective.getTabIndex(i + 6)).toBe(
-1,
Expand All @@ -284,12 +283,12 @@ export default function () {

// After each boundary test we adjust the focus to the next month
// Jul -> Aug -> Sept -> Oct -> Nov -> Dec
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
}

expect(context.clarityDirective.getTabIndex(11)).toBe(0, "Month 11 doesn't have the tabindex 0");
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
expect(context.clarityDirective.getTabIndex(5)).toBe(0, "Month 5 doesn't have the tabindex 0");
expect(context.clarityDirective.getTabIndex(11)).toBe(-1, "Month 11 doesn't have the tabindex -1");
});
Expand Down
6 changes: 0 additions & 6 deletions projects/angular/src/forms/datepicker/utils/test-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@
* The full license information can be found in LICENSE in the root directory of this project.
*/

export function createKeyboardEvent(key: string, type: string): KeyboardEvent {
const event: KeyboardEvent = new KeyboardEvent(type);
Object.defineProperties(event, { key: { get: () => key } });
return event;
}

export function assertEqualDates(date1: Date, date2: Date): boolean {
return (
date1.getFullYear() === date2.getFullYear() &&
Expand Down
21 changes: 10 additions & 11 deletions projects/angular/src/forms/datepicker/yearpicker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { DateNavigationService } from './providers/date-navigation.service';
import { DatepickerFocusService } from './providers/datepicker-focus.service';
import { LocaleHelperService } from './providers/locale-helper.service';
import { ViewManagerService } from './providers/view-manager.service';
import { createKeyboardEvent } from './utils/test-utils';
import { ClrYearpicker } from './yearpicker';

export default function () {
Expand Down Expand Up @@ -140,25 +139,25 @@ export default function () {

expect(buttons[3].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
context.detectChanges();

expect(buttons[3].tabIndex).toBe(-1);
expect(buttons[4].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowUp, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowUp }));
context.detectChanges();

expect(buttons[4].tabIndex).toBe(-1);
expect(buttons[3].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
context.detectChanges();

expect(buttons[3].tabIndex).toBe(-1);
expect(buttons[8].tabIndex).toBe(0);

context.clarityElement.dispatchEvent(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityElement.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
context.detectChanges();

expect(buttons[8].tabIndex).toBe(-1);
Expand Down Expand Up @@ -294,7 +293,7 @@ export default function () {
expect(context.clarityDirective.yearRangeModel.inRange(2009)).toBe(false);

for (let i = 2009; i >= 2000; i--) {
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowUp, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowUp }));
expect(context.clarityDirective.getTabIndex(i)).toBe(0);
}

Expand All @@ -309,7 +308,7 @@ export default function () {
expect(context.clarityDirective.yearRangeModel.inRange(2010)).toBe(false);

for (let i = 2010; i <= 2019; i++) {
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowDown, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowDown }));
expect(context.clarityDirective.getTabIndex(i)).toBe(0);
}

Expand All @@ -319,25 +318,25 @@ export default function () {
it('handles right arrow', function () {
createYearPicker(this, 2001);
expect(context.clarityDirective.getTabIndex(2001)).toBe(0);
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
expect(context.clarityDirective.getTabIndex(2006)).toBe(0);

// Boundary
expect(context.clarityDirective.yearRangeModel.inRange(2011)).toBe(false);
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowRight, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
expect(context.clarityDirective.yearRangeModel.inRange(2011)).toBe(true);
expect(context.clarityDirective.getTabIndex(2011)).toBe(0);
});

it('handles left arrow', function () {
createYearPicker(this, 2005);
expect(context.clarityDirective.getTabIndex(2005)).toBe(0);
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
expect(context.clarityDirective.getTabIndex(2000)).toBe(0);

// Boundary
expect(context.clarityDirective.yearRangeModel.inRange(1995)).toBe(false);
context.clarityDirective.onKeyDown(createKeyboardEvent(Keys.ArrowLeft, 'keydown'));
context.clarityDirective.onKeyDown(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
expect(context.clarityDirective.yearRangeModel.inRange(1995)).toBe(true);
expect(context.clarityDirective.getTabIndex(1995)).toBe(0);
});
Expand Down

0 comments on commit 3a0f109

Please sign in to comment.