Add router test for homepage and about page

Removes the router context from App into new index.jsx so we can test the app component and control which route is active in tests. index.jsx is the new entry point for the app.
yuvipanda · Nov 27, 2024 · 28dc23c · 28dc23c
1 parent 85113b0
commit 28dc23c
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 43 deletions.
diff --git a/binderhub/static/js/App.jsx b/binderhub/static/js/App.jsx
@@ -1,15 +1,12 @@
-import { createRoot } from "react-dom/client";
-
 import { LoadingPage } from "./pages/LoadingPage.jsx";
-import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import "bootstrap/js/dist/dropdown.js";
 
 import "./index.scss";
 import "@fontsource/clear-sans/100.css";
 import "@fontsource/clear-sans/300.css";
 import "@fontsource/clear-sans/400.css";
 import { HomePage } from "./pages/HomePage.jsx";
-import { createRoutesFromElements } from "react-router";
 import { AboutPage } from "./pages/AboutPage.jsx";
 
 export const PAGE_CONFIG = window.pageConfig;
@@ -45,40 +42,7 @@ export const PUBLIC_BASE_URL = PAGE_CONFIG.publicBaseUrl
   ? new URL(BASE_URL)
   : new URL(PAGE_CONFIG.baseUrl, window.location.href);
 
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route>
-      <Route
-        path={PAGE_CONFIG.baseUrl}
-        element={
-          <HomePage
-            providers={PROVIDERS}
-            baseUrl={BASE_URL}
-            publicBaseUrl={PUBLIC_BASE_URL}
-          />
-        }
-      />
-      {PROVIDERS.map((p) => (
-        <Route
-          key={p.id}
-          path={`${PAGE_CONFIG.baseUrl}v2/*`}
-          element={<LoadingPage baseUrl={BASE_URL} />}
-        />
-      ))}
-      <Route
-        key="about"
-        path={`${PAGE_CONFIG.baseUrl}about`}
-        element={
-          <AboutPage
-            aboutMessage={PAGE_CONFIG.aboutMessage}
-            binderVersion={PAGE_CONFIG.binderVersion}
-          />
-        }
-      />
-    </Route>,
-  ),
-);
-function App() {
+export function App() {
   return (
     <>
       {PAGE_CONFIG.bannerHtml && (
@@ -92,12 +56,36 @@ function App() {
           <div className="text-center m-4">
             <img src={PAGE_CONFIG.logoUrl} width={PAGE_CONFIG.logoWidth} />
           </div>
-          <RouterProvider router={router} />
+          <Routes>
+            <Route
+              path={PAGE_CONFIG.baseUrl}
+              element={
+                <HomePage
+                  providers={PROVIDERS}
+                  baseUrl={BASE_URL}
+                  publicBaseUrl={PUBLIC_BASE_URL}
+                />
+              }
+            />
+            {PROVIDERS.map((p) => (
+              <Route
+                key={p.id}
+                path={`${PAGE_CONFIG.baseUrl}v2/*`}
+                element={<LoadingPage baseUrl={BASE_URL} />}
+              />
+            ))}
+            <Route
+              path={`${PAGE_CONFIG.baseUrl}about`}
+              element={
+                <AboutPage
+                  aboutMessage={PAGE_CONFIG.aboutMessage}
+                  binderVersion={PAGE_CONFIG.binderVersion}
+                />
+              }
+            />
+          </Routes>
         </div>
       </div>
     </>
   );
 }
-
-const root = createRoot(document.getElementById("root"));
-root.render(<App />);
diff --git a/binderhub/static/js/App.test.jsx b/binderhub/static/js/App.test.jsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+
+import { App } from "./App";
+import { MemoryRouter } from "react-router";
+
+test("render Homepage", () => {
+  render(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>,
+  );
+  expect(
+    screen.queryByText(
+      /Turn a Git repo into a collection of interactive notebooks/,
+    ),
+  ).toBeInTheDocument();
+});
+
+test("render About page", () => {
+  render(
+    <MemoryRouter initialEntries={["/about"]}>
+      <App />
+    </MemoryRouter>,
+  );
+  expect(screen.queryByText(/This is the about message/)).toBeInTheDocument();
+  expect(screen.queryByText(/v123.456/)).toBeInTheDocument();
+});
diff --git a/binderhub/static/js/index.jsx b/binderhub/static/js/index.jsx
@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     ],
     "moduleNameMapper": {
       "\\.css$": "identity-obj-proxy",
+      "\\.scss$": "identity-obj-proxy",
       "\\.ico$": "identity-obj-proxy"
     },
     "setupFilesAfterEnv": [

diff --git a/setupTests.js b/setupTests.js
@@ -17,6 +17,9 @@ Object.defineProperty(window, "matchMedia", {
 });
 
 window.pageConfig = {
+  baseUrl: "/",
+  aboutMessage: "This is the about message",
+  binderVersion: "v123.456",
   repoProviders: [
     {
       detect: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module.exports = {
   mode: "development",
   context: path.resolve(__dirname, "binderhub/static"),
-  entry: "./js/App.jsx",
+  entry: "./js/index.jsx",
   output: {
     path: path.resolve(__dirname, "binderhub/static/dist/"),
     filename: "bundle.js",