Updated Tests to TypeScript

client/package.json

@@ -37,7 +37,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.11",
     "jsdom": "^24.1.1",
-    "msw": "^2.4.1",
+    "msw": "^2.4.4",
     "sass": "^1.77.8",
     "typescript": "^5.5.4",
     "vite": "^5.3.5",

client/src/redux/api/api.ts

@@ -1,5 +1,6 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
+//Default PORT of 3000 is supplied for use with Github Actions
 const PORT = import.meta.env.VITE_PROXY_TARGET_PORT || 3000;
 const BASE_PATH = (import.meta.env.PROD) ? '/api/v1' : `http://localhost:${PORT}/api/v1`
 

client/src/screens/HealthScreen.test.tsx

@@ -0,0 +1,38 @@
+import { render } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { test, expect } from "vitest";
+import axe from "axe-core";
+import { Provider } from "react-redux";
+import store from "../redux/store.ts";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+import { routes } from "../routes/routes.tsx";
+
+test("Testing Health Screen", async () => {
+  const user = userEvent.setup();
+  const router = createMemoryRouter(routes, {
+    initialEntries: ["/health"],
+    initialIndex: 1,
+  });
+
+  const { container, getByText, getByRole } = render(
+    <Provider store={store}>
+      <RouterProvider router={router} />
+    </Provider>
+  );
+  expect(getByText("Test Flash Messages")).toBeInTheDocument();
+
+  const results = await axe.run(container, {
+    rules: { "color-contrast": { enabled: false } },
+  });
+  expect(results.incomplete.length).toBe(0);
+  expect(results.violations.length).toBe(0);
+
+  const div = document.querySelector(".message-success");
+  expect(div).not.toBeInTheDocument();
+
+  await user.click(getByRole("button", { name: "Test Flash Messages" }));
+  expect(
+    getByText("This is a test of a successful message. Congrats!")
+  ).toBeInTheDocument();
+});

client/src/screens/HomeScreen.test.tsx

@@ -0,0 +1,52 @@
+import { setupServer } from "msw/node";
+import { render, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { beforeAll, afterAll, afterEach, test, expect } from "vitest";
+import axe from "axe-core";
+import { Provider } from "react-redux";
+import store from "../redux/store.ts";
+
+import HomeScreen from "./HomeScreen.tsx";
+import { BrowserRouter } from "react-router-dom";
+import { handlers } from "../../tests/handlers.ts";
+
+const server = setupServer(...handlers);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+const HomeScreenComponent = (
+  <Provider store={store}>
+    <HomeScreen />
+  </Provider>
+);
+
+test("Test Home Page Loaded Content", async () => {
+  const { container, findByText } = render(HomeScreenComponent, {
+    wrapper: BrowserRouter,
+  });
+  let loader = document.querySelector(".home-page-loading-container");
+  expect(loader).toBeInTheDocument();
+
+  await waitFor(async () => {
+    const results = await axe.run(container, {
+      rules: { "color-contrast": { enabled: false } },
+    });
+    expect(results.incomplete.length).toBe(0);
+    expect(results.violations.length).toBe(0);
+  });
+
+  loader = document.querySelector(".home-page-loading-container");
+  expect(loader).not.toBeInTheDocument();
+
+  expect(
+    await findByText("How LEDs Work - Unravel the Mysteries of How LEDs Work!")
+  ).toBeInTheDocument();
+  expect(
+    await findByText(
+      "Single Phase Electricity Explained - wiring diagram energy meter"
+    )
+  ).toBeInTheDocument();
+  expect(await findByText("Halo Full OST")).toBeInTheDocument();
+});

client/src/screens/SearchScreen.test.tsx

@@ -0,0 +1,70 @@
+import { setupServer } from "msw/node";
+import { render, screen, act, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { beforeAll, afterAll, afterEach, test, expect, vitest } from "vitest";
+import axe from "axe-core";
+import { Provider } from "react-redux";
+import store from "../redux/store.ts";
+import SearchScreen from "./SearchScreen.tsx";
+import { BrowserRouter } from "react-router-dom";
+import { handlers } from "../../tests/handlers.ts";
+import { useState } from "react";
+
+const server = setupServer(...handlers);
+
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: "error" });
+  const mockIntersectionObserver = vitest.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+  });
+  window.IntersectionObserver = mockIntersectionObserver;
+
+  vitest.mock("react-router-dom", async () => {
+    const props = await vitest.importActual("react-router-dom");
+    return {
+      ...props,
+      useSearchParams: () => {
+        let mockParams = "q=java";
+        const [params, setParams] = useState(new URLSearchParams(mockParams));
+        return [
+          params,
+          (newParams: string) => {
+            mockParams = newParams;
+            setParams(new URLSearchParams(newParams));
+          },
+        ];
+      },
+    };
+  });
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+test("Test Search Page Loaded Content", async () => {
+  const { container } = await act(async () =>
+    render(
+      <Provider store={store}>
+        <SearchScreen />
+      </Provider>,
+      { wrapper: BrowserRouter }
+    )
+  );
+
+  await waitFor(async () => {
+    const results = await axe.run(container, {
+      rules: { "color-contrast": { enabled: false } },
+    });
+    expect(results.incomplete.length).toBe(0);
+    expect(results.violations.length).toBe(0);
+  });
+
+  expect(screen.getByText("Search results for 'java'")).toBeInTheDocument();
+  expect(screen.getByText("Java Basics - An Overview")).toBeInTheDocument();
+  expect(
+    screen.getByText("Introduction to Variables in Java")
+  ).toBeInTheDocument();
+  expect(screen.getByText("Identifiers in Java")).toBeInTheDocument();
+});