From 262caea8e6928b0fd661717b797f8a71c2fef227 Mon Sep 17 00:00:00 2001 From: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com> Date: Tue, 28 Mar 2023 12:59:33 +0200 Subject: [PATCH] working visual tests - percy 1st attempt (#3400) * working visual tests - percy 1st attempt --------- Co-authored-by: Karolina Rakoczy --- cypress.config.js | 8 +- cypress/e2e/percy/demo.js | 30 ++ cypress/elements/index.js | 5 +- cypress/elements/shared/index.js | 3 +- cypress/fixtures/bodyMocks/demo/home.json | 223 +++++++++ cypress/fixtures/bodyMocks/index.js | 3 + cypress/fixtures/index.js | 3 + cypress/fixtures/urlList.js | 1 + cypress/plugins/index.js | 4 + cypress/support/e2e.js | 33 +- package-lock.json | 531 +++++++++++++++++++++- package.json | 3 + 12 files changed, 829 insertions(+), 18 deletions(-) create mode 100644 cypress/e2e/percy/demo.js create mode 100644 cypress/fixtures/bodyMocks/demo/home.json create mode 100644 cypress/fixtures/bodyMocks/index.js create mode 100644 cypress/fixtures/index.js diff --git a/cypress.config.js b/cypress.config.js index d556aa5c9..1d2fb0c35 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -21,10 +21,16 @@ module.exports = defineConfig({ e2e: { env: { grepFilterSpecs: true, + demoTests: false, }, setupNodeEvents(on, config) { + config.specPattern = process.env.CYPRESS_demoTests + ? "cypress/e2e/percy/**/*.{js,jsx,ts,tsx}" + : "cypress/e2e/**/*.{js,jsx,ts,tsx}"; + config = require("./cypress/support/cypress-grep/plugin")(config); config = require("./cypress/plugins/index.js")(on, config); + on("after:spec", (spec, results) => { if (results && results.video) { return fs.unlink(results.video, function (err) { @@ -38,7 +44,5 @@ module.exports = defineConfig({ }); return config; }, - baseUrl: "http://localhost:4137/", - specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}", }, }); diff --git a/cypress/e2e/percy/demo.js b/cypress/e2e/percy/demo.js new file mode 100644 index 000000000..b734b102a --- /dev/null +++ b/cypress/e2e/percy/demo.js @@ -0,0 +1,30 @@ +/// +/// + +import { BUTTON_SELECTORS, HOMEPAGE_SELECTORS } from "../../elements"; +import { urlList } from "../../fixtures/urlList"; + +describe("Demo staging", () => { + it("should visual check login demo page", () => { + // { tags: ["@login", "@allEnv", "@stable", "@oldRelease"] }, + cy.visit(urlList.dashboard); + cy.get(BUTTON_SELECTORS.submit).should("be.visible"); + cy.percySnapshot("Demo login page"); + }); + it("should log in via UI and visual check home demo page", () => { + // { tags: ["@login", "@allEnv", "@stable", "@oldRelease"] }, + cy.loginUserViaRequest(); + cy.fixture("bodyMocks/demo/home").then(bodyMockHomePage => { + cy.addAliasToGraphRequestAndUseMockedResponseBody( + "Home", + bodyMockHomePage, + ); + cy.visit(urlList.dashboard) + .get(HOMEPAGE_SELECTORS.activity) + .should("be.visible"); + cy.get(HOMEPAGE_SELECTORS.topProducts).should("be.visible"); + cy.waitForRequestAndCheckIfNoErrors("@Home"); + cy.percySnapshot("Demo home page"); + }); + }); +}); diff --git a/cypress/elements/index.js b/cypress/elements/index.js index abb5c3907..8f7d0056a 100644 --- a/cypress/elements/index.js +++ b/cypress/elements/index.js @@ -19,6 +19,7 @@ import { CUSTOMERS_LIST_SELECTORS, } from "./customer/"; import { SALES_SELECTORS, VOUCHERS_SELECTORS } from "./discounts"; +import { HOMEPAGE_SELECTORS } from "./homePage/homePage-selectors"; import { PAGINATION } from "./navigation"; import { DRAFT_ORDERS_LIST_SELECTORS, ORDERS_SELECTORS } from "./orders"; import { PAGE_DETAILS_SELECTORS, PAGES_LIST_SELECTORS } from "./pages/"; @@ -35,7 +36,7 @@ import { PRODUCT_TYPE_DETAILS_SELECTORS, PRODUCT_TYPES_LIST_SELECTORS, } from "./productTypes"; -import { ADDRESS_SELECTORS, SHARED_ELEMENTS } from "./shared"; +import { ADDRESS_SELECTORS, BUTTON_SELECTORS, SHARED_ELEMENTS } from "./shared"; import { SHIPPING_ZONES_LIST_SELECTORS } from "./shipping"; import { INVITE_STAFF_MEMBER_FORM_SELECTORS, @@ -49,6 +50,7 @@ export { APPS_LIST_SELECTORS, ATTRIBUTES_DETAILS, ATTRIBUTES_LIST, + BUTTON_SELECTORS, CATEGORIES_LIST_SELECTORS, CATEGORY_DETAILS_SELECTORS, CHANNELS_SELECTORS, @@ -57,6 +59,7 @@ export { CUSTOMER_DETAILS_SELECTORS, CUSTOMERS_LIST_SELECTORS, DRAFT_ORDERS_LIST_SELECTORS, + HOMEPAGE_SELECTORS, INVITE_STAFF_MEMBER_FORM_SELECTORS, LANGUAGES_LIST_SELECTORS, LOGIN_SELECTORS, diff --git a/cypress/elements/shared/index.js b/cypress/elements/shared/index.js index 3546f49ba..5045deacf 100644 --- a/cypress/elements/shared/index.js +++ b/cypress/elements/shared/index.js @@ -1,4 +1,5 @@ import { ADDRESS_SELECTORS } from "./addressForm"; +import { BUTTON_SELECTORS } from "./button-selectors"; import { SHARED_ELEMENTS } from "./sharedElements"; -export { SHARED_ELEMENTS, ADDRESS_SELECTORS }; +export { ADDRESS_SELECTORS, BUTTON_SELECTORS, SHARED_ELEMENTS }; diff --git a/cypress/fixtures/bodyMocks/demo/home.json b/cypress/fixtures/bodyMocks/demo/home.json new file mode 100644 index 000000000..66a233709 --- /dev/null +++ b/cypress/fixtures/bodyMocks/demo/home.json @@ -0,0 +1,223 @@ +{ + "data": { + "salesToday": { + "gross": { + "amount": 190.0, + "currency": "PLN", + "__typename": "Money" + }, + "__typename": "TaxedMoney" + }, + "ordersToday": { + "totalCount": 310, + "__typename": "OrderCountableConnection" + }, + "ordersToFulfill": { + "totalCount": 2, + "__typename": "OrderCountableConnection" + }, + "ordersToCapture": { + "totalCount": 2, + "__typename": "OrderCountableConnection" + }, + "productsOutOfStock": { + "totalCount": 0, + "__typename": "ProductCountableConnection" + }, + "productTopToday": { + "edges": [], + "__typename": "ProductVariantCountableConnection" + }, + "activities": { + "edges": [ + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T21:52:58.137000+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5NzI=", + "message": null, + "orderNumber": "11591", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:02:28.234257+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5NzU=", + "message": null, + "orderNumber": "11592", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:03:10.694111+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5Nzg=", + "message": null, + "orderNumber": "11593", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:04:26.617028+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5ODE=", + "message": null, + "orderNumber": "11594", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:06:50.657651+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5ODQ=", + "message": null, + "orderNumber": "11595", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:07:26.956180+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5ODc=", + "message": null, + "orderNumber": "11596", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:08:41.140369+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5OTA=", + "message": null, + "orderNumber": "11597", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:14:18.581224+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5OTM=", + "message": null, + "orderNumber": "11598", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:16:33.599899+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5OTY=", + "message": null, + "orderNumber": "11599", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + }, + { + "node": { + "amount": null, + "composedId": null, + "date": "2023-03-22T22:17:37.483381+00:00", + "email": null, + "emailType": null, + "id": "T3JkZXJFdmVudDo5OTk=", + "message": null, + "orderNumber": "11600", + "oversoldItems": null, + "quantity": null, + "type": "PLACED", + "user": null, + "__typename": "OrderEvent" + }, + "__typename": "OrderEventCountableEdge" + } + ], + "__typename": "OrderEventCountableConnection" + } + }, + "extensions": { + "cost": { + "requestedQueryCost": 20, + "maximumAvailable": 50000 + } + } +} \ No newline at end of file diff --git a/cypress/fixtures/bodyMocks/index.js b/cypress/fixtures/bodyMocks/index.js new file mode 100644 index 000000000..8a100240b --- /dev/null +++ b/cypress/fixtures/bodyMocks/index.js @@ -0,0 +1,3 @@ +import { bodyMockHomePage } from "./demo/home"; + +export { bodyMockHomePage }; diff --git a/cypress/fixtures/index.js b/cypress/fixtures/index.js new file mode 100644 index 000000000..5d6dd3608 --- /dev/null +++ b/cypress/fixtures/index.js @@ -0,0 +1,3 @@ +import { bodyMockHomePage } from "./bodyMocks"; + +export { bodyMockHomePage }; diff --git a/cypress/fixtures/urlList.js b/cypress/fixtures/urlList.js index 54c3b3177..f5ae45b8c 100644 --- a/cypress/fixtures/urlList.js +++ b/cypress/fixtures/urlList.js @@ -1,5 +1,6 @@ export const urlList = { apiUri: Cypress.env("API_URI"), + dashboard: "dashboard/", addProduct: "products/add", apps: "custom-apps/", attributes: "attributes/", diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 20ca049f7..ceec0d3f0 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -37,6 +37,7 @@ module.exports = async (on, config) => { process.env.CYPRESS_PERMISSIONS_USERS_PASSWORD; config.env.mailHogUrl = process.env.CYPRESS_mailHogUrl; config.env.grepTags = process.env.CYPRESS_grepTags; + config.baseUrl = baseUrl(process.env.CYPRESS_demoTests); on("before:browser:launch", (_browser = {}, launchOptions) => { launchOptions.args.push("--proxy-bypass-list=<-loopback>"); @@ -46,6 +47,9 @@ module.exports = async (on, config) => { return config; }; +const baseUrl = isDemoTesting => + isDemoTesting ? process.env.CYPRESS_DEMO_URI : process.env.CYPRESS_baseUrl; + function getShopInfo(envVariables) { const createTokenMutation = graphql.gql`mutation tokenCreate($email: String!, $password: String!){ tokenCreate(email:$email, password:$password){ diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index e531ac845..bc3c5a394 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -14,13 +14,14 @@ import "./customCommands/sharedElementsOperations/selects.js"; import "./customCommands/sharedElementsOperations/tables"; import "./customCommands/softAssertions"; import "./customCommands/user"; +import "@percy/cypress"; import { commandTimings } from "cypress-timings"; -import cypressGrep from "../support/cypress-grep/support"; -commandTimings(); - import { urlList } from "../fixtures/urlList"; +import cypressGrep from "../support/cypress-grep/support"; + +commandTimings(); cypressGrep(); @@ -47,6 +48,32 @@ Cypress.Commands.add("addAliasToGraphRequest", operationName => { } }); }); +Cypress.Commands.add( + "addAliasToGraphRequestAndUseMockedResponseBody", + (operationName, bodyMock) => { + cy.intercept("POST", urlList.apiUri, req => { + req.statusCode = 200; + const requestBody = req.body; + if (Array.isArray(requestBody)) { + requestBody.forEach(element => { + if (element.operationName === operationName) { + req.alias = operationName; + req.reply({ + body: bodyMock, + }); + } + }); + } else { + if (requestBody.operationName === operationName) { + req.alias = operationName; + req.reply({ + body: bodyMock, + }); + } + } + }); + }, +); Cypress.on( "uncaught:exception", diff --git a/package-lock.json b/package-lock.json index a55fbbc16..9bb8c64de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -113,6 +113,8 @@ "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10", "@graphql-codegen/typescript-operations": "^2.2.4", "@graphql-codegen/typescript-react-apollo": "^3.2.5", + "@percy/cli": "^1.21.0", + "@percy/cypress": "^3.1.2", "@pollyjs/adapter-node-http": "~5.0.0", "@pollyjs/core": "~5.0.0", "@pollyjs/persister-fs": "~5.0.0", @@ -6236,6 +6238,487 @@ "node": ">=8.0" } }, + "node_modules/@percy/cli": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.21.0.tgz", + "integrity": "sha512-capaTXkj/L0Itn8VpDY/ePkHM9InaqwTRTK+IHGTA2HsRlpiNotunDAv8cNJ/fBMoRBh1Bki7tEWIp6zB+KmBQ==", + "dev": true, + "dependencies": { + "@percy/cli-app": "1.21.0", + "@percy/cli-build": "1.21.0", + "@percy/cli-command": "1.21.0", + "@percy/cli-config": "1.21.0", + "@percy/cli-exec": "1.21.0", + "@percy/cli-snapshot": "1.21.0", + "@percy/cli-upload": "1.21.0", + "@percy/client": "1.21.0", + "@percy/logger": "1.21.0" + }, + "bin": { + "percy": "bin/run.cjs" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-app": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.21.0.tgz", + "integrity": "sha512-kkYMTGEk33nsLIIKx57LzheK7WZK77Y52c+DAwnV1FDpzDvhpP4eLEpXwarTIapN76O4wZndFlX4zm07U9Cvfw==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.21.0", + "@percy/cli-exec": "1.21.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-build": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.21.0.tgz", + "integrity": "sha512-LRvGsTl6bw6zNMOQ36emjdIdkvCEUAbRRp2nryBODMpJ8YUd1NcXw/qLVM2bzpJcTmeBXR76Yjgi1VhFZrNZlg==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.21.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-command": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.21.0.tgz", + "integrity": "sha512-ZfjDMgUQRQonJT106Y89NVDzVd2qDmwQ+4oC0AyGgE5h1cHAEaPoYV8LnMvpjbvFYni+jbeZvHNANMP7Ut2yOQ==", + "dev": true, + "dependencies": { + "@percy/config": "1.21.0", + "@percy/core": "1.21.0", + "@percy/logger": "1.21.0" + }, + "bin": { + "percy-cli-readme": "bin/readme.js" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-config": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.21.0.tgz", + "integrity": "sha512-7Wn3L/XkKhVWixH4/oPJV66jD6LBCma6pT/bzbKuV5Hlpscel2xz3p8JSDOvxQJl1eSRtjwhI1HP/0OT6EX5dg==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.21.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-exec": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.21.0.tgz", + "integrity": "sha512-Uwqw1WqXzYXk4WQLyRWkQJ4Tdm7/bUOOa2HJU/J5kGLDmoSRNX/TesobFy8ii55mB0QV2hkZnMkAFPwzfxaCSw==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.21.0", + "cross-spawn": "^7.0.3", + "which": "^2.0.2" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-exec/node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@percy/cli-exec/node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@percy/cli-exec/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@percy/cli-exec/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@percy/cli-exec/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@percy/cli-snapshot": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.21.0.tgz", + "integrity": "sha512-DR0yPRCCRFGXrDwfAmC/26yF4CGMTAWNgIKFgeQcPGgjkdXOSmm04fhU36QBU5S66B2gmSjEG0mfh+2oOD68EQ==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.21.0", + "yaml": "^2.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-snapshot/node_modules/yaml": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz", + "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@percy/cli-upload": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.21.0.tgz", + "integrity": "sha512-NDh6NiirUgdnrNergiwtQceA0TjcT5vK6dzuE6pscwksvb9vzx+tvvbBcVBhpEQt+FmIoYDdqb8FVzMqxd5wEg==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.21.0", + "fast-glob": "^3.2.11", + "image-size": "^1.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/client": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.21.0.tgz", + "integrity": "sha512-IKFcMYcibWQjisjmS4K9HK7TbjPK4fnVeh/3Uq7Da0ejiu5qBvLn49aNcYfnrguPqaUcgIvLvpcgtHeH+srv/g==", + "dev": true, + "dependencies": { + "@percy/env": "1.21.0", + "@percy/logger": "1.21.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/config": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.21.0.tgz", + "integrity": "sha512-s6XFBhjP0fGVg8onapDwebGNIdwMgdidZW5q0HziBiQVqfwh/83NkDlCq+c6/JU5P0Y5DArxCIFDVUfiLkcs4A==", + "dev": true, + "dependencies": { + "@percy/logger": "1.21.0", + "ajv": "^8.6.2", + "cosmiconfig": "^7.0.0", + "yaml": "^2.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/config/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@percy/config/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@percy/config/node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/@percy/config/node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@percy/config/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/@percy/config/node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@percy/config/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@percy/config/node_modules/yaml": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz", + "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@percy/core": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.21.0.tgz", + "integrity": "sha512-YFBTiRghq1m9t0/4ZUFWgS8LJ4DYugcMDoZ04yKWsIjRDcALwHAZahYpBZRcHkmfqB/kqLB5IYoyc6rel+PNeA==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@percy/client": "1.21.0", + "@percy/config": "1.21.0", + "@percy/dom": "1.21.0", + "@percy/logger": "1.21.0", + "content-disposition": "^0.5.4", + "cross-spawn": "^7.0.3", + "extract-zip": "^2.0.1", + "fast-glob": "^3.2.11", + "micromatch": "^4.0.4", + "mime-types": "^2.1.34", + "path-to-regexp": "^6.2.0", + "rimraf": "^3.0.2", + "ws": "^8.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/core/node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dev": true, + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@percy/core/node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@percy/core/node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@percy/core/node_modules/path-to-regexp": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", + "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==", + "dev": true + }, + "node_modules/@percy/core/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@percy/core/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@percy/core/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@percy/core/node_modules/ws": { + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", + "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", + "dev": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/@percy/cypress": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@percy/cypress/-/cypress-3.1.2.tgz", + "integrity": "sha512-JXrGDZbqwkzQd2h5T5D7PvqoucNaiMh4ChPp8cLQiEtRuLHta9nf1lEuXH+jnatGL2j+3jJFIHJ0L7XrgVnvQA==", + "dev": true, + "dependencies": { + "@percy/sdk-utils": "^1.3.1" + }, + "peerDependencies": { + "cypress": ">=3" + } + }, + "node_modules/@percy/dom": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.21.0.tgz", + "integrity": "sha512-OKpS9EPnUrMx3Mu9L7QiqEtc+yAUz3gbXrbRlrPAljyRAmmBe9p5vy0hKtP8wO1vxjumqmtxNABpz5bc70CJ2Q==", + "dev": true + }, + "node_modules/@percy/env": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.21.0.tgz", + "integrity": "sha512-rqbACxivUTkpAJnjk/7IosFdh2vdz1SVGV0KXFf2xtEuUb7YhYrYixhf/6xE81o93C+pxrlXYWkgUSaMhZpP5A==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/logger": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.21.0.tgz", + "integrity": "sha512-qKKSFP25X+a50vpjUSolI8WSQ2YAunS6K4brdTRemgvc48Wlkv3541SP8iMK5BAy3Nn4u0KRiwkstvyRr1tXlA==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/sdk-utils": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.21.0.tgz", + "integrity": "sha512-ZI6QbIhMZvE3P73ar7aeXcjSk8/czlS7h55QBynoJNorwimq5xed1CGPHu00uQsCO6dXeEKTfxQcqbCypRE6Hw==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@pollyjs/adapter": { "version": "5.0.0", "dev": true, @@ -12549,8 +13032,8 @@ }, "node_modules/buffer-crc32": { "version": "0.2.13", + "devOptional": true, "license": "MIT", - "optional": true, "engines": { "node": "*" } @@ -17752,8 +18235,8 @@ }, "node_modules/extract-zip": { "version": "2.0.1", + "devOptional": true, "license": "BSD-2-Clause", - "optional": true, "dependencies": { "debug": "^4.1.1", "get-stream": "^5.1.0", @@ -17880,8 +18363,8 @@ }, "node_modules/fd-slicer": { "version": "1.1.0", + "devOptional": true, "license": "MIT", - "optional": true, "dependencies": { "pend": "~1.2.0" } @@ -19990,6 +20473,21 @@ "minimatch": "^3.0.4" } }, + "node_modules/image-size": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz", + "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==", + "dev": true, + "dependencies": { + "queue": "6.0.2" + }, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/immer": { "version": "1.10.0", "license": "MIT", @@ -25228,19 +25726,21 @@ } }, "node_modules/mime-db": { - "version": "1.40.0", + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", "devOptional": true, - "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/mime-types": { - "version": "2.1.24", + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", "devOptional": true, - "license": "MIT", "dependencies": { - "mime-db": "1.40.0" + "mime-db": "1.52.0" }, "engines": { "node": ">= 0.6" @@ -27337,8 +27837,8 @@ }, "node_modules/pend": { "version": "1.2.0", - "license": "MIT", - "optional": true + "devOptional": true, + "license": "MIT" }, "node_modules/performance-now": { "version": "2.1.0", @@ -28088,6 +28588,15 @@ "devOptional": true, "license": "MIT" }, + "node_modules/queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dev": true, + "dependencies": { + "inherits": "~2.0.3" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "funding": [ @@ -36403,8 +36912,8 @@ }, "node_modules/yauzl": { "version": "2.10.0", + "devOptional": true, "license": "MIT", - "optional": true, "dependencies": { "buffer-crc32": "~0.2.3", "fd-slicer": "~1.1.0" diff --git a/package.json b/package.json index 63321a759..ef3c58a9e 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,8 @@ "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10", "@graphql-codegen/typescript-operations": "^2.2.4", "@graphql-codegen/typescript-react-apollo": "^3.2.5", + "@percy/cli": "^1.21.0", + "@percy/cypress": "^3.1.2", "@pollyjs/adapter-node-http": "~5.0.0", "@pollyjs/core": "~5.0.0", "@pollyjs/persister-fs": "~5.0.0", @@ -301,6 +303,7 @@ "cy:run:critical:parallel": "cypress run --record --env grepTags=@critical --parallel --tag Critical", "cy:run:allEnv:parallel": "cypress run --record --env grepTags=@allEnv --parallel", "cy:run:stable:parallel": "cypress run --record --env grepTags=@critical --parallel --tag Stable", + "cy:percy": "CYPRESS_demoTests=true percy exec -- npm run cy:run", "test": "jest src/", "test:watch": "jest --watch src/", "lint": "eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix",