Skip to main content

Example NodeJS/React Consumer - Cypress (BYO Adapter)

Source Code

https://github.com/pactflow/example-bi-directional-consumer-cypress

Build

Can I deploy Status

Overview of Example

This is an example of a React "Product" API consumer that uses Cypress, pact-cypress-adapter, 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 Cypress

It:

  • It a React app implementing a "Product" website created with Create React App
  • It utilises Cypress to functionally test the website
  • It utilises pact-cypress-adapter to transform cypress 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.

Consumer Test

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 <main|master>)
    • Deploy app to Production
    • Record the Production deployment in the Pact Broker

Consumer Pipeline

Compatibile with Providers

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

See Environment variables on how to set these up.

Pre-requisites

Software:

Environment variables

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

Set PACT_PROVIDER to one of the following

Usage

Steps

NOTE: Cypress tests are located in ./cypress/integration. See below for how to start cypress test, generate consumer contract and publish contract to pactflow.

  • make test - run cypress test locally
  • make fake_ci - emulate the CI process locally

How to use Cypress

  • Spin up the ui project by running npm run start
  • Define your pact provider and consumer name at cypress.json as cypress environment variables
  • You can stub your network request and response with cy.intercept, and record network call to a consumer driven contract with cy.usePactWait. Each request you want to add to the contract must call this method.
  • npm run cypress:headless:chrome - this will run cypress e2e test in headless mode, and write stubbed network calls a pact file
  • npm run cypress:run - this will run cypress e2e test with browser ui

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

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