Feature/restructure app

packages/frontend-design-poc/package.json

@@ -16,7 +16,8 @@
     "@digdir/design-system-tokens": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",

packages/frontend-design-poc/src/App.tsx

@@ -1,15 +1,20 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { HelloWorld } from './components/HelloWorld/HelloWorld.tsx';
-import styles from './app.module.css'
-
-const queryClient = new QueryClient();
+import { Route, Routes } from "react-router-dom";
+import { HelloWorld } from "./components/HelloWorld";
+import { PageNotFound } from "./pages/PageNotFound";
+import { PageLayout } from "./pages/PageLayout";
+import styles from "./app.module.css";
 
 function App() {
-  return (<QueryClientProvider client={queryClient}>
-    <section data-testid="app" className={styles.app}>
-      <HelloWorld />
-    </section>
-  </QueryClientProvider>);
+  return (
+    <div className={styles.app} role="main">
+      <Routes>
+        <Route element={<PageLayout />}>
+          <Route path="/" element={<HelloWorld />} />
+          <Route path="*" element={<PageNotFound />} />
+        </Route>
+      </Routes>
+    </div>
+  );
 }
 
 export default App;

packages/frontend-design-poc/src/app.spec.tsx

@@ -1,11 +1,16 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import App from './App.tsx';
+import { beforeAll, describe, expect, it } from "vitest";
+import { customRender } from "../utils/test-utils.tsx";
+import App from "./App.tsx";
+import { server } from "./mocks/node.ts";
 
-describe('App Smoke Test', () => {
-  it('renders without crashing', () => {
-    const { getByTestId } = render(<App />);
-    const appElement = getByTestId('app');
+describe("App Smoke Test", async () => {
+  beforeAll(async () => {
+    server.listen();
+  });
+
+  it("renders without crashing", () => {
+    const { getByRole } = customRender(<App />);
+    const appElement = getByRole("main");
     expect(appElement).toBeTruthy();
   });
 });

packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx

@@ -1,11 +1,12 @@
-import styles from './helloWorld.module.css';
-import { useQuery } from 'react-query';
-import { getUser } from '../../api/queries.ts';
+import styles from "./helloWorld.module.css";
+import { useQuery } from "react-query";
+import { getUser } from "../../api/queries.ts";
 
 export const HelloWorld = () => {
-  const { isLoading, data } = useQuery('user', getUser);
-
-  return (<section className={styles.helloWorld}>
+  const { isLoading, data } = useQuery("user", getUser);
+  return (
+    <section className={styles.helloWorld}>
       {isLoading ? <span>Loading ...</span> : <h1>Hello, {data?.name}!</h1>}
-    </section>);
-};
+    </section>
+  );
+};

packages/frontend-design-poc/src/components/HelloWorld/index.ts

@@ -0,0 +1 @@
+export { HelloWorld } from "./HelloWorld.tsx";

packages/frontend-design-poc/src/main.tsx

@@ -1,17 +1,27 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
 
 async function enableMocking() {
-  if (import.meta.env.MODE === 'development') {
-    const { worker } = await import('./mocks/browser');
+  if (import.meta.env.MODE === "development") {
+    const { worker } = await import("./mocks/browser");
     return worker.start();
   }
 }
 
+const root = ReactDOM.createRoot(document.getElementById("root")!);
+const queryClient = new QueryClient();
+
 enableMocking().then(() => {
-  ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode>
-    <App />
-  </React.StrictMode>);
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
 });
-

packages/frontend-design-poc/src/mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)

packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom";
+
+export const PageLayout = () => {
+  return (
+    <>
+      <nav aria-label="hovedmeny" />
+      <Outlet />
+    </>
+  );
+};

packages/frontend-design-poc/src/pages/PageLayout/index.ts

@@ -0,0 +1 @@
+export { PageLayout } from './PageLayout';

packages/frontend-design-poc/src/pages/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,7 @@
+export const PageNotFound = () => {
+  return (
+    <div>
+      <h1>Ooops... page not found :(</h1>
+    </div>
+  );
+};

packages/frontend-design-poc/src/pages/PageNotFound/index.ts

@@ -0,0 +1 @@
+export { PageNotFound } from "./PageNotFound.tsx";

packages/frontend-design-poc/utils/test-utils.tsx

@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { render, RenderOptions } from "@testing-library/react";
+
+interface IExtendedRenderOptions extends RenderOptions {
+  initialEntries?: string[];
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+export const customRender = (
+  ui: ReactElement,
+  options?: Omit<IExtendedRenderOptions, "wrapper">,
+) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={options?.initialEntries ?? ["/"]}>
+          {children}
+        </MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  return render(ui, { wrapper: Wrapper, ...options });
+};