POC - Consumer Testing with Cypress-Pact

cypress.config.ts

@@ -1,9 +1,29 @@
-import { defineConfig } from 'cypress';
+import {defineConfig} from 'cypress';
+import * as fs from 'fs';
+
 export default defineConfig({
   component: {
     devServer: {
       framework: 'react',
       bundler: 'vite',
     },
+    env: {
+      headersBlocklist: [
+        'access-control-allow-origin',
+        'access-control-allow-credentials',
+      ],
+      ignoreDefaultBlocklist: true,
+    },
   },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      on('task', {
+        readFile(filename) {
+          console.log(filename);
+          return fs.readFileSync(filename, 'utf8')
+        }, // implement node event listeners here
+      });
+    }
+  }
 });

cypress/e2e/pact.spec.cy.tsx

@@ -0,0 +1,21 @@
+import '@pactflow/pact-cypress-adapter';
+import fs from 'fs';
+
+context('this does something', () => {
+  before(() => {
+    cy.visit('http://localhost:5144');
+  });
+
+  it('should create a contract upon utilizing an API mock', () => {
+
+    cy.setupPact('answer-king-ui', 'answer-king-api');
+    cy.intercept('GET', '**/api/categories', { fixture: 'categories_example.json' }).as('categories');
+    cy.get('[data-testid=order]').click();
+  });
+
+  after(() => {
+    cy.usePactWait(['categories']);
+  });
+});
+
+export {};

cypress/fixtures/categories_example.json

@@ -0,0 +1,24 @@
+[
+  {
+    "id": 1,
+    "name": "Seafood",
+    "description": "Food from the oceans",
+    "createdOn": "2023-01-05T16:53:22.859+00:00",
+    "lastUpdated": "2023-01-06T06:53:22.859+00:00",
+    "products": [
+      1
+    ],
+    "retired": false
+  },
+  {
+    "id": 2,
+    "name": "Sundries",
+    "description": "Things that go with things.",
+    "createdOn": "2023-01-04T16:53:22.867+00:00",
+    "lastUpdated": "2023-01-05T10:53:22.867+00:00",
+    "products": [
+      2
+    ],
+    "retired": false
+  }
+]

cypress/pacts/answer-king-api-answer-king-ui.json

@@ -0,0 +1 @@
+{"consumer":{"name":"answer-king-ui"},"provider":{"name":"answer-king-api"},"interactions":[{"description":"","providerState":"","request":{"method":"GET","path":"/api/categories","headers":{"host":"localhost:5173","proxy-connection":"keep-alive","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Cypress/6.3.0 Chrome/87.0.4280.141 Electron/11.2.0 Safari/537.36","content-type":"application/json","accept":"*/*","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"http://localhost:5173/menu","accept-encoding":"gzip, deflate, br","accept-language":"en-US"},"body":"","query":""},"response":{"status":200,"headers":{"content-type":"application/json"},"body":[{"id":1,"name":"Seafood","description":"Food from the oceans","createdOn":"2023-01-05T16:53:22.859+00:00","lastUpdated":"2023-01-06T06:53:22.859+00:00","products":[1],"retired":false},{"id":2,"name":"Sundries","description":"Things that go with things.","createdOn":"2023-01-04T16:53:22.867+00:00","lastUpdated":"2023-01-05T10:53:22.867+00:00","products":[2],"retired":false}]}},{"description":"should create a contract upon utilizing an API mock","providerState":"","request":{"method":"GET","path":"/api/categories","headers":{"accept":"*/*","content-type":"application/json"},"body":"","query":""},"response":{"status":200,"headers":{"content-type":"application/json","access-control-allow-origin":"*"},"body":[{"id":1,"name":"Seafood","description":"Food from the oceans","createdOn":"2023-01-05T16:53:22.859+00:00","lastUpdated":"2023-01-06T06:53:22.859+00:00","products":[1],"retired":false},{"id":2,"name":"Sundries","description":"Things that go with things.","createdOn":"2023-01-04T16:53:22.867+00:00","lastUpdated":"2023-01-05T10:53:22.867+00:00","products":[2],"retired":false}]}}],"metadata":{"pactSpecification":{"version":"2.0.0"},"client":{"name":"pact-cypress-adapter","version":"1.3.0"}}}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/commands.ts

@@ -19,7 +19,7 @@
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => {  })
 //
 //
 // -- This will overwrite an existing command --
@@ -35,3 +35,4 @@
 //     }
 //   }
 // }
+export {}

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+// Import commands.js using ES2015 syntax:
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import './commands';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -34,6 +34,7 @@
     "tailwindcss": "^3.2.4"
   },
   "devDependencies": {
+    "@pactflow/pact-cypress-adapter": "^1.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

src/pages/Home/Home.tsx

@@ -28,7 +28,7 @@ export const HomePage = (): ReactElement => {
               <span className="font-poppins not-italic">nswer</span> to <br></br> your cravings
             </h3>
           </div>
-          <Button onClick={handleClick} size="large" colour="yellow">
+          <Button onClick={handleClick} size="large" colour="yellow" data-testid="order">
             Order Now
           </Button>
         </div>

tsconfig.json

@@ -17,7 +17,7 @@
     "jsx": "react-jsx",
     "rootDir": "src",
     "baseUrl": "src",
-    "types": ["node", "jest", "@testing-library/jest-dom"]
+    "types": ["node", "jest", "@testing-library/jest-dom", "cypress"]
   },
   "include": ["./src"]
 }