From 85976a1f35cc4fbd9201e4c02a74d0bd239a71f8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Apr 2022 09:48:54 -0400
Subject: [PATCH] use sendKeys/sendMouse

---
 src/components/dropdown/dropdown.test.ts | 81 +++++++-----------------
 src/components/select/select.test.ts     | 16 +++--
 2 files changed, 33 insertions(+), 64 deletions(-)

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('<sl-dropdown>', () => {
         <sl-menu> </sl-menu>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-dropdown>', () => {
         </sl-menu>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-dropdown>', () => {
         </sl-menu>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-dropdown>', () => {
         <div>Some custom content</div>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-dropdown>', () => {
         </sl-menu>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-dropdown>', () => {
         <div>Some custom content</div>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-dropdown>', () => {
       </sl-dropdown>
     `);
 
-    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('<sl-dropdown>', () => {
         </sl-menu>
       </sl-dropdown>
     `);
-    const trigger = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-select>', () => {
     `);
     const control = el.shadowRoot!.querySelector<HTMLSelectElement>('.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('<sl-select>', () => {
     `);
     const control = el.shadowRoot!.querySelector<HTMLSelectElement>('.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');
   });