test: refactor tests of AppIconButton

Signed-off-by: Rong Sen Ng (motss) <[email protected]>

src/__tests__/icon-button/app-icon-button.test.ts

@@ -1,9 +1,9 @@
 import '../../icon-button/app-icon-button';
 
-import { expect, fixture, html } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { fixture, html } from '@open-wc/testing-helpers';
+import { describe, expect, it } from 'vitest';
 
-import type {AppIconButton } from '../../icon-button/app-icon-button';
+import type { AppIconButton } from '../../icon-button/app-icon-button';
 import { appIconButtonName } from '../../icon-button/constants';
 
 describe(appIconButtonName, () => {
@@ -12,19 +12,23 @@ describe(appIconButtonName, () => {
       <app-icon-button></app-icon-button>
     `);
 
-    expect(await el.ripple).not.exist;
+    expect(await el.ripple).not.toBeInTheDocument();
 
     el.focus();
 
     /**
      * NOTE(motss): `.click()` and `.focus()` does not render any ripple.
      * So we need to actually focus with keypress or mouse click.
+     * 
+     * fixme: use native browser keypress when vitest supports it.
      */
-    await sendKeys({ press: 'Enter' });
+    el.dispatchEvent(new KeyboardEvent('keypress', {
+      key: 'Enter',
+    }));
 
     // Force layout
     await el.layout();
 
-    expect(await el.ripple).exist;
+    expect(await el.ripple).toBeInTheDocument();
   });
 });

vite.config.ts

@@ -41,6 +41,7 @@ export default defineConfig({
       '**/*test*/helpers/to-resolved-date.test.ts',
       '**/*test*/helpers/to-year-list.test.ts',
       '**/*test*/helpers/warn-undefined-element.test.ts',
+      '**/*test*/icon-button/**.test.ts',
       // '**/*test*/date-picker-input/**.test.ts',
     ],
     clearMocks: true,