diff --git a/components/list/test/list.test.js b/components/list/test/list.test.js
index 3267a1845a9..c66b0ab7677 100644
--- a/components/list/test/list.test.js
+++ b/components/list/test/list.test.js
@@ -4,12 +4,9 @@ import '../list-item.js';
import '../list-item-button.js';
import '../list-item-content.js';
import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import { focusWithKeyboard } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
-
-const keyCodes = Object.freeze({
- UP: { name: 'up arrow', key: 38 },
- DOWN: { name: 'down arrow', key: 40 }
-});
+import { sendKeys } from '@web/test-runner-commands';
const awaitListElementUpdates = async(rootElement, queries) => {
await rootElement.updateComplete;
@@ -85,10 +82,10 @@ describe('d2l-list', () => {
describe('navigation', () => {
[
- { keyPress: keyCodes.UP },
- { keyPress: keyCodes.DOWN }
+ { keyPress: 'ArrowUp' },
+ { keyPress: 'ArrowDown' }
].forEach(testCase => {
- it(`Focus stays inside the list when in grid mode after ${testCase.keyPress.name} is pressed`, async() => {
+ it(`Focus stays inside the list when in grid mode after "${testCase.keyPress}" is pressed`, async() => {
const elem = await fixture(html`
@@ -117,11 +114,11 @@ describe('d2l-list', () => {
const listItem = elem.querySelector('[key="L2-2"]');
const listItemLayout = elem.querySelector('[key="L2-2"]').shadowRoot.querySelector('d2l-list-item-generic-layout');
- listItem.focus();
+ await focusWithKeyboard(listItem);
await waitUntil(() => listItem.hasAttribute('_focusing'), 'List item should be focused', { timeout: 3000 });
- const event = new KeyboardEvent('keydown', { keyCode: testCase.keyPress.key });
- setTimeout(() => listItemLayout.dispatchEvent(event));
+ await focusWithKeyboard(listItemLayout);
+ setTimeout(() => sendKeys({ down: testCase.keyPress }));
await oneEvent(listItemLayout, 'keydown');
expect(listItem.hasAttribute('_focusing')).to.be.true;
@@ -129,10 +126,10 @@ describe('d2l-list', () => {
});
[
- { keyPress: keyCodes.UP, expectedFocus: 'L1-1' },
- { keyPress: keyCodes.DOWN, expectedFocus: 'L3-2' }
+ { keyPress: 'ArrowUp', expectedFocus: 'L1-1' },
+ { keyPress: 'ArrowDown', expectedFocus: 'L3-2' }
].forEach(testCase => {
- it(`Focus navigates to other nested list items when in grid mode after ${testCase.keyPress.name} is pressed`, async() => {
+ it(`Focus navigates to other nested list items when in grid mode after "${testCase.keyPress}" is pressed`, async() => {
const elem = await fixture(html`
@@ -160,11 +157,11 @@ describe('d2l-list', () => {
const listItem = elem.querySelector('[key="L2-2"]');
const listItemLayout = elem.querySelector('[key="L2-2"]').shadowRoot.querySelector('d2l-list-item-generic-layout');
- listItem.focus();
+ await focusWithKeyboard(listItem);
await waitUntil(() => listItem.hasAttribute('_focusing'), 'List item should be focused', { timeout: 3000 });
- const event = new KeyboardEvent('keydown', { keyCode: testCase.keyPress.key });
- setTimeout(() => listItemLayout.dispatchEvent(event));
+ await focusWithKeyboard(listItemLayout);
+ setTimeout(() => sendKeys({ down: testCase.keyPress }));
await oneEvent(listItemLayout, 'keydown');
const focusedElement = elem.querySelector(`[key=${testCase.expectedFocus}`);
@@ -188,11 +185,11 @@ describe('d2l-list', () => {
const listItem = elem.querySelector('[key="L1-2"]');
const listItemLayout = elem.querySelector('[key="L1-2"]').shadowRoot.querySelector('d2l-list-item-generic-layout');
- listItem.focus();
+ await focusWithKeyboard(listItem);
await waitUntil(() => listItem.hasAttribute('_focusing'), 'List item should be focused', { timeout: 3000 });
- const event = new KeyboardEvent('keydown', { keyCode: keyCodes.UP.key });
- setTimeout(() => listItemLayout.dispatchEvent(event));
+ await focusWithKeyboard(listItemLayout);
+ setTimeout(() => sendKeys({ down: 'ArrowUp' }));
await oneEvent(listItemLayout, 'keydown');
expect(listItem.hasAttribute('_focusing')).to.be.true;