This repository has been archived by the owner on Jan 27, 2024. It is now read-only.
generated from Arquisoft/lomap_0
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/Arquisoft/lomap_en2b
- Loading branch information
Showing
1 changed file
with
34 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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) | ||
|
@@ -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. |