From 4c823feda46a179fe223dcedc78ec07756f1a02e Mon Sep 17 00:00:00 2001 From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com> Date: Fri, 30 Jun 2023 11:43:56 -0400 Subject: [PATCH] ci: Switch keydown uses to sendKeysElem (#3800) * Switch keydown uses to sendKeysElem * Switch to clickElem as well --- components/button/test/button-move.test.js | 25 +++++---- .../arrow-keys/test/arrow-keys-mixin.test.js | 51 +++++++++---------- .../test/interactive-mixin.test.js | 6 +-- tools/dom-test-helpers.js | 3 +- 4 files changed, 40 insertions(+), 45 deletions(-) diff --git a/components/button/test/button-move.test.js b/components/button/test/button-move.test.js index e79484d85f..e684a66ce3 100644 --- a/components/button/test/button-move.test.js +++ b/components/button/test/button-move.test.js @@ -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'; @@ -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``); - setTimeout(() => info.action(el)); + info.action(el); const e = await oneEvent(el, 'd2l-button-move-action'); expect(e.detail.action).to.equal(info.expectedAction); }); diff --git a/mixins/arrow-keys/test/arrow-keys-mixin.test.js b/mixins/arrow-keys/test/arrow-keys-mixin.test.js index e889f4c60f..7a9af8a326 100644 --- a/mixins/arrow-keys/test/arrow-keys-mixin.test.js +++ b/mixins/arrow-keys/test/arrow-keys-mixin.test.js @@ -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', () => { @@ -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); }); }); }; @@ -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' } ]); }); @@ -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' } ]); }); @@ -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]); }); @@ -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' } ]); }); @@ -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' } ]); }); diff --git a/mixins/interactive/test/interactive-mixin.test.js b/mixins/interactive/test/interactive-mixin.test.js index 2a9e8ece27..fc34e1e13b 100644 --- a/mixins/interactive/test/interactive-mixin.test.js +++ b/mixins/interactive/test/interactive-mixin.test.js @@ -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( @@ -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); }); diff --git a/tools/dom-test-helpers.js b/tools/dom-test-helpers.js index 4e0d651819..b96492c74e 100644 --- a/tools/dom-test-helpers.js +++ b/tools/dom-test-helpers.js @@ -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, @@ -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); }