Pizza Time!

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

• Redux Toolkit TypeScript quick start
• Official CRA template project using redux toolkit and typescript
• Redux async logic
• Guidelines for writing tests for Redux
• Redux Toolkit Query Overview

---

Code Generation

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

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

• Swagger CodeGen Github Repo
• Swagger Editor - Online
• Swagger Pet Store Github Repo (reference implementation)
• npm package that wraps Swagger CodeGen

---

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.

---

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.