Add navbar tests, fix Jest/Babel configs (#25)

* Add navbar tests, fix Jest/Babel configs

Jest was declared as a module, but had no default export, this makes the Jest config a module. Babel has been made CommonJS, as it is the standard with this version of Babel

* Ignore CJS files in linter

* Ignore Babel config in ESLint config

* Use babel-jest transform

* Remove dev deps from build deps

* Revert to .js Babel config

.gitignore

@@ -6,4 +6,6 @@
 
 # pnpm pack outputs
 /diamondlightsource-sci-react-ui-*.tgz
-/storybook-static/
+/storybook-static/
+
+tsconfig.tsbuildinfo

.npmignore

@@ -14,11 +14,13 @@ src/storybook/
 
 rollup.config.mjs
 jest.config.js
-babel.config.js
+babel.config.cjs
 tsconfig.json
 
 src/**/*.stories.*
 src/**/*.test.*
 
 secret.txt
 diamondlightsource-sci-react-ui*.tgz
+
+tsconfig.tsbuildinfo

babel.config.js

@@ -1,5 +1,3 @@
-export const presets = [
-  "@babel/preset-env",
-  ["@babel/preset-react", { runtime: "automatic" }],
-  "@babel/preset-typescript",
-];
+module.exports = {
+  presets: ["@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }], "@babel/preset-typescript"],
+};

jest.config.js

@@ -1,4 +1,10 @@
-export const testEnvironment = "jsdom";
-export const moduleNameMapper = {
+/** @type {import('jest').Config} */
+const config = { testEnvironment: "jsdom",
+moduleNameMapper: {
   "^.+.(svg)$": "jest-transform-stub",
-};
+},
+transform: {
+"^.+\\.tsx?$": "babel-jest"
+}};
+
+export default config;

package.json

@@ -23,17 +23,11 @@
     "storybook:build": "storybook build -o storybook-static",
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
   },
+  "main": "dist/index.js.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "dependencies": {
-    "@eslint/eslintrc": "^3.2.0",
     "@mui/icons-material": "^6.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "jest-transform-stub": "^2.0.0",
     "react-icons": "^5.3.0"
   },
   "peerDependencies": {
@@ -85,7 +79,16 @@
     "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0"
+    "typescript-eslint": "^8.15.0",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "jest-transform-stub": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "@eslint/eslintrc": "^3.2.0"
   },
   "packageManager": "[email protected]+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b"
 }

src/components/Navbar.test.tsx

@@ -0,0 +1,48 @@
+import { fireEvent, screen, render } from "@testing-library/react";
+import { Navbar, NavLinks, NavLink } from "./Navbar";
+import "@testing-library/jest-dom";
+
+describe("Navbar", () => {
+  it("should not display logo if null", () => {
+    global.innerWidth = 600;
+    render(<Navbar logo={null} />);
+    expect(screen.queryByAltText("Home")).not.toBeInTheDocument();
+  });
+});
+
+describe("Navbar Links", () => {
+  it("should display hamburger menu on narrow displays", () => {
+    global.innerWidth = 600;
+    render(
+      <NavLinks>
+        <NavLink>Proposals</NavLink>
+      </NavLinks>,
+    );
+    expect(
+      screen.getByRole("button", { name: /open menu/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("should display menu items when hamburger menu is clicked", () => {
+    global.innerWidth = 600;
+    render(
+      <NavLinks>
+        <NavLink>Proposals</NavLink>
+      </NavLinks>,
+    );
+    const menu = screen.getByRole("button", { name: /open menu/i });
+    fireEvent.click(menu);
+
+    expect(screen.getAllByText("Proposals")).toHaveLength(2);
+  });
+
+  it("should render links properly", () => {
+    global.innerWidth = 600;
+    render(
+      <NavLinks>
+        <NavLink>Proposals</NavLink>
+      </NavLinks>,
+    );
+    expect(screen.getByText("Proposals")).toBeInTheDocument();
+  });
+});