Create mock lib for react-leaflet

frontend/package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "CI=false react-scripts build",
-    "test": "react-scripts test",
+    "test": "CI=true react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -62,5 +62,10 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "prettier": "3.0.3"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "react-leaflet": "<rootDir>/src/mocks/reactLeafletMock.tsx"
+    }
   }
 }

frontend/src/Components/Map/MapWrapper.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MapWrapper from './MapWrapper';
+
+test('Check subcomponent of mapwrapper', () => {
+  render(<MapWrapper />);
+
+  const names = ['MapContainer', 'TileLayer', 'ScaleControl', 'ZoomControl'];
+
+  for (let idx in names) {
+    const element = screen.getByText(names[idx]);
+    expect(element).toBeInTheDocument();
+  }
+});

frontend/src/Components/Navbar.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Navbar from './Navbar';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+function TestRouter() {
+  return (
+    <Router>
+      <Navbar />
+    </Router>
+  );
+}
+test('Check links in navbar', () => {
+  render(<TestRouter />);
+  const linkConditionsML = screen.getByText(/Conditions \(ML\)/i);
+  expect(linkConditionsML).toBeInTheDocument();
+  expect(
+    screen.getByRole('link', { name: /Conditions \(ML\)/i }),
+  ).toHaveAttribute('href', '/conditions');
+
+  const linkConditionsGP = screen.getByText(/Conditions \(GP\)/i);
+  expect(linkConditionsGP).toBeInTheDocument();
+  expect(
+    screen.getByRole('link', { name: /Conditions \(GP\)/i }),
+  ).toHaveAttribute('href', '/road_conditions');
+});

frontend/src/mocks/reactLeafletMock.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+function MapContainer(props: any) {
+  const { children } = props;
+
+  return (
+    <div className={'react-leaflet'}>
+      <span>MapContainer</span>
+      <br />
+      {children}
+    </div>
+  );
+}
+
+function TileLayer() {
+  return (
+    <div className={'react-leaflet'}>
+      <span>TileLayer</span>
+    </div>
+  );
+}
+
+function ScaleControl() {
+  return (
+    <div className={'react-leaflet'}>
+      <span>ScaleControl</span>
+    </div>
+  );
+}
+function ZoomControl() {
+  return (
+    <div className={'react-leaflet'}>
+      <span>ZoomControl</span>
+    </div>
+  );
+}
+
+function useMapEvents() {
+  return {
+    getZoom: () => {},
+  };
+}
+
+module.exports = {
+  MapContainer,
+  TileLayer,
+  ScaleControl,
+  ZoomControl,
+  useMapEvents,
+};