From 94356b8668d2ee879f975337060b78f4ca443aae Mon Sep 17 00:00:00 2001
From: Seb-sti1 <65665540+seb-sti1@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:35:46 +0200
Subject: [PATCH] Create mock lib for react-leaflet

---
 frontend/package.json                         |  7 ++-
 frontend/src/App.test.tsx                     |  9 ----
 .../src/Components/Map/MapWrapper.test.tsx    | 14 ++++++
 frontend/src/Components/Navbar.test.tsx       | 26 ++++++++++
 frontend/src/mocks/reactLeafletMock.tsx       | 50 +++++++++++++++++++
 5 files changed, 96 insertions(+), 10 deletions(-)
 delete mode 100644 frontend/src/App.test.tsx
 create mode 100644 frontend/src/Components/Map/MapWrapper.test.tsx
 create mode 100644 frontend/src/Components/Navbar.test.tsx
 create mode 100644 frontend/src/mocks/reactLeafletMock.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 83409cf4..130ceb8d 100644
--- a/frontend/package.json
+++ b/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"
+    }
   }
 }
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
deleted file mode 100644
index 2a68616d..00000000
--- a/frontend/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/frontend/src/Components/Map/MapWrapper.test.tsx b/frontend/src/Components/Map/MapWrapper.test.tsx
new file mode 100644
index 00000000..05caf962
--- /dev/null
+++ b/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();
+  }
+});
diff --git a/frontend/src/Components/Navbar.test.tsx b/frontend/src/Components/Navbar.test.tsx
new file mode 100644
index 00000000..1344aaf4
--- /dev/null
+++ b/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');
+});
diff --git a/frontend/src/mocks/reactLeafletMock.tsx b/frontend/src/mocks/reactLeafletMock.tsx
new file mode 100644
index 00000000..449848c8
--- /dev/null
+++ b/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,
+};