Merge pull request #74 from gotreasa/02-24-chore_remove_unused_packag…

…es_and_upgrade_vulnerabilities

Upgrade React and Cypress to continue to work

.eslintignore

@@ -0,0 +1 @@
+build/

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "settings": {
     "react": {
-      "version": "16.12.0"
+      "version": "18.2.0"
     }
   },
   "env": {
@@ -24,7 +24,7 @@
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2023,
     "sourceType": "module"
   },
   "plugins": [

.github/workflows/build.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "18"
       - name: Install
         run: npm i
       - name: Test

.github/workflows/test_pact_cli_tools_cross_os.yml

@@ -15,7 +15,7 @@ on:
       PACT_CLI_STANDALONE_VERSION:
         description: Tag from https://github.com/pact-foundation/pact-ruby-standalone/releases
         required: true
-        default: 1.89.00
+        default: 2.4.1
         type: string
 
 env:
@@ -27,7 +27,7 @@ env:
   PACT_CLI_VERSION: ${{ github.event.inputs.PACT_CLI_VERSION }}
   PACT_CLI_DOCKER_VERSION: ${{ github.event.inputs.PACT_CLI_DOCKER_VERSION }}
   PACT_CLI_STANDALONE_VERSION: ${{ github.event.inputs.PACT_CLI_STANDALONE_VERSION }}
-  PACT_CLI_STANDALONE_VERSION_DEFAULT: 1.88.90
+  PACT_CLI_STANDALONE_VERSION_DEFAULT: 2.4.1
 
 jobs:
 
@@ -51,9 +51,23 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: ['ubuntu-latest', 'windows-latest','macos-latest']
-        pact_tool: ['docker', 'ruby_cli','ruby_standalone' ]
-        node-version: [14.x,16.x]
+        os: 
+          [
+            'ubuntu-latest',
+            'windows-latest',
+            'macos-latest'
+          ]
+        pact_tool: 
+          [
+            'docker',
+            'ruby_cli',
+            'ruby_standalone'
+          ]
+        node-version: 
+          [
+            18.x,
+            20.x
+          ]
         pact_provider:
           [
             "pactflow-example-bi-directional-provider-dredd",
@@ -79,7 +93,7 @@ jobs:
         uses: ruby/setup-ruby@v1 
         if: ${{ (env.PACT_TOOL == 'ruby_cli' || env.PACT_TOOL == 'ruby_standalone') && runner.os == 'Linux' }}
         with:
-          ruby-version: 2.7
+          ruby-version: 3.3
           bundler: none
       # we add a fallback for windows/darwin runners as they cannot run docker
       - name: 🔧 install-pact-ruby-cli (also runs for macOS/docker) 

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run start:ui:and:test

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "*.js": "eslint",
+  "package.json": "typesync ./package.json --silent"
+}

Makefile

@@ -48,7 +48,8 @@ publish_pacts: .env
 ## Build/test tasks
 ## =====================
 
-install: npm install 
+install: 
+	npm install 
 
 test: .env
 	@echo "\n========== STAGE: test ✅ (cypress) ==========\n"
@@ -145,15 +146,15 @@ SHELL := /bin/bash
 PACT_TOOL?=docker
 PACT_CLI_DOCKER_VERSION?=latest
 PACT_CLI_VERSION?=latest
-PACT_CLI_STANDALONE_VERSION?=1.89.00
+PACT_CLI_STANDALONE_VERSION?=2.4.1
 PACT_CLI_DOCKER_RUN_COMMAND?=docker run --rm -v /${PWD}:/${PWD} -w ${PWD} -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN pactfoundation/pact-cli:${PACT_CLI_DOCKER_VERSION}
 PACT_BROKER_COMMAND=pact-broker
 PACTFLOW_CLI_COMMAND=pactflow
 
 ifeq '$(findstring ;,$(PATH))' ';'
 	detected_OS := Windows
 else
-	detected_OS := $(shell uname 2>/dev/null || echo Unknown)
+	detected_OS := $(shell uname -sm 2>/dev/null || echo Unknown)
 	detected_OS := $(patsubst CYGWIN%,Cygwin,$(detected_OS))
 	detected_OS := $(patsubst MSYS%,MSYS,$(detected_OS))
 	detected_OS := $(patsubst MINGW%,MSYS,$(detected_OS))
@@ -189,19 +190,29 @@ uninstall-pact-ruby-cli:
 
 install-pact-ruby-standalone:
 	case "${detected_OS}" in \
-	Windows|MSYS) curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-win32.zip && \
-		unzip pact-${PACT_CLI_STANDALONE_VERSION}-win32.zip && \
+	Windows|MSYS) curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-windows-x86_64.zip && \
+		unzip pact-${PACT_CLI_STANDALONE_VERSION}-windows-x86_64.zip && \
 		./pact/bin/pact-mock-service.bat --help && \
 		./pact/bin/pact-provider-verifier.bat --help && \
 		./pact/bin/pactflow.bat help;; \
-	Darwin) curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-osx.tar.gz && \
-		tar xzf pact-${PACT_CLI_STANDALONE_VERSION}-osx.tar.gz && \
+	"Darwin arm64") curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-osx-arm64.tar.gz && \
+		tar xzf pact-${PACT_CLI_STANDALONE_VERSION}-osx-arm64.tar.gz && \
 		./pact/bin/pact-mock-service --help && \
 		./pact/bin/pact-provider-verifier --help && \
 		./pact/bin/pactflow help;; \
-	Linux) curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-linux-x86_64.tar.gz && \
+	"Darwin x86_64") curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-osx-x86_64.tar.gz && \
+		tar xzf pact-${PACT_CLI_STANDALONE_VERSION}-osx-x86_64.tar.gz && \
+		./pact/bin/pact-mock-service --help && \
+		./pact/bin/pact-provider-verifier --help && \
+		./pact/bin/pactflow help;; \
+	"Linux aarch64") curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-linux-arm64.tar.gz && \
+		tar xzf pact-${PACT_CLI_STANDALONE_VERSION}-linux-arm64.tar.gz && \
+		./pact/bin/pact-mock-service --help && \
+		./pact/bin/pact-provider-verifier --help && \
+		./pact/bin/pactflow help;; \
+	"Linux x86_64") curl -LO https://github.com/pact-foundation/pact-ruby-standalone/releases/download/v${PACT_CLI_STANDALONE_VERSION}/pact-${PACT_CLI_STANDALONE_VERSION}-linux-x86_64.tar.gz && \
 		tar xzf pact-${PACT_CLI_STANDALONE_VERSION}-linux-x86_64.tar.gz && \
 		./pact/bin/pact-mock-service --help && \
 		./pact/bin/pact-provider-verifier --help && \
 		./pact/bin/pactflow help;; \
-	esac
+	esac

README.md

@@ -2,13 +2,13 @@
 
 [![Build](https://github.com/pactflow/example-bi-directional-consumer-cypress/actions/workflows/build.yml/badge.svg)](https://github.com/pactflow/example-bi-directional-consumer-cypress/actions/workflows/build.yml)
 
-[![Can I deploy Status](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-cypress/branches/main/latest-version/can-i-deploy/to-environment/production/badge)](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-cypress/branches/main/latest-version/can-i-deploy/to-environment/production/badge)
+[![Can I Deploy Status](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-cypress/branches/main/latest-version/can-i-deploy/to-environment/production/badge)](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-cypress/branches/main/latest-version/can-i-deploy/to-environment/production/badge)
 
 - [Example NodeJS/React Consumer - Cypress (BYO Adapter)](#example-nodejsreact-consumer---cypress-byo-adapter)
   - [Overview of Example](#overview-of-example)
     - [Key points with Cypress](#key-points-with-cypress)
   - [Overview of Part of Bi-Directional Contract Testing Flow](#overview-of-part-of-bi-directional-contract-testing-flow)
-  - [Compatibile with Providers](#compatibile-with-providers)
+  - [Compatible with Providers](#compatibile-with-providers)
   - [Pre-requisites](#pre-requisites)
     - [Environment variables](#environment-variables)
   - [Usage](#usage)
@@ -35,7 +35,7 @@ See the full [PactFlow Bi-Directional Workshop](https://docs.pactflow.io/docs/wo
 
 It:
 
-- It a React app implementing a "Product" website created with Create React App
+- It is 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](https://www.npmjs.com/package/@pactflow/pact-cypress-adapter) to transform cypress mocks into Pact consumer contracts.
 
@@ -63,7 +63,7 @@ When you run the CI pipeline (see below for doing this), the pipeline should per
 
 ![Consumer Pipeline](docs./../docs/consumer-pipeline.png 'Consumer Pipeline')
 
-## Compatibile with Providers
+## Compatible with Providers
 
 <!-- Provider Compatability -->
 
@@ -81,7 +81,7 @@ See [Environment variables](#environment-variables) on how to set these up.
 **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](https://docs.pactflow.io/docs/getting-started/#configuring-your-api-token)
+- A pactflow.io account with a valid [API token](https://docs.pactflow.io/docs/getting-started/#configuring-your-api-token)
 
 ### Environment variables
 
@@ -102,7 +102,7 @@ Set `PACT_PROVIDER` to one of the following
 
 ### 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.
+NOTE: Cypress tests are located in `./cypress/e2e`. See below for how to start cypress test, generate a consumer contract, and publish the contract to pactflow.
 
 - `make install` - install project dependencies
 
@@ -121,7 +121,7 @@ or run the whole lot in one go
 
 Installing alternate pact CLI tools.
 
-If you don't have docker, you can use one of the ruby tools. The standalone, doesn't require that you install Ruby on your host machine.
+If you don't have docker, you can use one of the ruby tools. The standalone doesn't require that you install Ruby on your host machine.
 
 - `make install-pact-ruby-cli` - installs the pact ruby CLI tool
 - `make install-pact-ruby-standalone` - installs the pact standalone CLI depending on your platform
@@ -136,14 +136,14 @@ Using alternate pact CLI tools.
 _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.
+- Define your pact provider and consumer name at `cypress.config.cjs` 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 has been configured to run on Unix/Windows and MacOS based systems, and tested against Github Actions
+The Makefile has been configured to run on Unix/Windows and MacOS-based systems, and tested against GitHub Actions
 
 They can be run locally on Unix/Windows and MacOS, or on Windows via [WSL2](https://docs.microsoft.com/en-us/windows/wsl/install) or a shell with bash.
 
@@ -162,4 +162,4 @@ They can be run locally on Unix/Windows and MacOS, or on Windows via [WSL2](http
 
 ## Found an issue?
 
-Reach out via a GitHub Issue, or reach us over in the [Pact foundation Slack](https://slack.pact.io)
+Reach out via a GitHub Issue, or reach us over in the [Pact Foundation Slack](https://slack.pact.io)

cypress.config.cjs

@@ -0,0 +1,18 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  env: {
+    headersBlocklist: ["ignore-me-globally"],
+    ignoreDefaultBlocklist: false,
+  },
+
+  retries: 3,
+
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require("./cypress/plugins/index.js")(on, config);
+    },
+  },
+});

cypress/integration/productByQuery.spec.js → cypress/e2e/productByQuery.cy.js

@@ -20,7 +20,7 @@ describe('products page with query', () => {
     cy.visit('http://localhost:3000/products?id=2')
   })
 
-  it.only('displays product item by query', () => {
+  it('displays product item by query', () => {
     cy.usePactWait('getProductById')
     cy.get('.product-item').its('length').should('eq', 3)
   })