Skip to content

Commit

Permalink
ci: Switch keydown uses to sendKeysElem (#3800)
Browse files Browse the repository at this point in the history 
* Switch keydown uses to sendKeysElem
* Switch to clickElem as well
  • Loading branch information
@svanherk
svanherk committed Jun 30, 2023
1 parent fcc4810 commit 4c823fe
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 45 deletions.
25 changes: 12 additions & 13 deletions components/button/test/button-move.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { keyDown } from '../../../tools/dom-test-helpers.js';
import { clickElem, expect, fixture, html, oneEvent, sendKeysElem } from '@brightspace-ui/testing';
import { moveActions } from '../button-move.js';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

Expand All @@ -16,20 +15,20 @@ describe('d2l-button-move', () => {
describe('events', () => {

[
{ name: 'up icon clicked', action: el => el.shadowRoot.querySelector('.up-layer').click(), expectedAction: moveActions.up },
{ name: 'down icon clicked', action: el => el.shadowRoot.querySelector('.down-layer').click(), expectedAction: moveActions.down },
{ name: 'up key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 38), expectedAction: moveActions.up },
{ name: 'down key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 40), expectedAction: moveActions.down },
{ name: 'left key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 37), expectedAction: moveActions.left },
{ name: 'right key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 39), expectedAction: moveActions.right },
{ name: 'home key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 36), expectedAction: moveActions.home },
{ name: 'ctrl-home key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 36, true), expectedAction: moveActions.rootHome },
{ name: 'end key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 35), expectedAction: moveActions.end },
{ name: 'ctrl-end key pressed', action: el => keyDown(el.shadowRoot.querySelector('button'), 35, true), expectedAction: moveActions.rootEnd }
{ name: 'up icon clicked', action: el => clickElem(el.shadowRoot.querySelector('.up-layer')), expectedAction: moveActions.up },
{ name: 'down icon clicked', action: el => clickElem(el.shadowRoot.querySelector('.down-layer')), expectedAction: moveActions.down },
{ name: 'up key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowUp'), expectedAction: moveActions.up },
{ name: 'down key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowDown'), expectedAction: moveActions.down },
{ name: 'left key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowLeft'), expectedAction: moveActions.left },
{ name: 'right key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowRight'), expectedAction: moveActions.right },
{ name: 'home key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Home'), expectedAction: moveActions.home },
{ name: 'ctrl-home key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Control+Home'), expectedAction: moveActions.rootHome },
{ name: 'end key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'End'), expectedAction: moveActions.end },
{ name: 'ctrl-end key pressed', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Control+End'), expectedAction: moveActions.rootEnd }
].forEach(info => {
it(`dispatches d2l-button-move-action event when ${info.name}`, async() => {
const el = await fixture(html`<d2l-button-move text="Reorder"></d2l-button-move>`);
setTimeout(() => info.action(el));
info.action(el);
const e = await oneEvent(el, 'd2l-button-move-action');
expect(e.detail.action).to.equal(info.expectedAction);
});
Expand Down
51 changes: 25 additions & 26 deletions mixins/arrow-keys/test/arrow-keys-mixin.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import '../demo/arrow-keys-test.js';
import { expect, fixture, html } from '@brightspace-ui/testing';
import { expect, fixture, html, sendKeysElem } from '@brightspace-ui/testing';
import { getComposedActiveElement } from '../../../helpers/focus.js';
import { keyDown } from '../../../tools/dom-test-helpers.js';

describe('ArrowKeysMixin', () => {

Expand All @@ -21,7 +20,7 @@ describe('ArrowKeysMixin', () => {
expect(getComposedActiveElement()).to.equal(focusables[keyInteraction.endIndex]);
done();
});
keyDown(focusables[keyInteraction.startIndex], keyInteraction.keyCode);
sendKeysElem(focusables[keyInteraction.startIndex], 'press', keyInteraction.key);
});
});
};
Expand All @@ -35,12 +34,12 @@ describe('ArrowKeysMixin', () => {

describe('left-right', () => {
testKeyInteractions([
{ name: 'focuses on next focusable when Right arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 39 },
{ name: 'focuses on previous focusable when Left arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 37 },
{ name: 'focuses on first focusable when Right arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 39 },
{ name: 'focuses on last focusable when Left arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 37 },
{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
{ name: 'focuses on next focusable when Right arrow key is pressed', startIndex: 2, endIndex: 3, key: 'ArrowRight' },
{ name: 'focuses on previous focusable when Left arrow key is pressed', startIndex: 2, endIndex: 1, key: 'ArrowLeft' },
{ name: 'focuses on first focusable when Right arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, key: 'ArrowRight' },
{ name: 'focuses on last focusable when Left arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, key: 'ArrowLeft' },
{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, key: 'Home' },
{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, key: 'End' }
]);
});

Expand All @@ -53,12 +52,12 @@ describe('ArrowKeysMixin', () => {
});

testKeyInteractions([
{ name: 'focuses on next focusable when Down arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 40 },
{ name: 'focuses on previous focusable when Up arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 38 },
{ name: 'focuses on first focusable when Down arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 40 },
{ name: 'focuses on last focusable when Up arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 38 },
{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
{ name: 'focuses on next focusable when Down arrow key is pressed', startIndex: 2, endIndex: 3, key: 'ArrowDown' },
{ name: 'focuses on previous focusable when Up arrow key is pressed', startIndex: 2, endIndex: 1, key: 'ArrowUp' },
{ name: 'focuses on first focusable when Down arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, key: 'ArrowDown' },
{ name: 'focuses on last focusable when Up arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, key: 'ArrowUp' },
{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, key: 'Home' },
{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, key: 'End' }
]);

});
Expand All @@ -77,7 +76,7 @@ describe('ArrowKeysMixin', () => {
(function(i) {
it(keyInteractions[i].name, async() => {
focusables[keyInteractions[i].startIndex].focus();
keyDown(focusables[[keyInteractions[i].startIndex]], keyInteractions[i].keyCode);
sendKeysElem(focusables[[keyInteractions[i].startIndex]], 'press', keyInteractions[i].key);
await elem.updateComplete;
expect(getComposedActiveElement()).to.equal(focusables[keyInteractions[i].startIndex]);
});
Expand All @@ -86,10 +85,10 @@ describe('ArrowKeysMixin', () => {
};

testNoWrap([
{ name: 'does not focus on last focusable when Left arrow key is pressed on first focusable', startIndex: 0, keyCode: 37 },
{ name: 'does not focus on last focusable when Up arrow key is pressed on first focusable', startIndex: 0, keyCode: 38 },
{ name: 'does not focus on first focusable when Right arrow key is pressed on last focusable', startIndex: 4, keyCode: 39 },
{ name: 'does not focus on first focusable when Down arrow key is pressed on last focusable', startIndex: 4, keyCode: 40 }
{ name: 'does not focus on last focusable when Left arrow key is pressed on first focusable', startIndex: 0, key: 'ArrowLeft' },
{ name: 'does not focus on last focusable when Up arrow key is pressed on first focusable', startIndex: 0, key: 'ArrowUp' },
{ name: 'does not focus on first focusable when Right arrow key is pressed on last focusable', startIndex: 4, key: 'ArrowRight' },
{ name: 'does not focus on first focusable when Down arrow key is pressed on last focusable', startIndex: 4, key: 'ArrowDown' }
]);
});

Expand All @@ -104,12 +103,12 @@ describe('ArrowKeysMixin', () => {

describe('right-left', () => {
testKeyInteractions([
{ name: 'focuses on previous focusable when Right arrow key is pressed', startIndex: 2, endIndex: 1, keyCode: 39 },
{ name: 'focuses on next focusable when Left arrow key is pressed', startIndex: 2, endIndex: 3, keyCode: 37 },
{ name: 'focuses on first focusable when Left arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, keyCode: 37 },
{ name: 'focuses on last focusable when Right arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, keyCode: 39 },
{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, keyCode: 36 },
{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, keyCode: 35 }
{ name: 'focuses on previous focusable when Right arrow key is pressed', startIndex: 2, endIndex: 1, key: 'ArrowRight' },
{ name: 'focuses on next focusable when Left arrow key is pressed', startIndex: 2, endIndex: 3, key: 'ArrowLeft' },
{ name: 'focuses on first focusable when Left arrow key is pressed on last focusable', startIndex: 4, endIndex: 0, key: 'ArrowLeft' },
{ name: 'focuses on last focusable when Right arrow key is pressed on first focusable', startIndex: 0, endIndex: 4, key: 'ArrowRight' },
{ name: 'focuses on first focusable when Home key is pressed', startIndex: 2, endIndex: 0, key: 'Home' },
{ name: 'focuses on last focusable when End key is pressed', startIndex: 2, endIndex: 4, key: 'End' }
]);
});

Expand Down
6 changes: 2 additions & 4 deletions mixins/interactive/test/interactive-mixin.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { defineCE, expect, fixture, html } from '@brightspace-ui/testing';
import { defineCE, expect, fixture, html, sendKeysElem } from '@brightspace-ui/testing';
import { getComposedActiveElement } from '../../../helpers/focus.js';
import { InteractiveMixin } from '../interactive-mixin.js';
import { keyDown } from '../../../tools/dom-test-helpers.js';
import { LitElement } from 'lit';

const mixinTag = defineCE(
Expand Down Expand Up @@ -57,8 +56,7 @@ describe('InteractiveMixin', () => {
toggle.click();
await new Promise(resolve => setTimeout(resolve, 0));
expect(getComposedActiveElement()).to.equal(elem.shadowRoot.querySelector('.content-button'));
keyDown(toggle, 27);
await new Promise(resolve => setTimeout(resolve, 0));
await sendKeysElem(toggle, 'press', 'Escape');
expect(getComposedActiveElement()).to.equal(toggle);
});

Expand Down
3 changes: 1 addition & 2 deletions tools/dom-test-helpers.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getComposedChildren } from '../helpers/dom.js';

export function keyDown(element, keyCode, ctrlKey) {
export function keyDown(element, keyCode) {
const event = new CustomEvent('keydown', {
detail: 0,
bubbles: true,
Expand All @@ -9,7 +9,6 @@ export function keyDown(element, keyCode, ctrlKey) {
});
event.keyCode = keyCode;
event.code = keyCode;
if (ctrlKey !== undefined) event.ctrlKey = ctrlKey;
element.dispatchEvent(event);
}

Expand Down

0 comments on commit 4c823fe

Please sign in to comment.