- Updated to React 18

- Updated for public release
  - Git was reset for privacy reasons

src/infrastructure/config.ts

@@ -0,0 +1,5 @@
+type RunTimeConfig = {
+  version: number;
+};
+
+export const Config = (window as any).config as RunTimeConfig;

src/infrastructure/navbar/Navbar.css

@@ -0,0 +1,3 @@
+nav a {
+  padding-right: 10px;
+}

src/infrastructure/navbar/Navbar.spec.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { WithRouter } from "../wrappers/WithRouter";
+import { Navbar } from "./Navbar";
+
+describe("Navbar container", () => {
+  it("renders a navigation section identified by the nav test-id", () => {
+    render(
+      <WithRouter>
+        <Navbar />
+      </WithRouter>,
+    );
+
+    expect(screen.getAllByTestId("nav")?.length).toBeGreaterThan(0);
+  });
+});

src/infrastructure/navbar/Navbar.tsx

@@ -0,0 +1,19 @@
+import { FunctionComponent } from "react";
+import { Link } from "react-router-dom";
+import { Config } from "../config";
+import "./Navbar.css";
+type Props = {};
+
+export const Navbar: FunctionComponent<Props> = () => {
+  return (
+    <>
+      <h1>Our fancy header with navigation.</h1>
+      <p>App version: {JSON.stringify(Config.version)}</p>
+      <nav data-testid="nav">
+        <Link to="/">Home</Link> <Link to="/about">About</Link>
+        <Link to="/counter">Counter</Link>
+        <hr />
+      </nav>
+    </>
+  );
+};

src/infrastructure/wrappers/WithRouter.tsx

@@ -0,0 +1,8 @@
+import { FunctionComponent, ReactNode } from "react";
+import { BrowserRouter } from "react-router-dom";
+
+type Props = { children?: ReactNode };
+
+export const WithRouter: FunctionComponent<Props> = ({ children }) => {
+  return <BrowserRouter>{children}</BrowserRouter>;
+};