tests: fix missing window.matchMedia in frontend tests

Author: SharzyL

frontend/test/decrypt.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeAll, afterEach, afterAll } from "vitest"
+import { describe, it, expect, beforeAll, afterEach, afterAll, vi } from "vitest"
 import { cleanup, render, screen } from "@testing-library/react"
 import { DecryptPaste } from "../components/DecryptPaste.js"
 
@@ -7,6 +7,7 @@ import { userEvent } from "@testing-library/user-event"
 import { setupServer } from "msw/node"
 import { http, HttpResponse } from "msw"
 import { encodeKey, encrypt, genKey } from "../utils/encryption.js"
+import { stubBrowerFunctions, unStubBrowerFunctions } from "./testUtils.js"
 
 describe("decrypt page", async () => {
   const scheme = "AES-GCM"
@@ -21,6 +22,7 @@ describe("decrypt page", async () => {
   )
 
   beforeAll(() => {
+    stubBrowerFunctions()
     server.listen()
   })
 
@@ -30,15 +32,12 @@ describe("decrypt page", async () => {
   })
 
   afterAll(() => {
+    unStubBrowerFunctions()
     server.close()
   })
 
   it("decrypt correctly", async () => {
-    Object.defineProperty(window, "location", {
-      configurable: true,
-      enumerable: true,
-      value: new URL(`https://example.com/e/abcd#${await encodeKey(key)}`),
-    })
+    vi.stubGlobal("location", new URL(`https://example.com/e/abcd#${await encodeKey(key)}`))
     global.URL.createObjectURL = () => ""
     render(<DecryptPaste />)
 

frontend/test/index.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeAll, afterEach, afterAll } from "vitest"
+import { describe, it, vi, expect, beforeAll, afterEach, afterAll } from "vitest"
 import { cleanup, render, screen } from "@testing-library/react"
 import { PasteBin } from "../components/PasteBin.js"
 
@@ -21,6 +21,7 @@ export const server = setupServer(
 )
 
 beforeAll(() => {
+  stubBrowerFunctions()
   server.listen()
 })
 
@@ -30,6 +31,7 @@ afterEach(() => {
 })
 
 afterAll(() => {
+  unStubBrowerFunctions()
   server.close()
 })
 
@@ -38,6 +40,7 @@ import { userEvent } from "@testing-library/user-event"
 import { PasteResponse } from "../../shared/interfaces.js"
 import { setupServer } from "msw/node"
 import { http, HttpResponse } from "msw"
+import { stubBrowerFunctions, unStubBrowerFunctions } from "./testUtils.js"
 
 describe("Pastebin", () => {
   it("can upload", async () => {
@@ -74,11 +77,7 @@ describe("Pastebin", () => {
 
 describe("Pastebin admin page", () => {
   it("renders admin page", async () => {
-    Object.defineProperty(window, "location", {
-      configurable: true,
-      enumerable: true,
-      value: new URL("https://example.com/abcd:xxxxxxxxx"),
-    })
+    vi.stubGlobal("location", new URL("https://example.com/abcd:xxxxxxxxx"))
     render(<PasteBin />)
 
     const editor = screen.getByRole("textbox", { name: "Paste editor" })

frontend/test/testUtils.ts

@@ -0,0 +1,16 @@
+import { vi } from "vitest"
+
+export function stubBrowerFunctions() {
+  vi.spyOn(window, "matchMedia").mockImplementation((_query: string): MediaQueryList => {
+    return {
+      matches: false,
+      addListener(_callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => unknown) | null) {},
+      addEventListener(_name: string, _listener: EventListenerOrEventListenerObject) {},
+      removeEventListener(_name: string, _listener: EventListenerOrEventListenerObject) {},
+    } as MediaQueryList
+  })
+}
+
+export function unStubBrowerFunctions() {
+  vi.resetAllMocks()
+}