Statements | Branches | Functions | Lines |
---|---|---|---|
Access here: https://venturalp-marvel.netlify.app/
π¦ΈββοΈ Luizalabs Marvel Challenge
π 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 .esling.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://developer.marvel.com/v1/public/characters`,
(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. If one is familiar with it just follow it, otherwise Commitizen CLI can be used to commit changes, remember, one first needs to stage changes before committing, and in order to commit one can use the script yarn cz
to run Commitizen CLI and follow the wizard/helper mode. 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.