test: refactor querySelector

metonym · Apr 20, 2024 · a234d0d · a234d0d
1 parent 72a02ce
commit a234d0d
Showing 1 changed file with 29 additions and 55 deletions.
diff --git a/tests/SvelteTime.test.ts b/tests/SvelteTime.test.ts
@@ -19,64 +19,56 @@ describe("svelte-time", () => {
     document.body.innerHTML = "";
   });
 
+  const getElement = (selector: string) => {
+    return document.querySelector(selector) as HTMLElement;
+  };
+
   const DEFAULT_TIME = dayjs(new Date().toISOString()).format("MMM DD, YYYY");
 
   test("SvelteTime.test.svelte", async () => {
     const target = document.body;
 
-    instance = new SvelteTime({
-      target,
-    });
+    instance = new SvelteTime({ target });
 
     const date = new Date();
     const timestamp = date.toISOString();
 
-    const defaultComponent = target.querySelector('[data-test="default"]')!;
+    const defaultComponent = getElement('[data-test="default"]')!;
     expect(defaultComponent.innerHTML).toEqual(DEFAULT_TIME);
     expect(defaultComponent.innerHTML).toEqual(dayjs().format("MMM DD, YYYY"));
 
-    const timestampString = target.querySelector(
-      '[data-test="timestamp-string"]',
-    )!;
+    const timestampString = getElement('[data-test="timestamp-string"]')!;
     expect(timestampString.innerHTML).toEqual("Feb 01, 2020");
     expect(timestampString.getAttribute("datetime")).toEqual("2020-02-01");
 
-    const timestampDate = target.querySelector('[data-test="timestamp-date"]')!;
+    const timestampDate = getElement('[data-test="timestamp-date"]')!;
     expect(timestampDate.innerHTML).toEqual(
       dayjs(date).format("dddd @ h:mm a"),
     );
     expect(timestampDate.getAttribute("datetime")).toEqual(date + "");
 
-    const timestampNumber = target.querySelector(
-      '[data-test="timestamp-number"]',
-    )!;
+    const timestampNumber = getElement('[data-test="timestamp-number"]')!;
     expect(timestampNumber.innerHTML).toEqual(
       dayjs(1e10).format("dddd @ h:mm A · MMMM D, YYYY"),
     );
     expect(timestampNumber.getAttribute("datetime")).toEqual(1e10 + "");
 
-    const relative = target.querySelector('[data-test="relative"]')!;
+    const relative = getElement('[data-test="relative"]')!;
     expect(relative.innerHTML).toEqual("a few seconds ago");
     expect(relative.getAttribute("datetime")).toEqual(timestamp);
 
-    const relativeTimestamp = target.querySelector(
-      '[data-test="relative-timestamp"]',
-    )!;
+    const relativeTimestamp = getElement('[data-test="relative-timestamp"]')!;
     expect(/ago/.test(relativeTimestamp.innerHTML)).toEqual(true);
     expect(relativeTimestamp.getAttribute("datetime")).toEqual("2021-02-02");
 
-    const relativeTimestampNumber = target.querySelector(
+    const relativeTimestampNumber = getElement(
       '[data-test="relative-timestamp-number"]',
     )!;
     expect(relativeTimestampNumber.innerHTML).toEqual("54 years ago");
     expect(relativeTimestampNumber.getAttribute("datetime")).toEqual(1e10 + "");
 
-    const relativeLive = target.querySelector(
-      '[data-test="relative-live"]',
-    ) as HTMLTimeElement;
-    const actionRelativeLive = target.querySelector(
-      '[data-test="action-relative-live"]',
-    ) as HTMLTimeElement;
+    const relativeLive = getElement('[data-test="relative-live"]');
+    const actionRelativeLive = getElement('[data-test="action-relative-live"]');
 
     expect(relativeLive.title).toEqual(DEFAULT_TIME);
     expect(actionRelativeLive.title).toEqual(DEFAULT_TIME);
@@ -105,47 +97,37 @@ describe("svelte-time", () => {
     expect(relativeLive.getAttribute("datetime")).toEqual(timestamp);
     expect(actionRelativeLive.getAttribute("datetime")).toEqual(timestamp);
 
-    const action = target.querySelector(
-      '[data-test="action"]',
-    ) as HTMLTimeElement;
+    const action = getElement('[data-test="action"]');
     expect(action.innerText).toEqual(DEFAULT_TIME);
     expect(action.getAttribute("datetime")).toEqual(timestamp);
 
-    const actionTimestampFormat = target.querySelector(
+    const actionTimestampFormat = getElement(
       '[data-test="action-timestamp-format"]',
-    ) as HTMLTimeElement;
+    );
     expect(actionTimestampFormat.innerText).toEqual(
       dayjs("2021-02-02").format("dddd @ h:mm A · MMMM D, YYYY"),
     );
     expect(actionTimestampFormat.getAttribute("datetime")).toEqual(
       "2021-02-02",
     );
 
-    const dayjsOnly = target.querySelector('[data-test="dayjs"]')!;
+    const dayjsOnly = getElement('[data-test="dayjs"]')!;
     expect(dayjsOnly.innerHTML).toEqual(DEFAULT_TIME);
 
-    const dayjsOnlyRelative = target.querySelector(
-      '[data-test="dayjs-relative"]',
-    )!;
+    const dayjsOnlyRelative = getElement('[data-test="dayjs-relative"]')!;
     expect(dayjsOnlyRelative.innerHTML).toEqual("a few seconds ago");
   });
 
   test("SvelteTimeLive.test.svelte", async () => {
     const target = document.body;
 
-    instance = new SvelteTimeLive({
-      target,
-    });
+    instance = new SvelteTimeLive({ target });
 
     const date = new Date();
     const timestamp = date.toISOString();
 
-    const relativeLive = target.querySelector(
-      '[data-test="relative-live"]',
-    ) as HTMLTimeElement;
-    const actionRelativeLive = target.querySelector(
-      '[data-test="action-relative-live"]',
-    ) as HTMLTimeElement;
+    const relativeLive = getElement('[data-test="relative-live"]');
+    const actionRelativeLive = getElement('[data-test="action-relative-live"]');
 
     expect(relativeLive.title).toEqual(DEFAULT_TIME);
     expect(actionRelativeLive.title).toEqual(DEFAULT_TIME);
@@ -176,22 +158,14 @@ describe("svelte-time", () => {
   test("SvelteTimeCustomTitle.test.svelte", async () => {
     const target = document.body;
 
-    instance = new SvelteTimeCustomTitle({
-      target,
-    });
-
-    const relativeLive = target.querySelector(
-      '[data-test="custom-title"]',
-    ) as HTMLTimeElement;
-    const relativeLiveOmit = target.querySelector(
-      '[data-test="custom-title-omit"]',
-    ) as HTMLTimeElement;
-    const actionRelativeLive = target.querySelector(
-      '[data-test="action-custom-title"]',
-    ) as HTMLTimeElement;
-    const actionRelativeOmit = target.querySelector(
+    instance = new SvelteTimeCustomTitle({ target });
+
+    const relativeLive = getElement('[data-test="custom-title"]');
+    const relativeLiveOmit = getElement('[data-test="custom-title-omit"]');
+    const actionRelativeLive = getElement('[data-test="action-custom-title"]');
+    const actionRelativeOmit = getElement(
       '[data-test="action-custom-title-omit"]',
-    ) as HTMLTimeElement;
+    );
 
     expect(relativeLiveOmit.title).toEqual("");
     expect(relativeLive.title).toEqual("Custom title");