venturalp / bexs

Statements	Branches	Functions	Lines

---

Bexs Challenge

Online: https://bexs-venturalp.netlify.app/

🛠 Stack

Main tools used in this project:

ReactJS	Yarn	Webpack	Jest	Testing Library
MSW	Zustand	Styled Components

⚠️ Requirements

• Node v12+
• NPM v6.14.8+

🗃 Environment variables

Variable	Description
ENVIRONMENT	As its name says, is the environment of the application. default value: dev. values: dev/prd/hml

🚀 Installation and Running

This project was developed using yarn but one can use npm as well.

To run this project one must first install all project dependencies by running:

npm

npm install

or

yarn

yarn

Then run the application:

npm

npm start

or

yarn

yarn start

After that, the application will open and run at http://localhost:3000

💻 Code patterns

This project uses Prettier to auto format code, following Eslint rules (based on airbnb rules). For those who are using VSCode, this repository already has a vscode config versionated to be easily used.

The project is all set with alias to make things easier when it comes to importing files and modules. One can find this settings inside package.json, jest.config.js, jsconfig.json, webpack.config.js and .eslintrc.js files. Find more about here

📋 Tests

For tests this application uses Jest and React testing Library

Jest setup is located in jest.config.js file where one can see that a file setupTests.js is being used, this file basically defines a few useful mocks.

One has a few helpers to use on tests located here: Commons/tests/Tests.Helpers.js

Running tests:

yarn test:all

Generate coverage report:

yarn coverage

Then the report can be accessed at /coverage/lcov-report/index.html

🌐 Mock Server Worker

MSW is used to mock all API requests in our application. Before all tests, the mock server must be started, this happens in setupTests.js file, and after each test, the mock is reseted, this is because one can change a few responses to specific tests and still avoid side effects on other tests, and at the end of our tests the server is stopped. All application handlers are located in Tests.ServerMockHandlers.js file, so every new service must also be included here to be available for tests.

Ok, but if one wants a different return for a specific request, what can one do? This can be easily handled by importing our MSW server and passing the new request specifications, for example:

import { server, rest } from 'Commons/tests/Tests.MockServer'

server.use(
  rest.get(`https://foo.bar/api`, (req, res, ctx) => res(ctx.status(400))),
)

As it can be seen in the example above, one just needs to import server and rest from our MockServer and with the server method use pass the new request wanted.

🌍 Global State Management

This application uses Zustand lib to manage global state. When one creates a new store with Zustand, it returns a hook, ready to be used.

📡 Axios and Requests

This project uses Axios for http requests, and for this, there is a hook (useRequests) into the Requests.defaults.js file, this hook returns an Axios instance with set interceptors. Why is that? Well, the project's interceptors handle global loading feedbacks.

For global loading feedbacks (a loading over all the application), one can pass showLoading flag as true as an axios request config and the loading will be removed when the request is finished.

📝 Commit convention

This project follows Angular commit convention for commit patterns. The project also uses husky to handle a pre-commit hook which will run tests before allowing the commit, if one doesn't want to run tests on a commit, use the parameter --no-verify on the commit command.