Skip to content

Exploring and implementing state-of-the-art practices and tech when using ReactJS

Notifications You must be signed in to change notification settings

ynnckth/pizza-time

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pizza Time!

CI

Exploring state-of-the-art state management and testing practices for ReactJS in 2022

This project was bootstrapped with Create React App using the TypeScript template.

Pre-requisites

  • Only tested on a mac development machine (some scripts might need adaption to work on windows)
  • Node and npm LTS must be installed on dev machine
  • Docker must be installed on dev machine

Available scripts

# Generate client code for order-service API (required for frontend):
./openapi-codegen.sh

# Install dependencies:
npm install

# Run in development mode (on port 3000):
npm start

# Run unit and integration tests: 
npm test

# Run e2e tests:
npm run cypress:open

Topics covered in this project

  • CRA using TypeScript template
  • Routing using react-router-dom and BrowserRouter
  • State management using Redux Toolkit
  • Redux middleware using Thunk (default from Redux Toolkit)
  • Fetching data using RTK Query
  • React error boundary
  • Form validation using Formik
  • Unit and integration testing including a real store using react-testing-library and msw for mocking network requests
  • E2e testing using cypress (stubbed network calls)
  • Client code generation based on OpenAPI specification
  • CI/CD pipeline with GitHub Pages, including testing and deployment
  • Embed build version information into deployed frontend artifact based on commit hash and build number
  • Environment e2e testing for full integration tests of front- and backend
  • Visual regression testing with Cypress snapshot plugin

Links and relevant documentation


Code Generation

This project uses Swagger CodeGen and OpenAPI to generate parts of the consumer code for the order service API.

Code generation process

Prerequisites

  • The provided script expects you to have docker installed on your machine to be able to execute the code generation

Generating Client Code

# Generate the TypeScript client code:
./openapi-codegen.sh
# This will create a folder `generated` containing the generated client code

Open Points

  • Where to place the generated code ideally?
  • How to split the generated APIs into separate files (e.g. by controller)?
  • Currently only consuming generated models (interfaces) -> check what else can be used from the generated code
  • Differences to OpenAPI Tools / openapi-generator?

Links and Documentation


Test Strategy

This application defines the following test boundaries:

Frontend:

  • Unit and integration tests that cover the collaboration of one or more components in collaboration with Redux (including middleware). Mocking happens on the network layer.
  • E2e tests using Cypress. These tests cover the frontend e2e and run against a fully running frontend. Network requests are intercepted and stubbed.

Backend:

  • Tbd

E2e environment tests:

  • These tests run against a target environment (e.g. test environment) and cover the integration of front- and backend.
  • They should run automatically prior to a release.

Testing boundaries


Runtime Environments

There is currently only one target environment that is configured in the CD pipeline as follows:

The backend is currently deployed to Heroku (free tier):

https://pizza-time-backend.herokuapp.com/swagger-ui/index.html

Manage through Heroku dashboard.

The frontend is deployed as a static site to Vercel:

https://frontend-ynnckth.vercel.app/

Manage through Vercel dashboard

Tech debt

  • It looks like Vercel only allows overriding one single build command. If we have multiple environments, the current approach of overriding the build command in vercel.json is not possible.
  • The current free services come with their limitations. Consider deploying to a cloud environment instead.