diff --git a/cypress.config.ts b/cypress.config.ts index f142bee6..193d181b 100644 --- a/cypress.config.ts +++ b/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 + }); + } + } }); diff --git a/cypress/e2e/pact.spec.cy.tsx b/cypress/e2e/pact.spec.cy.tsx new file mode 100644 index 00000000..209b92b8 --- /dev/null +++ b/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 {}; diff --git a/cypress/fixtures/categories_example.json b/cypress/fixtures/categories_example.json new file mode 100644 index 00000000..deb3eb9a --- /dev/null +++ b/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 + } +] diff --git a/cypress/pacts/answer-king-api-answer-king-ui.json b/cypress/pacts/answer-king-api-answer-king-ui.json new file mode 100644 index 00000000..235b6b35 --- /dev/null +++ b/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"}}} \ No newline at end of file diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 00000000..ca4d256f --- /dev/null +++ b/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) => { ... }) diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 95857aea..0a049cf1 100644 --- a/cypress/support/commands.ts +++ b/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 {} diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts new file mode 100644 index 00000000..b01fedae --- /dev/null +++ b/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') diff --git a/package-lock.json b/package-lock.json index ba2054ba..af4561c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,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", @@ -1792,6 +1793,23 @@ "node": ">= 8" } }, + "node_modules/@pactflow/pact-cypress-adapter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pactflow/pact-cypress-adapter/-/pact-cypress-adapter-1.3.0.tgz", + "integrity": "sha512-N+IvoMBFTekR46lEHv5eakdLCyyBZdbF44XQvSrQnCO+F0j9pifuBB0x7cC6i+6cQU3s5o71hAVxeJ/7rOJNkQ==", + "dev": true, + "dependencies": { + "@types/lodash": "^4.14.178", + "@types/node": "^17.0.21", + "lodash": "^4.17.21" + } + }, + "node_modules/@pactflow/pact-cypress-adapter/node_modules/@types/node": { + "version": "17.0.45", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", + "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", + "dev": true + }, "node_modules/@remix-run/router": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", @@ -2096,6 +2114,12 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", + "dev": true + }, "node_modules/@types/node": { "version": "18.11.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz", @@ -10976,6 +11000,25 @@ "fastq": "^1.6.0" } }, + "@pactflow/pact-cypress-adapter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pactflow/pact-cypress-adapter/-/pact-cypress-adapter-1.3.0.tgz", + "integrity": "sha512-N+IvoMBFTekR46lEHv5eakdLCyyBZdbF44XQvSrQnCO+F0j9pifuBB0x7cC6i+6cQU3s5o71hAVxeJ/7rOJNkQ==", + "dev": true, + "requires": { + "@types/lodash": "^4.14.178", + "@types/node": "^17.0.21", + "lodash": "^4.17.21" + }, + "dependencies": { + "@types/node": { + "version": "17.0.45", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", + "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", + "dev": true + } + } + }, "@remix-run/router": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", @@ -11244,6 +11287,12 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", + "dev": true + }, "@types/node": { "version": "18.11.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz", diff --git a/package.json b/package.json index 2913f379..b669fe98 100644 --- a/package.json +++ b/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", diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index e61ecb45..9368652a 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -28,7 +28,7 @@ export const HomePage = (): ReactElement => { nswer to

your cravings - diff --git a/tsconfig.json b/tsconfig.json index 69dc8d6e..26f35577 100644 --- a/tsconfig.json +++ b/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"] }