Skip to content
This repository has been archived by the owner on Jan 27, 2024. It is now read-only.

Commit

Permalink
Merge branch 'master' of https://github.com/Arquisoft/lomap_en2b
Browse files Browse the repository at this point in the history
  • Loading branch information
andrrsin committed May 7, 2023
2 parents b4163fc + a5fe183 commit c1e99d9
Showing 1 changed file with 34 additions and 22 deletions.
56 changes: 34 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,26 @@
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_en2b&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_en2b)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_en2b&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_en2b)

## Introduction to Lomap

This is an application done by a team of UniOvi students, simulating a project done by a belgian software company, for the Council of Brussels.
It is an application where the users can login with their Solid accounts and share their favourite landmarks and places all around the globe with their friends. In the application you will be able to see your friends' landmarks, and you can create landmarks on your favourite places in order to let people see what you enjoy the most about the city of Brussels and also from the whole world.

This is a website done while we learnt some technologies like **React**, **Typescript** or an endpoint using **NodeJS** with **express**.

<p align="center">
<img src="https://blog.wildix.com/wp-content/uploads/2020/06/react-logo.jpg" height="100">
<img src="https://miro.medium.com/max/1200/0*RbmfNyhuBb8G3LWh.png" height="100">
<img src="https://miro.medium.com/max/365/1*Jr3NFSKTfQWRUyjblBSKeg.png" height="100">
</p>

## Team members

Andres Cadenas Blanco [email protected]
Pedro Limeres Granado [email protected]
Diego Villanueva Berros [email protected]
Jorge Joaquín Gancedo Fernández [email protected]

## Sections

* [Quickstart guide](#quickstart-guide)
Expand Down Expand Up @@ -74,36 +94,28 @@ npm run dev
This runs the application in local, take into account you must have nodejs installed in the system. To access the webpage access in a browser write: localhost:3000


### Testing the Webapp
### Testing the Webapp and the Restapi

#### Unit tests

Basically these tests make sure that each component work isolated. It is important to check that they render properly. These tests are done using jest and you can execute them with `npm run test`. A code coverage analysis is generated every time we run the tests. If properly configured, this can be exploited by tools like [SonarCloud](https://sonarcloud.io/) to create reports of code coverage.
Some tests needs to mock some parts of the application. For instance, the `EmailForm.tsx` component uses the api for adding a user. In the unitary tests we should mock these calls to make more robusts tests. You can check the file [EmailForm.test.tsx](src/components/EmailForm.test.tsx) to learn how this is done.
For instance:
```javascript
jest.spyOn(api,'addUser').mockImplementation((user:User):Promise<boolean> => Promise.resolve(false))
```
will mock the implementation of the addUser function. Instead of calling the API, we just return false simulating that the webservice has failed to add a new user.

### Docker image for the web app
These tests have been done both on the webapp and on the restapi.

The `Dockerfile` for the webapp is pretty simple. Just copy the app, install the dependencies, build the production version an then run a basic webserver to launch it.
#### e2e tests

In order to run the app, we need a server. `npm start` is not good for production so we are going to use [Express](https://expressjs.com/es/). Check [server.js](webapp/server.ts) in the webapp to understand the configuration. As we will run it in port 3000 (in localhost), we have to bind this port with the port in our local machine.
These type of tests make sure that the navigation on the web page is as expected. They are done using cucumber, and they are run via an automatic web browser that executes the orders we want, and compares the results it gets with the ones we want to get.
```console
cd restapi
npm i
npm run test:e2e
```

## Team members
#### Load Testing

Andres Cadenas Blanco [email protected]
Pedro Limeres Granado [email protected]
Diego Villanueva Berros [email protected]
Jorge Joaquín Gancedo Fernández [email protected]
These type of tests, we external to the code, and they measured how the web application worked facing some high trafic of users, we tried to simulate different scenarios and also we tried with different number o users. We used the tool Gatling for making these tests.

<p align="center">
<img src="https://blog.wildix.com/wp-content/uploads/2020/06/react-logo.jpg" height="100">
<img src="https://miro.medium.com/max/1200/0*RbmfNyhuBb8G3LWh.png" height="100">
<img src="https://miro.medium.com/max/365/1*Jr3NFSKTfQWRUyjblBSKeg.png" height="100">
</p>
### Docker image for the web app

The `Dockerfile` for the webapp is pretty simple. Just copy the app, install the dependencies, build the production version an then run a basic webserver to launch it.

This project is a basic example of website using **React** with **Typescript** and an endpoint using **NodeJS** with **express**.
In order to run the app, we need a server. `npm start` is not good for production so we are going to use [Express](https://expressjs.com/es/). Check [server.js](webapp/server.ts) in the webapp to understand the configuration. As we will run it in port 3000 (in localhost), we have to bind this port with the port in our local machine.

0 comments on commit c1e99d9

Please sign in to comment.