Merge pull request #190 from Arquisoft/finalTests

Final tests -> master

README.md

@@ -1,10 +1,16 @@
-# LoMap: ES1a
-
 [![Actions Status](https://github.com/arquisoft/lomap_es1a/workflows/CI%20for%20LOMAP_0/badge.svg)](https://github.com/arquisoft/lomap_es1a/actions)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_es1a&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_es1a)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_es1a&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_es1a)
 
-![alt text](lomap_logo.png "Title")
+<h1 align="center"> LoMap: ES1A </h1>
+
+<p align="center" margin-top="2em">
+  <img src="lomap_logo.png" alt="LoMap logo">
+</p>
+
+<p align="center" margin-top="2em">
+  <a href="https://youtu.be/8jDXuokrXMs"> <b>Demonstration video</b> </a> - <a href="https://20.108.13.14"> <b>Deployed website</b> </a>
+</p>
 
 ## Team members
 - Andrés Ángel González Granda - [email protected]
@@ -34,12 +40,12 @@ npm install
 npm start
 ```
 
-Now the webapp:
+Tu run the webapp you need to create a production build in order for the restapi to work properly:
 
 ```shell
 cd webapp
-npm install
-npm start
+npm run build
+npm run prod
 ```
 
 You should be able to access the application in [http://localhost:3000](http://localhost:3000).
@@ -50,4 +56,4 @@ You should be able to access the application in [http://localhost:3000](http://l
 
 ## Deployment
 
-<a href="http://20.108.13.14"> Deployed on Azure </a>
+<a href="https://20.108.13.14"> Deployed on Azure </a>

docs/04_solution_strategy.adoc

@@ -26,7 +26,7 @@ without having to spend too much time in the modelling process.
 while having to replace as little code as possible.
 * *Usability*: The app must be accesible and usable, and for that we will be implementing several design features into our
 user interface in order for clients to be able to complete their tasks efficiently.
-* *Disponibility*: The application must always work with as little errors as possible and, if any bugs appear, the application
+* *Availability*: The application must always work with as little errors as possible and, if any bugs appear, the application
 must be able to take care of them and inform the user in an organised manner. As such, we will implement mechanisms for these functionalities
 to take effect.
 

webapp/package.json

@@ -99,7 +99,8 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "axios": "axios/dist/node/axios.cjs"
+      "axios": "axios/dist/node/axios.cjs",
+      "mapbox-workerclass": "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"
     }
   }
 }

webapp/src/components/Map.tsx

@@ -1,4 +1,3 @@
-
 import "mapbox-gl/dist/mapbox-gl.css";
 import React, { useState } from "react";
 import axios, {
@@ -9,8 +8,8 @@ import { requestToList } from '../util/LocationParser';
 import mapboxgl, { Marker } from "mapbox-gl";
 
 // @ts-ignore
-// eslint-disable-next-line import/no-webpack-loader-syntax
-mapboxgl.workerClass =  require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
+// eslint-disable-next-line import/no-webpack-loader-syntax 
+mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
 
 mapboxgl.accessToken =
   "pk.eyJ1IjoidW8yNjQ1NzgiLCJhIjoiY2xldzVmcnBhMTYxMDNzczBwczRvMm5ueSJ9.t5bV5V6yx7ES0VZKIEqDsw";
@@ -48,7 +47,7 @@ export default class Map extends React.Component<Props> {
 
     this.map.doubleClickZoom.disable();
 
-    this.map.on("dblclick", (e: any) => {
+    this.map.on("click", (e: any) => {
       this.mapMarkers.forEach((marker: any) => {
         marker.remove();
       });

webapp/src/components/friends/AddFriendGroupModal.tsx

@@ -19,7 +19,8 @@ import type { Friend, Group } from "../../util/UserData";
 
 import './AddFriendGroupModal.css';
 
-Modal.setAppElement("#root");
+if (process.env.NODE_ENV !== 'test') Modal.setAppElement('#root');
+else Modal.setAppElement('body');
 
 const modalStyle = {
   content: {

webapp/src/components/home/AddLocationModal.tsx

@@ -18,7 +18,8 @@ import TextField from "@mui/material/TextField";
 import { getFriends, saveLocation, getAllGroupsObject } from "../..//util/PodUtil";
 import type { Friend, Group } from "../../util/UserData";
 
-Modal.setAppElement("#root");
+if (process.env.NODE_ENV !== 'test') Modal.setAppElement('#root');
+else Modal.setAppElement('body');
 
 const modalStyle = {
   content: {
@@ -48,7 +49,7 @@ interface Props {
   showNotification: () => void;
 }
 
-export default function AddLocationModal<Props>(props: any): JSX.Element {
+export default function AddLocationModal(props: any): JSX.Element {
   const { session } = useSession();
   const [friends, setFriends] = useState<Friend[]>([]);
   const [friendGroups, setFriendGroups] = useState<Group[]>([]);

webapp/src/components/home/Filter.tsx

@@ -8,7 +8,7 @@ import Switch from "@mui/material/Switch";
 import styles from './filter.module.css';
 
 export default function Filter( props:any ): JSX.Element {
-  const [category, setCategory] = React.useState("Show all");
+  const [category, setCategory] = React.useState('');
 
   const handleChangeCategory = (event:any) => {
 

webapp/src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />

webapp/src/test/HomeTest.test.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Home from "../pages/Home";
+import Map from "../components/home/SideForm";
+import App from "../App";
+import SideForm from "../components/home/SideForm";
+import MarkerInfo from "../components/home/MarkerInfo";
+import Filter from "../components/home/Filter";
+import AddLocationModal from "../components/home/AddLocationModal";
+
+describe("Home component", () => {
+  test("renders sideform", () => {
+    render(<SideForm show={true} setOpen={() => {}} showNotification={() => {}} reloadMap={() => {}}/>);
+    const title = screen.getByText("Add a location");
+    expect(title).toBeInTheDocument();
+  });
+
+  test("renders markerinfo", () => {
+    render(<MarkerInfo show={true} location={undefined} setOpen={(state:boolean) => {}} openModal={() => {}} cardList={undefined}/>)
+    const button = screen.getByText("Add info");
+    expect(button).toBeInTheDocument();
+  })
+
+  test("renders filter", () => {
+    render(<Filter toggleFriends={true} reloadMap={(category:string) => {}} toggleFilter={() => {}}/>)
+  }) 
+
+  test("renders addLocationModal", () => {
+    render(<AddLocationModal modalIsOpen={true} redirectToLogin={false} closeModal={() =>{}} showNotification={() => {}} selectedLocation={undefined} />)
+  })
+
+});

webapp/src/test/NavBarTest.test.tsx

@@ -0,0 +1,15 @@
+import { render, fireEvent, screen, RenderResult} from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import NavBar from '../components/NavBar';
+
+describe('NavBar', () => {
+    it('should go to the login page when clicked', () => {
+        const { getByRole } = render(
+          <BrowserRouter>
+            <NavBar />
+          </BrowserRouter>
+        );
+        const login = screen.getByRole('button', {name: 'Log in'});
+        expect(login).toBeInTheDocument();
+      });
+})

webapp/src/test/SideNavTest.test.tsx

@@ -1,8 +1,9 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import SideNav from '../components/Sidenav';
 
 describe('SideNav', () => {
+
   it('should render the component', () => {
     const { container } = render(
       <BrowserRouter>
@@ -12,15 +13,46 @@ describe('SideNav', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  /*t('should toggle the open state when the menu button is clicked', () => {
+  it('should go to the account page when clicked', () => {
+    const { getByRole } = render(
+      <BrowserRouter>
+        <SideNav />
+      </BrowserRouter>
+    );
+    const account = screen.getByRole('link', {name: 'Account'});
+    expect(account).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(account);
+    })
+  });
+
+  it('should go to the friends page when clicked', () => {
     const { getByRole } = render(
       <BrowserRouter>
         <SideNav />
       </BrowserRouter>
     );
-    const menuButton = getByRole('button');
-    fireEvent.click(menuButton);
-    expect(menuButton.getAttribute('aria-expanded')).toBe('true');
+    const friends = screen.getByRole('link', {name: 'Friends'});
+    expect(friends).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(friends);
+    })
   });
-  */
+
+  it('should go to the about page when clicked', () => {
+    const { getByRole } = render(
+      <BrowserRouter>
+        <SideNav />
+      </BrowserRouter>
+    );
+    const about = screen.getByRole('link', {name: 'About'});
+    expect(about).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(about);
+    })
+  });
+
 });