diff --git a/src/components/dropdown/dropdown.test.ts b/src/components/dropdown/dropdown.test.ts
index ea0d30c3..ef19c0dc 100644
--- a/src/components/dropdown/dropdown.test.ts
+++ b/src/components/dropdown/dropdown.test.ts
@@ -1,4 +1,5 @@
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
import sinon from 'sinon';
import type SlDropdown from './dropdown';
@@ -150,14 +151,10 @@ describe('', () => {
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
-
- trigger.dispatchEvent(
- new KeyboardEvent('keydown', {
- key: 'ArrowDown'
- })
- );
+ const trigger = el.querySelector('sl-button')!;
+ trigger.focus();
+ await sendKeys({ press: 'ArrowDown' });
await el.updateComplete;
expect(el.open).to.be.true;
@@ -173,14 +170,10 @@ describe('', () => {
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
-
- trigger.dispatchEvent(
- new KeyboardEvent('keydown', {
- key: 'ArrowDown'
- })
- );
+ const trigger = el.querySelector('sl-button')!;
+ trigger.focus();
+ await sendKeys({ press: 'ArrowDown' });
await el.updateComplete;
expect(el.open).to.be.true;
@@ -196,14 +189,10 @@ describe('', () => {
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
-
- trigger.dispatchEvent(
- new KeyboardEvent('keydown', {
- key: 'Escape'
- })
- );
+ const trigger = el.querySelector('sl-button')!;
+ trigger.focus();
+ await sendKeys({ press: 'Escape' });
await el.updateComplete;
expect(el.open).to.be.false;
@@ -216,14 +205,10 @@ describe('', () => {
Some custom content
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
-
- trigger.dispatchEvent(
- new KeyboardEvent('keydown', {
- key: 'ArrowDown'
- })
- );
+ const trigger = el.querySelector('sl-button')!;
+ trigger.focus();
+ await sendKeys({ press: 'ArrowDown' });
await el.updateComplete;
expect(el.open).to.be.false;
@@ -238,14 +223,11 @@ describe('', () => {
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
-
- trigger.dispatchEvent(
- new KeyboardEvent('keydown', {
- key: 'Enter'
- })
- );
+ const trigger = el.querySelector('sl-button')!;
+ trigger.focus();
+ await el.updateComplete;
+ await sendKeys({ press: 'Enter' });
await el.updateComplete;
expect(el.open).to.be.true;
@@ -258,14 +240,11 @@ describe('', () => {
Some custom content
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
-
- trigger.dispatchEvent(
- new KeyboardEvent('keydown', {
- key: 'Enter'
- })
- );
+ const trigger = el.querySelector('sl-button')!;
+ trigger.focus();
+ await el.updateComplete;
+ await sendKeys({ press: 'Enter' });
await el.updateComplete;
expect(el.open).to.be.true;
@@ -282,12 +261,7 @@ describe('', () => {
`);
- document.body.dispatchEvent(
- new MouseEvent('mousedown', {
- bubbles: true
- })
- );
-
+ await sendMouse({ type: 'click', position: [0, 0] });
await el.updateComplete;
expect(el.open).to.be.false;
@@ -302,18 +276,11 @@ describe('', () => {
`);
- const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!;
+ const trigger = el.querySelector('sl-button')!;
trigger.click();
-
await el.updateComplete;
-
- document.body.dispatchEvent(
- new MouseEvent('mousedown', {
- bubbles: true
- })
- );
-
+ await sendMouse({ type: 'click', position: [0, 0] });
await el.updateComplete;
expect(el.open).to.be.false;
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index ffce21ee..7db7956b 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -1,4 +1,5 @@
-import { expect, fixture, html, waitUntil, aTimeout } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import type SlSelect from './select';
@@ -71,9 +72,9 @@ describe('', () => {
`);
const control = el.shadowRoot!.querySelector('.select__control')!;
control.focus();
- const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
- control.dispatchEvent(rKeyEvent);
- await aTimeout(100);
+ await sendKeys({ press: 'r' });
+ await el.updateComplete;
+
expect(control.getAttribute('aria-expanded')).to.equal('true');
});
@@ -87,9 +88,10 @@ describe('', () => {
`);
const control = el.shadowRoot!.querySelector('.select__control')!;
control.focus();
- const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true });
- control.dispatchEvent(rKeyEvent);
- await aTimeout(100);
+ await sendKeys({ down: 'Control' });
+ await sendKeys({ press: 'r' });
+ await sendKeys({ up: 'Control' });
+ await el.updateComplete;
expect(control.getAttribute('aria-expanded')).to.equal('false');
});