Example NodeJS/React Consumer - Mock Service Worker (BYO Adapter)

• Example NodeJS/React Consumer - Mock Service Worker (BYO Adapter)
  • Overview of Example
    • Key points with Mock Service Worker
  • Overview of Part of Bi-Directional Contract Testing Flow
  • Compatibile with Providers
  • Pre-requisites
    • Environment variables
  • Usage
    • Steps
    • Use case with pact-msw-ddapter
  • OS/Platform specific considerations
    • Windows
  • Caveats
  • Related topics / posts / discussions
  • Other examples of how to do this form of testing
  • Found an issue?

Overview of Example

This is an example of a NodeJS/React "Product" API consumer that uses Mock-Service-Worker, Pact, PactFlow and GitHub Actions to generate and publish Pact consumer contracts.

It performs pre-deployment cross-compatibility checks to ensure that it is compatible with specified providers using the Bi-Directional contract capability of PactFlow.

See the full PactFlow Bi-Directional Workshop for which this can be substituted in as the "consumer".

Key points with Mock Service Worker

It:

• It a React app implementing a "Product" website created with Create React App
• It utilises MSW to mock out the Product API provider
• It utilises pact-msw-adapter to transform msw mocks into Pact consumer contracts.

Overview of Part of Bi-Directional Contract Testing Flow

In the following diagram, You can see how the consumer testing process works - it's the same as the current Pact process.

When we call "can-i-deploy" the cross-contract validation process kicks off on PactFlow, to ensure any consumer consumes a valid subset of the OAS for the provider.

The project uses a Makefile to simulate a very simple build pipeline with two stages - test and deploy.

When you run the CI pipeline (see below for doing this), the pipeline should perform the following activities (simplified):

• Test
  • Run tests (including the pact tests that generate the contract)
  • Publish pacts, tagging the consumer version with the name of the current branch
  • Check if we are safe to deploy to Production with can-i-deploy (ie. has the cross-contract validation has been successfully performed)
• Deploy (only from master)
  • Deploy app to Production
  • Record the Production deployment in the Pact Broker

Compatibile with Providers

This project is currently compatible with the following provider(s):

• pactflow-example-bi-directional-provider-dredd
• pactflow-example-bi-directional-provider-restassured
• pactflow-example-bi-directional-provider-postman
• pactflow-example-bi-directional-provider-dotnet

See Environment variables on how to set these up.

Pre-requisites

Software:

• Tools listed at: https://docs.pactflow.io/docs/workshops/ci-cd/set-up-ci/prerequisites/
• A pactflow.io account with an valid API token

Environment variables

To be able to run some of the commands locally, you will need to export the following environment variables into your shell:

• PACT_BROKER_TOKEN: a valid API token for PactFlow
• PACT_BROKER_BASE_URL: a fully qualified domain name with protocol to your pact broker e.g. https://testdemo.pactflow.io

Set PACT_PROVIDER to one of the following

• PACT_PROVIDER=pactflow-example-bi-directional-provider-dredd: Dredd - (https://github.com/pactflow/example-bi-directional-provider-dredd)
• PACT_PROVIDER=pactflow-example-bi-directional-provider-postman: Postman - (https://github.com/pactflow/example-bi-directional-provider-postman)
• PACT_PROVIDER=pactflow-example-bi-directional-provider-restassured: Rest Assured - (https://github.com/pactflow/example-bi-directional-provider-restassured)

Usage

Steps

• make clean - ensure previous pacts are cleared
• make test - run msw test locally
• make fake_ci - emulate the CI process locally

Use case with pact-msw-ddapter

Check out the pact-msw-adapter repo here for more details in the readme.

Specifics of the particular implementation in this repository are highlighted below.

• src/mocks/handlers.js describes msw request handlers to use.
• src/mocks/server.js sets up the "server" to use the same mocking logic in Node.
• src/setupTests.js enables mocking for unit tests via and allows us to record which msw matched interactions we wish to serialise into a pact.

OS/Platform specific considerations

The makefile is configured to run on Unix based systems such as you would find in most common CI/CD pipelines.

They can be run locally on Unix/Mac, or on Windows via WSL2.

Windows

You can still try this example locally on Windows using powershell and running commands manually.

Click to see windows specific instructions here

These will be the same commands that are used in the makefile with a few manual tweaks.

1. Make sure you have set all of the environment variables, in powershell they can be set like so.

    $env:GIT_BRANCH="main"
   

2. Publish the pact that was generated. The step uses the pact-cli docker image to publish the pact to your pactflow account. The path for <path_to_project_root> needs to be converted from Windows paths to UNIX ones as the Docker container is using UNIX. Either hard code this or set it as another environment variable.

   C:\Users\Person\Documents\example-bi-directional-consumer-dotnet

   becomes

   /c/Users/Candy/Documents/PactFlow/example-bi-directional-consumer-dotnet

   $env:VARIABLE_NAME refers to the environment variables in windows.

   docker run --rm -v <path_to_project_root>:<path_to_project_root> -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN pactfoundation/pact-cli publish <path_to_pacts_folder> --consumer-app-version $env:GIT_COMMIT --branch $env:GIT_BRANCH
   
   

3. Check can-i-deploy to see if your provider is compatible with your pact.

   docker run --rm -v <path_to_project_root>:<path_to_project_root> -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN pactfoundation/pact-cli  broker can-i-deploy --pacticipant pactflow-example-bi-directional-consumer-dotnet --version $env:GIT_COMMIT --to-environment production  --retry-while-unknown 0 --retry-interval 10
   

4. Have a look at what other commands are available in the Makefile. All of them can be ran locally from Powershell by changing the windows paths to UNIX and replacing the environment variable references. Any variable referenced as ${VARIABLE} can be changed to $env:VARIABLE to reference environment variables in Powershell.

Caveats

• OAS considerations

Related topics / posts / discussions

• Consumer Side Bi-Directional Contract Testing Guide
• Provider Side Bi-Directional Contract Testing Guide

Other examples of how to do this form of testing

• TBC

Found an issue?

Reach out via a GitHub Issue, or reach us over in the Pact foundation Slack