test: refactor tests of toClosestTarget & toDateString

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>

src/__tests__/helpers/to-closest-target.test.ts

@@ -1,57 +1,60 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { fixture, html } from '@open-wc/testing-helpers';
+import { describe, expect, it } from 'vitest';
 
 import { toClosestTarget } from '../../helpers/to-closest-target';
-import { messageFormatter } from '../test-utils/message-formatter';
 
 describe(toClosestTarget.name, () => {
-  type CaseToClosestTarget = [
-    selector: string,
-    elementNode: unknown,
-    textContext: string | undefined
-  ];
-
-  const casesToClosestTarget: CaseToClosestTarget[] = [
-    ['button', HTMLButtonElement, 'Click me'],
-    ['input', undefined, undefined],
-  ];
-  casesToClosestTarget.forEach((a) => {
-    const [testSelector, expectedElementNode, expectedTextContext] = a;
-
-    it(
-      messageFormatter('returns closest target (selector=%s)', a),
-      async () => {
-        let resolver: NonNullable<Parameters<PromiseConstructor['prototype']['then']>['0']>;
-        const task = new Promise<HTMLButtonElement | null>(
-          (resolve) => resolver = resolve
-        );
-        const onClick: EventListenerObject = {
-          handleEvent(ev) {
-            const closest = toClosestTarget(ev, testSelector);
-
-            resolver(closest);
-          },
-        };
-        const el = await fixture(
-          html`
-            <div @click=${onClick} @keyup=${onClick}>
-              <button>${expectedTextContext}</button>
-            </div>
-          `
-        );
-
-        const buttonEl = el.querySelector<HTMLButtonElement>('button');
-
-        buttonEl?.click();
-
-        const closest = await task;
-
-        expectedElementNode ?
-          expect(closest).instanceOf(expectedElementNode) :
-          expect(closest).equal(expectedElementNode);
-
-        expect(closest?.textContent).equal(expectedTextContext);
-      }
+  it.each<{
+    $_elementNode: typeof HTMLButtonElement | undefined;
+    $_textContent: string | undefined;
+    selector: string;
+  }>([
+    {
+      $_elementNode: HTMLButtonElement,
+      $_textContent: 'Click me',
+      selector: 'button',
+    },
+    {
+      $_elementNode: undefined,
+      $_textContent: undefined,
+      selector: 'input',
+    },
+  ])('returns closest target (selector=$selector)', async ({
+    $_elementNode,
+    $_textContent,
+    selector,
+  }) => {
+    // todo: refactor with Promise.withResolvers
+    let resolver: NonNullable<Parameters<PromiseConstructor['prototype']['then']>['0']>;
+    const task = new Promise<HTMLButtonElement | null>(
+      (resolve) => resolver = resolve
     );
+    const onClick: EventListenerObject = {
+      handleEvent(ev) {
+        const closest = toClosestTarget(ev, selector);
+
+        resolver(closest);
+      },
+    };
+    const el = await fixture(
+      html`
+        <div @click=${onClick} @keyup=${onClick}>
+          <button>${$_textContent}</button>
+        </div>
+      `
+    );
+
+    const buttonEl = el.querySelector<HTMLButtonElement>('button');
+
+    buttonEl?.click();
+
+    const closest = await task;
+
+    $_elementNode ?
+      expect(closest).instanceOf($_elementNode) :
+      expect(closest).toEqual($_elementNode);
+
+    expect(closest?.textContent).toEqual($_textContent);
   });
 
 });

src/__tests__/helpers/to-date-string.test.ts

@@ -1,14 +1,13 @@
-import { expect } from '@open-wc/testing';
+import { describe, expect, it } from 'vitest';
 
 import { toDateString } from '../../helpers/to-date-string';
 
 describe(toDateString.name, () => {
   it('returns date string', () => {
     const testDateStr = '2020-02-02';
-
     const result = toDateString(new Date(testDateStr));
 
-    expect(result).equal(testDateStr);
+    expect(result).toBe(testDateStr);
   });
 
 });

vite.config.ts

@@ -31,6 +31,8 @@ export default defineConfig({
       '**/*test*/helpers/focus-element.test.ts',
       '**/*test*/helpers/is-in-current-month.test.ts',
       '**/*test*/helpers/nullish-attribute-converter.test.ts',
+      '**/*test*/helpers/to-closest-target.test.ts',
+      '**/*test*/helpers/to-date-string.test.ts',
       // '**/*test*/date-picker-input/**.test.ts',
     ],
     clearMocks: true,