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/observables/connection-event.ts

@@ -7,6 +7,7 @@ export function subscribe(fn: SubscribeFunction): void {
 }
 
 window.addEventListener("load", () => {
+  console.warn("LOAD");
   window.addEventListener("online", () => {
     dispatch(true);
   });

frontend/src/ts/states/connection.ts

@@ -48,9 +48,18 @@ ConnectionEvent.subscribe((newState) => {
   throttledHandleState();
 });
 
+window.addEventListener("load", () => {
+  console.warn("SECOND_LOAD");
+});
+
 onDOMReady(() => {
+  console.warn("DOM");
   state = navigator.onLine;
   if (!state) {
     showOfflineBanner();
   }
 });
+
+document.addEventListener("DOMContentLoaded", () => {
+  console.warn("FIRST_DOM");
+});

frontend/src/ts/test/focus.ts

@@ -6,13 +6,14 @@ import * as TimerProgress from "./timer-progress";
 import * as PageTransition from "../states/page-transition";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getFocus, setFocus } from "../signals/core";
+import { qsa, ElementsWithUtils } from "../utils/dom";
 
 const unfocusPx = 3;
 
 let cacheReady = false;
 let cache: {
-  focus?: HTMLElement[];
-  cursor?: HTMLElement[];
+  focus?: ElementsWithUtils;
+  cursor?: ElementsWithUtils;
 } = {};
 
 function initializeCache(): void {
@@ -33,8 +34,8 @@ function initializeCache(): void {
     "#ad-footer-small-wrapper",
   ].join(",");
 
-  cache.cursor = [...document.querySelectorAll<HTMLElement>(cursorSelector)];
-  cache.focus = [...document.querySelectorAll<HTMLElement>(elementsSelector)];
+  cache.cursor = qsa(cursorSelector);
+  cache.focus = qsa(elementsSelector);
 
   cacheReady = true;
 }
@@ -50,14 +51,10 @@ export function set(value: boolean, withCursor = false): void {
 
       // batch DOM operations for better performance
       if (cache.focus) {
-        for (const el of cache.focus) {
-          el.classList.add("focus");
-        }
+        cache.focus.addClass("focus");
       }
       if (!withCursor && cache.cursor) {
-        for (const el of cache.cursor) {
-          el.style.cursor = "none";
-        }
+        cache.cursor.setStyle({ cursor: "none" });
       }
 
       Caret.stopAnimation();
@@ -69,14 +66,10 @@ export function set(value: boolean, withCursor = false): void {
       setFocus(false);
 
       if (cache.focus) {
-        for (const el of cache.focus) {
-          el.classList.remove("focus");
-        }
+        cache.focus.removeClass("focus");
       }
       if (cache.cursor) {
-        for (const el of cache.cursor) {
-          el.style.cursor = "";
-        }
+        cache.cursor.setStyle({ cursor: "" });
       }
 
       Caret.startAnimation();

frontend/src/ts/test/funbox/funbox-functions.ts

@@ -23,6 +23,7 @@ import * as TestState from "../test-state";
 import { WordGenError } from "../../utils/word-gen-error";
 import { FunboxName, KeymapLayout, Layout } from "@monkeytype/schemas/configs";
 import { Language, LanguageObject } from "@monkeytype/schemas/languages";
+import { qs } from "../../utils/dom";
 
 export type FunboxFunctions = {
   getWord?: (wordset?: Wordset, wordIndex?: number) => string;
@@ -61,9 +62,9 @@ async function readAheadHandleKeydown(event: KeyboardEvent): Promise<void> {
         TestWords.words.get(TestState.activeWordIndex - 1) ||
       Config.freedomMode)
   ) {
-    $("#words").addClass("read_ahead_disabled");
+    qs("#words")?.addClass("read_ahead_disabled");
   } else if (event.key === " ") {
-    $("#words").removeClass("read_ahead_disabled");
+    qs("#words")?.removeClass("read_ahead_disabled");
   }
 }
 
@@ -510,7 +511,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
   },
   memory: {
     applyConfig(): void {
-      $("#wordsWrapper").addClass("hidden");
+      qs("#wordsWrapper")?.hide();
       setConfig("showAllLines", true, {
         nosave: true,
       });
@@ -529,11 +530,11 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
     },
     start(): void {
       MemoryTimer.reset();
-      $("#words").addClass("hidden");
+      qs("#words")?.hide();
     },
     restart(): void {
       MemoryTimer.start(Math.round(Math.pow(TestWords.words.length, 1.2)));
-      $("#words").removeClass("hidden");
+      qs("#words")?.show();
       if (Config.keymapMode === "next") {
         setConfig("keymapMode", "react");
       }
@@ -672,14 +673,14 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
           return;
         }
       }
-      $("body").append('<div id="scanline" />');
-      $("body").addClass("crtmode");
-      $("#globalFunBoxTheme").attr("href", `funbox/crt.css`);
+      qs("body")?.appendHtml('<div id="scanline" />');
+      qs("body")?.addClass("crtmode");
+      qs("#globalFunBoxTheme")?.setAttribute("href", `funbox/crt.css`);
     },
     clearGlobal(): void {
-      $("#scanline").remove();
-      $("body").removeClass("crtmode");
-      $("#globalFunBoxTheme").attr("href", ``);
+      qs("#scanline")?.remove();
+      qs("body")?.removeClass("crtmode");
+      qs("#globalFunBoxTheme")?.setAttribute("href", ``);
     },
   },
   ALL_CAPS: {

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

@@ -11,10 +11,10 @@ let isAltGrPressed = false;
 const isPunctuationPattern = /\p{P}/u;
 
 export async function getCharFromEvent(
-  event: JQuery.KeyDownEvent | JQuery.KeyUpEvent | KeyboardEvent,
+  event: KeyboardEvent,
 ): Promise<string | null> {
   function emulatedLayoutGetVariant(
-    event: JQuery.KeyDownEvent | JQuery.KeyUpEvent | KeyboardEvent,
+    event: KeyboardEvent,
     keyVariants: string[],
   ): string | undefined {
     let isCapitalized = event.shiftKey;
@@ -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);