From 4dbbd07d7b3e86d7b15fbb5038c77dc2fa479928 Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 21 Sep 2022 13:20:29 -0400 Subject: [PATCH 1/6] Configure cypress component testing --- clients/ctl/admin-ui/cypress.config.ts | 9 ++++ .../cypress/support/component-index.html | 14 ++++++ .../ctl/admin-ui/cypress/support/component.ts | 48 +++++++++++++++++++ clients/ctl/admin-ui/cypress/tsconfig.json | 9 +++- clients/ctl/admin-ui/tsconfig.json | 7 ++- 5 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 clients/ctl/admin-ui/cypress/support/component-index.html create mode 100644 clients/ctl/admin-ui/cypress/support/component.ts diff --git a/clients/ctl/admin-ui/cypress.config.ts b/clients/ctl/admin-ui/cypress.config.ts index 5b7ac17b25..413b7a4e43 100644 --- a/clients/ctl/admin-ui/cypress.config.ts +++ b/clients/ctl/admin-ui/cypress.config.ts @@ -5,9 +5,18 @@ export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", }, + defaultCommandTimeout: 5000, + retries: { runMode: 3, openMode: 0, }, + + component: { + devServer: { + framework: "next", + bundler: "webpack", + }, + }, }); diff --git a/clients/ctl/admin-ui/cypress/support/component-index.html b/clients/ctl/admin-ui/cypress/support/component-index.html new file mode 100644 index 0000000000..3e16e9b07d --- /dev/null +++ b/clients/ctl/admin-ui/cypress/support/component-index.html @@ -0,0 +1,14 @@ + + + + + + + Components App + +
+ + +
+ + \ No newline at end of file diff --git a/clients/ctl/admin-ui/cypress/support/component.ts b/clients/ctl/admin-ui/cypress/support/component.ts new file mode 100644 index 0000000000..c383d4c035 --- /dev/null +++ b/clients/ctl/admin-ui/cypress/support/component.ts @@ -0,0 +1,48 @@ +// *********************************************************** +// This example support/component.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: +import "./commands"; +import "@fontsource/inter/400.css"; +import "@fontsource/inter/500.css"; +import "@fontsource/inter/700.css"; + +import { ChakraProvider } from "@chakra-ui/react"; +// Alternatively you can use CommonJS syntax: +// require('./commands') +// eslint-disable-next-line import/no-extraneous-dependencies +import { mount } from "cypress/react"; +import * as React from "react"; + +import theme from "../../src/theme"; + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a at the top of your spec. +declare global { + namespace Cypress { + interface Chainable { + mount: typeof mount; + } + } +} + +Cypress.Commands.add("mount", (jsx, options) => + mount(React.createElement(ChakraProvider, { theme }, jsx), options) +); + +// Example use: +// cy.mount() diff --git a/clients/ctl/admin-ui/cypress/tsconfig.json b/clients/ctl/admin-ui/cypress/tsconfig.json index 48c3e14e45..eb77404c58 100644 --- a/clients/ctl/admin-ui/cypress/tsconfig.json +++ b/clients/ctl/admin-ui/cypress/tsconfig.json @@ -1,8 +1,13 @@ { "compilerOptions": { + "jsx": "react", "target": "es5", "lib": ["es5", "dom"], - "types": ["cypress", "node"] + "types": ["cypress", "node"], + "baseUrl": "..", + "paths": { + "~/*": ["src/*"] + } }, - "include": ["**/*.ts", "../cypress.config.ts"] + "include": ["**/*.ts", "**/*.tsx", "../cypress.config.ts"] } diff --git a/clients/ctl/admin-ui/tsconfig.json b/clients/ctl/admin-ui/tsconfig.json index 12ceab3ded..560b0684b2 100644 --- a/clients/ctl/admin-ui/tsconfig.json +++ b/clients/ctl/admin-ui/tsconfig.json @@ -20,5 +20,10 @@ } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.d.ts"], - "exclude": ["node_modules", "cypress/**/*.ts", "cypress.config.ts"] + "exclude": [ + "node_modules", + "cypress/**/*.ts", + "cypress/**/*.tsx", + "cypress.config.ts" + ] } From d1bd18c38d29e501f84ccad529d211427661380f Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 21 Sep 2022 13:38:07 -0400 Subject: [PATCH 2/6] Add cypress component testing to CI --- .github/workflows/frontend_pr_checks.yml | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/.github/workflows/frontend_pr_checks.yml b/.github/workflows/frontend_pr_checks.yml index 5e15009ff1..40825b136f 100644 --- a/.github/workflows/frontend_pr_checks.yml +++ b/.github/workflows/frontend_pr_checks.yml @@ -58,7 +58,7 @@ jobs: cd clients/ctl/admin-ui npm install - - name: Cypress run + - name: Cypress E2E tests uses: cypress-io/github-action@v4 with: working-directory: clients/ctl/admin-ui @@ -66,3 +66,13 @@ jobs: start: npm run cy:start wait-on: "http://localhost:3000" wait-on-timeout: 120 + + - name: Cypress component tests + uses: cypress-io/github-action@v4 + with: + working-directory: clients/ctl/admin-ui + install: false + start: npm run cy:start + wait-on: "http://localhost:3000" + wait-on-timeout: 120 + component: true From 049553b11a43f4969037b00f06a809b43758706a Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 21 Sep 2022 13:42:56 -0400 Subject: [PATCH 3/6] Tell jest not to watch node modules --- clients/ctl/admin-ui/jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/clients/ctl/admin-ui/jest.config.js b/clients/ctl/admin-ui/jest.config.js index bb43a7d53c..515f0f6706 100644 --- a/clients/ctl/admin-ui/jest.config.js +++ b/clients/ctl/admin-ui/jest.config.js @@ -38,4 +38,5 @@ module.exports = { "/node_modules/", "^.+\\.module\\.(css|sass|scss)$", ], + watchPathIgnorePatterns: ["node_modules"], }; From bbb66bd4379e9623bd921db0e0076941ce9e0678 Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 21 Sep 2022 13:43:22 -0400 Subject: [PATCH 4/6] Add component test for DataCategoryInput --- .../components/DataCategoryInput.cy.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 clients/ctl/admin-ui/cypress/components/DataCategoryInput.cy.tsx diff --git a/clients/ctl/admin-ui/cypress/components/DataCategoryInput.cy.tsx b/clients/ctl/admin-ui/cypress/components/DataCategoryInput.cy.tsx new file mode 100644 index 0000000000..4429dfb5b6 --- /dev/null +++ b/clients/ctl/admin-ui/cypress/components/DataCategoryInput.cy.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; + +import DataCategoryInput from "~/features/dataset/DataCategoryInput"; +import { MOCK_DATA_CATEGORIES } from "~/mocks/data"; +import { DataCategory } from "~/types/api"; + +describe("DataCategoryInput", () => { + it("can check a category", () => { + const onCheckedSpy = cy.spy().as("onCheckedSpy"); + cy.mount( + + ); + + cy.getByTestId("selected-categories").should("contain", "user"); + cy.getByTestId("data-category-dropdown").click(); + cy.getByTestId("expand-System Data").click(); + cy.getByTestId("checkbox-Authentication Data").click(); + + cy.get("@onCheckedSpy").should("have.been.calledWith", [ + "user", + "system.authentication", + ]); + }); +}); From 89920ea4b59903e4398afe816a181a83805e804c Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 21 Sep 2022 15:03:44 -0400 Subject: [PATCH 5/6] Remove start command --- .github/workflows/frontend_pr_checks.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/frontend_pr_checks.yml b/.github/workflows/frontend_pr_checks.yml index 40825b136f..e7ce3a7cec 100644 --- a/.github/workflows/frontend_pr_checks.yml +++ b/.github/workflows/frontend_pr_checks.yml @@ -72,7 +72,4 @@ jobs: with: working-directory: clients/ctl/admin-ui install: false - start: npm run cy:start - wait-on: "http://localhost:3000" - wait-on-timeout: 120 component: true From 71f689eade50302ff2a02c6dab26c3639fc3818f Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 21 Sep 2022 15:24:36 -0400 Subject: [PATCH 6/6] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9225d7808d..86516ba09e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ The types of changes are: * Refactor config wizard system forms to be reused for system management [#1072](https://github.com/ethyca/fides/pull/1072) * Add additional optional fields to system management forms [#1082](https://github.com/ethyca/fides/pull/1082) * Delete a system through the UI [#1085](https://github.com/ethyca/fides/pull/1085) +* Cypress component testing [#1106](https://github.com/ethyca/fides/pull/1106) ### Changed