refactor: remove jQuery from test directory (@Leonabcd123)

frontend/__tests__/test/layout-emulator.spec.ts

@@ -13,14 +13,11 @@ describe("LayoutEmulator", () => {
       updateAltGrState(event);
     });
 
-    const createEvent = (
-      code: string,
-      type: string,
-    ): JQuery.KeyboardEventBase =>
+    const createEvent = (code: string, type: string): KeyboardEvent =>
       ({
         code,
         type,
-      }) as JQuery.KeyboardEventBase;
+      }) as KeyboardEvent;
 
     it("should set isAltGrPressed to true on AltRight keydown", () => {
       const event = createEvent("AltRight", "keydown");

frontend/src/ts/test/focus.ts

@@ -88,14 +88,13 @@ export function set(value: boolean, withCursor = false): void {
   });
 }
 
-$(document).on("mousemove", function (event) {
+document.addEventListener("mousemove", function (event) {
   if (PageTransition.get()) return;
   if (!state) return;
   if (
-    event.originalEvent &&
     // To avoid mouse/desk vibration from creating a flashy effect, we'll unfocus @ >5px instead of >0px
-    (event.originalEvent.movementX > unfocusPx ||
-      event.originalEvent.movementY > unfocusPx)
+    event.movementX > unfocusPx ||
+    event.movementY > unfocusPx
   ) {
     set(false);
   }

frontend/src/ts/test/funbox/funbox.ts

@@ -22,6 +22,7 @@ import {
 } from "./list";
 import { checkForcedConfig } from "./funbox-validation";
 import { tryCatch } from "@monkeytype/util/trycatch";
+import { qs } from "../../utils/dom";
 
 export function toggleScript(...params: string[]): void {
   if (Config.funbox.length === 0) return;
@@ -66,18 +67,18 @@ export function toggleFunbox(funbox: FunboxName): void {
 }
 
 export async function clear(): Promise<boolean> {
-  $("body").attr(
+  qs("body")?.setAttribute(
     "class",
-    $("body")
-      ?.attr("class")
+    qs("body")
+      ?.getAttribute("class")
       ?.split(/\s+/)
       ?.filter((it) => !it.startsWith("fb-"))
       ?.join(" ") ?? "",
   );
 
-  $(".funBoxTheme").remove();
+  qs(".funBoxTheme")?.remove();
 
-  $("#wordsWrapper").removeClass("hidden");
+  qs("#wordsWrapper")?.show();
   MemoryTimer.reset();
   ManualRestart.set();
   return true;
@@ -115,7 +116,7 @@ export async function activate(
   await setFunboxBodyClasses();
   await applyFunboxCSS();
 
-  $("#wordsWrapper").removeClass("hidden");
+  qs("#wordsWrapper")?.show();
 
   const { data: language, error } = await tryCatch(
     JSONData.getCurrentLanguage(Config.language),
@@ -216,23 +217,23 @@ export async function rememberSettings(): Promise<void> {
 }
 
 async function setFunboxBodyClasses(): Promise<boolean> {
-  const $body = $("body");
+  const $body = qs("body");
 
   const activeFbClasses = getActiveFunboxNames().map(
     (name) => "fb-" + name.replaceAll("_", "-"),
   );
 
   const currentClasses =
     $body
-      ?.attr("class")
+      ?.getAttribute("class")
       ?.split(/\s+/)
       .filter((it) => !it.startsWith("fb-")) ?? [];
 
   if (isFunboxActiveWithProperty("ignoreReducedMotion")) {
     currentClasses.push("ignore-reduced-motion");
   }
 
-  $body.attr(
+  $body?.setAttribute(
     "class",
     [...new Set([...currentClasses, ...activeFbClasses]).keys()].join(" "),
   );
@@ -241,7 +242,7 @@ async function setFunboxBodyClasses(): Promise<boolean> {
 }
 
 async function applyFunboxCSS(): Promise<boolean> {
-  $(".funBoxTheme").remove();
+  qs(".funBoxTheme")?.remove();
   for (const funbox of getActiveFunboxesWithProperty("hasCssFile")) {
     const css = document.createElement("link");
     css.classList.add("funBoxTheme");

frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts

@@ -1,31 +1,29 @@
-import { animate } from "animejs";
 import { capitalizeFirstLetter } from "../../utils/strings";
 import { applyReducedMotion } from "../../utils/misc";
+import { qs } from "../../utils/dom";
 
-const timerEl = document.querySelector(
-  "#typingTest #layoutfluidTimer",
-) as HTMLElement;
+const timerEl = qs("#typingTest #layoutfluidTimer");
 
 export function show(): void {
-  animate(timerEl, {
+  timerEl?.animate({
     opacity: 1,
     duration: applyReducedMotion(125),
   });
 }
 
 export function hide(): void {
-  animate(timerEl, {
+  timerEl?.animate({
     opacity: 0,
     duration: applyReducedMotion(125),
   });
 }
 
 export function instantHide(): void {
-  timerEl.style.opacity = "0";
+  timerEl?.setStyle({ opacity: "0" });
 }
 
 export function updateTime(sec: number, layout: string): void {
-  timerEl.textContent = `${capitalizeFirstLetter(layout)} in: ${sec}s`;
+  timerEl?.setText(`${capitalizeFirstLetter(layout)} in: ${sec}s`);
 }
 
 export function updateWords(words: number, layout: string): void {
@@ -34,5 +32,5 @@ export function updateWords(words: number, layout: string): void {
   if (words === 1) {
     str = `${layoutName} starting next word`;
   }
-  timerEl.textContent = str;
+  timerEl?.setText(str);
 }

frontend/src/ts/test/funbox/memory-funbox-timer.ts

@@ -1,22 +1,20 @@
-import { animate } from "animejs";
 import { applyReducedMotion } from "../../utils/misc";
+import { qs } from "../../utils/dom";
 
 let memoryTimer: number | null = null;
 let memoryInterval: NodeJS.Timeout | null = null;
 
-const timerEl = document.querySelector(
-  "#typingTest #memoryTimer",
-) as HTMLElement;
+const timerEl = qs("#typingTest #memoryTimer");
 
 export function show(): void {
-  animate(timerEl, {
+  timerEl?.animate({
     opacity: 1,
     duration: applyReducedMotion(125),
   });
 }
 
 export function hide(): void {
-  animate(timerEl, {
+  timerEl?.animate({
     opacity: 0,
     duration: applyReducedMotion(125),
   });
@@ -42,11 +40,11 @@ export function start(time: number): void {
     memoryTimer === 0 ? hide() : update(memoryTimer);
     if (memoryTimer <= 0) {
       reset();
-      $("#wordsWrapper").addClass("hidden");
+      qs("#wordsWrapper")?.hide();
     }
   }, 1000);
 }
 
 export function update(sec: number): void {
-  timerEl.textContent = `Timer left to memorise all words: ${sec}s`;
+  timerEl?.setText(`Timer left to memorise all words: ${sec}s`);
 }

frontend/src/ts/test/layout-emulator.ts

@@ -238,7 +238,7 @@ export async function getCharFromEvent(
   }
 }
 
-export function updateAltGrState(event: JQuery.KeyboardEventBase): void {
+export function updateAltGrState(event: KeyboardEvent): void {
   const shouldHandleLeftAlt =
     event.code === "AltLeft" && navigator.userAgent.includes("Mac");
   if (event.code !== "AltRight" && !shouldHandleLeftAlt) return;
@@ -250,5 +250,5 @@ export function getIsAltGrPressed(): boolean {
   return isAltGrPressed;
 }
 
-$(document).on("keydown", updateAltGrState);
-$(document).on("keyup", updateAltGrState);
+document.addEventListener("keydown", updateAltGrState);
+document.addEventListener("keyup", updateAltGrState);

frontend/src/ts/test/live-acc.ts

@@ -2,29 +2,27 @@ import Config from "../config";
 import * as TestState from "../test/test-state";
 import * as ConfigEvent from "../observables/config-event";
 import { applyReducedMotion } from "../utils/misc";
-import { animate } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { qs } from "../utils/dom";
 
-const textEl = document.querySelector(
-  "#liveStatsTextBottom .liveAcc",
-) as HTMLElement;
-const miniEl = document.querySelector("#liveStatsMini .acc") as HTMLElement;
+const textEl = qs("#liveStatsTextBottom .liveAcc");
+const miniEl = qs("#liveStatsMini .acc");
 
 export function update(acc: number): void {
   requestDebouncedAnimationFrame("live-acc.update", () => {
     let number = Math.floor(acc);
     if (Config.blindMode) {
       number = 100;
     }
-    miniEl.innerHTML = number + "%";
-    textEl.innerHTML = number + "%";
+    miniEl?.setHtml(number + "%");
+    textEl?.setHtml(number + "%");
   });
 }
 
 export function reset(): void {
   requestDebouncedAnimationFrame("live-acc.reset", () => {
-    miniEl.innerHTML = "100%";
-    textEl.innerHTML = "100%";
+    miniEl?.setHtml("100%");
+    textEl?.setHtml("100%");
   });
 }
 
@@ -36,14 +34,14 @@ export function show(): void {
   if (state) return;
   requestDebouncedAnimationFrame("live-acc.show", () => {
     if (Config.liveAccStyle === "mini") {
-      miniEl.classList.remove("hidden");
-      animate(miniEl, {
+      miniEl?.show();
+      miniEl?.animate({
         opacity: [0, 1],
         duration: applyReducedMotion(125),
       });
     } else {
-      textEl.classList.remove("hidden");
-      animate(textEl, {
+      textEl?.show();
+      textEl?.animate({
         opacity: [0, 1],
         duration: applyReducedMotion(125),
       });
@@ -55,18 +53,18 @@ export function show(): void {
 export function hide(): void {
   if (!state) return;
   requestDebouncedAnimationFrame("live-acc.hide", () => {
-    animate(textEl, {
+    textEl?.animate({
       opacity: [1, 0],
       duration: applyReducedMotion(125),
       onComplete: () => {
-        textEl.classList.add("hidden");
+        textEl?.hide();
       },
     });
-    animate(miniEl, {
+    miniEl?.animate({
       opacity: [1, 0],
       duration: applyReducedMotion(125),
       onComplete: () => {
-        miniEl.classList.add("hidden");
+        miniEl?.hide();
       },
     });
     state = false;
@@ -76,10 +74,10 @@ export function hide(): void {
 export function instantHide(): void {
   if (!state) return;
 
-  textEl.classList.add("hidden");
-  textEl.style.opacity = "0";
-  miniEl.classList.add("hidden");
-  miniEl.style.opacity = "0";
+  textEl?.hide();
+  textEl?.setStyle({ opacity: "0" });
+  miniEl?.hide();
+  miniEl?.setStyle({ opacity: "0" });
 
   state = false;
 }

frontend/src/ts/test/live-burst.ts

@@ -3,26 +3,24 @@ import * as TestState from "../test/test-state";
 import * as ConfigEvent from "../observables/config-event";
 import Format from "../utils/format";
 import { applyReducedMotion } from "../utils/misc";
-import { animate } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { qs } from "../utils/dom";
 
-const textEl = document.querySelector(
-  "#liveStatsTextBottom .liveBurst",
-) as HTMLElement;
-const miniEl = document.querySelector("#liveStatsMini .burst") as HTMLElement;
+const textEl = qs("#liveStatsTextBottom .liveBurst");
+const miniEl = qs("#liveStatsMini .burst");
 
 export function reset(): void {
   requestDebouncedAnimationFrame("live-burst.reset", () => {
-    textEl.innerHTML = "0";
-    miniEl.innerHTML = "0";
+    textEl?.setHtml("0");
+    miniEl?.setHtml("0");
   });
 }
 
 export async function update(burst: number): Promise<void> {
   requestDebouncedAnimationFrame("live-burst.update", () => {
     const burstText = Format.typingSpeed(burst, { showDecimalPlaces: false });
-    miniEl.innerHTML = burstText;
-    textEl.innerHTML = burstText;
+    miniEl?.setHtml(burstText);
+    textEl?.setHtml(burstText);
   });
 }
 
@@ -34,14 +32,14 @@ export function show(): void {
   if (state) return;
   requestDebouncedAnimationFrame("live-burst.show", () => {
     if (Config.liveBurstStyle === "mini") {
-      miniEl.classList.remove("hidden");
-      animate(miniEl, {
+      miniEl?.show();
+      miniEl?.animate({
         opacity: [0, 1],
         duration: applyReducedMotion(125),
       });
     } else {
-      textEl.classList.remove("hidden");
-      animate(textEl, {
+      textEl?.show();
+      textEl?.animate({
         opacity: [0, 1],
         duration: applyReducedMotion(125),
       });
@@ -53,18 +51,18 @@ export function show(): void {
 export function hide(): void {
   if (!state) return;
   requestDebouncedAnimationFrame("live-burst.hide", () => {
-    animate(textEl, {
+    textEl?.animate({
       opacity: [1, 0],
       duration: applyReducedMotion(125),
       onComplete: () => {
-        textEl.classList.add("hidden");
+        textEl?.hide();
       },
     });
-    animate(miniEl, {
+    miniEl?.animate({
       opacity: [1, 0],
       duration: applyReducedMotion(125),
       onComplete: () => {
-        miniEl.classList.add("hidden");
+        miniEl?.hide();
       },
     });
     state = false;
@@ -74,10 +72,10 @@ export function hide(): void {
 export function instantHide(): void {
   if (!state) return;
 
-  textEl.classList.add("hidden");
-  textEl.style.opacity = "0";
-  miniEl.classList.add("hidden");
-  miniEl.style.opacity = "0";
+  textEl?.hide();
+  textEl?.setStyle({ opacity: "0" });
+  miniEl?.hide();
+  miniEl?.setStyle({ opacity: "0" });
 
   state = false;
 }