Skip to content

Commit

Permalink
test: make keyboard tests more reliable (#3659)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen authored Apr 11, 2022
1 parent 9a05f70 commit 8019343
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 19 deletions.
16 changes: 15 additions & 1 deletion packages/date-picker/test/common.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { listenOnce } from '@vaadin/testing-helpers';
import { listenOnce, nextRender, oneEvent } from '@vaadin/testing-helpers';
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';

export function activateScroller(scroller) {
Expand Down Expand Up @@ -134,3 +134,17 @@ export function getFocusedCell(overlayContent) {

return focusedCell;
}

/**
* Waits for the scroll to finish in the date-picker overlay content.
*
* @param {HTMLElement} overlayContent
*/
export async function waitForScrollToFinish(overlayContent) {
if (overlayContent._targetPosition) {
// The overlay content is scrolling.
await oneEvent(overlayContent, 'scroll-animation-finished');
}

await nextRender(overlayContent);
}
6 changes: 3 additions & 3 deletions packages/date-picker/test/keyboard-input.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { expect } from '@esm-bundle/chai';
import { aTimeout, enter, fixtureSync, listenOnce, nextRender, oneEvent, tap } from '@vaadin/testing-helpers';
import { aTimeout, enter, fixtureSync, listenOnce, nextRender, tap } from '@vaadin/testing-helpers';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import './not-animated-styles.js';
import '../vaadin-date-picker.js';
import { close, getFocusedCell, getOverlayContent, open } from './common.js';
import { close, getFocusedCell, getOverlayContent, open, waitForScrollToFinish } from './common.js';

describe('keyboard', () => {
let datepicker;
Expand Down Expand Up @@ -60,7 +60,7 @@ describe('keyboard', () => {
it('should display focused date while overlay focused', async () => {
await sendKeys({ type: '1/2/2000' });
const content = getOverlayContent(datepicker);
await oneEvent(content, 'scroll-animation-finished');
await waitForScrollToFinish(content);

// Move focus to the calendar
await sendKeys({ press: 'Tab' });
Expand Down
47 changes: 32 additions & 15 deletions packages/date-picker/test/keyboard-navigation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import './not-animated-styles.js';
import '../vaadin-date-picker.js';
import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './common.js';
import { getDefaultI18n, getFocusedCell, getOverlayContent, open, waitForScrollToFinish } from './common.js';

(isIOS ? describe.skip : describe)('keyboard navigation', () => {
describe('date-picker', () => {
Expand Down Expand Up @@ -137,12 +137,14 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo

it('should focus one week forward with arrow down', async () => {
await sendKeys({ press: 'ArrowDown' });
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(2000, 0, 8));
});

it('should focus one week backward with arrow up', async () => {
await sendKeys({ press: 'ArrowUp' });
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(1999, 11, 25));
});
Expand Down Expand Up @@ -182,8 +184,13 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
});

it('should scroll to focused month', async () => {
const spy = sinon.spy();
overlay.addEventListener('scroll-animation-finished', spy);

await sendKeys({ press: 'ArrowUp' });
const e = await oneEvent(overlay, 'scroll-animation-finished');

await waitForScrollToFinish(overlay);
const e = spy.firstCall.args[0];
expect(e.detail.position).to.be.closeTo(e.detail.oldPosition - 1, 1);
});

Expand Down Expand Up @@ -214,12 +221,14 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo

it('should focus next month with pagedown', async () => {
await sendKeys({ press: 'PageDown' });
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(2000, 1, 1));
});

it('should focus previous month with pageup', async () => {
await sendKeys({ press: 'PageUp' });
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(1999, 11, 1));
});
Expand All @@ -228,6 +237,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
await overlay.focusDate(new Date(2000, 0, 31));
await nextRender(overlay);
await sendKeys({ press: 'PageDown' });
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(2000, 1, 29));
});
Expand All @@ -237,33 +247,36 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
await nextRender(overlay);
await sendKeys({ press: 'PageDown' });
await sendKeys({ press: 'PageDown' });
await waitForScrollToFinish(overlay);
expect(overlay.focusedDate).to.eql(new Date(2000, 2, 31));
});

it('should focus next year with shift and pagedown', async () => {
await sendKeys({ down: 'Shift' });
await sendKeys({ press: 'PageDown' });
await sendKeys({ up: 'Shift' });

await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
expect(overlay.focusedDate).to.eql(new Date(2001, 0, 1));
});

it('should focus previous year with shift and pageup', async () => {
await sendKeys({ down: 'Shift' });
await sendKeys({ press: 'PageUp' });
await sendKeys({ up: 'Shift' });

await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
expect(overlay.focusedDate).to.eql(new Date(1999, 0, 1));
});

it('should scroll up when focus goes invisible', async () => {
const spy = sinon.spy();
overlay.addEventListener('scroll-animation-finished', spy);

await sendKeys({ down: 'Shift' });
await sendKeys({ press: 'PageUp' });
await sendKeys({ up: 'Shift' });

const e = await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
const e = spy.firstCall.args[0];
expect(e.detail.position).to.be.closeTo(e.detail.oldPosition - 12, 1);
});

Expand All @@ -276,11 +289,15 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
});

it('should scroll down when focus goes invisible', async () => {
const spy = sinon.spy();
overlay.addEventListener('scroll-animation-finished', spy);

await sendKeys({ down: 'Shift' });
await sendKeys({ press: 'PageDown' });
await sendKeys({ up: 'Shift' });

const e = await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
const e = spy.firstCall.args[0];
expect(e.detail.position).to.be.greaterThan(e.detail.oldPosition);
});

Expand Down Expand Up @@ -346,7 +363,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
await sendKeys({ press: 'PageDown' });
await sendKeys({ up: 'Shift' });

await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(2000, 11, 28));
});
Expand All @@ -358,7 +375,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
await sendKeys({ press: 'PageUp' });
await sendKeys({ up: 'Shift' });

await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(1999, 5, 3));
});
Expand Down Expand Up @@ -392,7 +409,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
await sendKeys({ press: 'PageUp' });
await sendKeys({ up: 'Shift' });

await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(1999, 11, 25));
});
Expand All @@ -406,7 +423,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
await sendKeys({ press: 'PageDown' });
await sendKeys({ up: 'Shift' });

await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
const cell = getFocusedCell(overlay);
expect(cell.date).to.eql(new Date(1999, 11, 25));
});
Expand Down Expand Up @@ -467,7 +484,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
const date = new Date(99, 0, 1);
date.setFullYear(99);
overlay.focusedDate = date;
await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
await sendKeys({ press: 'ArrowRight' });
date.setDate(2);
expect(overlay.focusedDate).to.eql(date);
Expand All @@ -477,7 +494,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
const date = new Date(99, 0, 1);
date.setFullYear(99);
overlay.focusedDate = date;
await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
await sendKeys({ press: 'PageDown' });
date.setMonth(1);
expect(overlay.focusedDate).to.eql(date);
Expand All @@ -487,7 +504,7 @@ import { getDefaultI18n, getFocusedCell, getOverlayContent, open } from './commo
const date = new Date(99, 0, 1);
date.setFullYear(99);
overlay.focusedDate = date;
await oneEvent(overlay, 'scroll-animation-finished');
await waitForScrollToFinish(overlay);
await sendKeys({ press: 'End' });
date.setDate(31);
expect(overlay.focusedDate).to.eql(date);
Expand Down

0 comments on commit 8019343

Please sign in to comment.