Introduction

Part 2, Lesson 1



In part 2, we’ll add code coverage and continuous integration testing to ensure that each service can be run and tested independently from the whole. Finally, we’ll add React along with Jest (a JavaScript test runner) and Enzyme (a testing library designed specifically for React) to the client-side.

Structure

Before diving in, take a quick look at the current project structure:

├── docker-compose-dev.yml
├── docker-compose-prod.yml
└── services
    ├── nginx
    │   ├── Dockerfile-dev
    │   ├── Dockerfile-prod
    │   ├── dev.conf
    │   └── prod.conf
    └── users
        ├── Dockerfile-dev
        ├── Dockerfile-prod
        ├── entrypoint-prod.sh
        ├── entrypoint.sh
        ├── manage.py
        ├── project
        │   ├── __init__.py
        │   ├── api
        │   │   ├── __init__.py
        │   │   ├── models.py
        │   │   ├── templates
        │   │   │   └── index.html
        │   │   └── users.py
        │   ├── config.py
        │   ├── db
        │   │   ├── Dockerfile
        │   │   └── create.sql
        │   └── tests
        │       ├── __init__.py
        │       ├── base.py
        │       ├── test_config.py
        │       └── test_users.py
        └── requirements.txt

Notice how we are managing each microservice in a single project, with a single git repo. It’s important to note that you can also break each service into a separate project, each with its own git repo. There are pros and cons to each approach - mono repo vs multiple repo. Do your research.

Interested in the multiple repo approach? Review the code from version 1 of this course:

  1. flask-microservices-main - Docker Compose files, Nginx, admin scripts
  2. flask-microservices-users - Flask app for managing users and auth
  3. flask-microservices-client - client-side, React app
  4. flask-microservices-swagger - Swagger API docs
  5. flask-microservices-eval - Flask app for managing user scores and exercises

Objectives

By the end of this part, you will be able to…

  1. Run unit and integration tests with code coverage inside a Docker Container
  2. Check your code for any code quality issues via a linter
  3. Configure Travis CI for continuous integration testing
  4. Explain what React is and how it compares to Angular and Vue
  5. Work with React running inside a Docker Container
  6. Unit test React components with Jest and Enzyme
  7. Create a Single Page Application (SPA) with React components
  8. Use React props and state appropriately
  9. Manage the state of a React component via component lifecycle methods
  10. Pass environment variables to a Docker image at build time
  11. Use React controlled components to handle form submissions
  12. Create a production Dockerfile that uses multistage Docker builds

App

microservice architecture

Check out the live app, running on EC2 -

You can also test out the following endpoints…

Endpoint HTTP Method CRUD Method Result
/ GET READ Load React app
/users GET READ get all users
/users/:id GET READ get single user
/users POST CREATE add a user
/users/ping GET READ sanity check

The /users POST endpoint is restricted as of part 3.

Finished code for part 2: https://github.com/testdrivenio/testdriven-app-2.3/releases/tag/part2

Dependencies

You will use the following dependencies in part 2:

  1. Coverage.py v4.5.1
  2. flake8 v3.5.0
  3. Flask Debug Toolbar v0.10.1
  4. Node v10.4.1
  5. npm v6.1.0
  6. Create React App v1.5.2
  7. React v16.4.1
  8. React Scripts v1.1.4
  9. React Dom 16.4.1
  10. Axios v0.17.1
  11. Flask-CORS v3.0.6
  12. Enzyme v3.3.0
  13. enzyme-adapter-react-16 v1.1.1