diff --git a/.github/workflows/frontend_pr_checks.yml b/.github/workflows/frontend_pr_checks.yml
index 5e15009ff1..e7ce3a7cec 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,10 @@ 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
+ component: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c93fa8e16e..b86e8bc4ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@ The types of changes are:
* 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)
* Edit a system through the UI [#1096](https://github.com/ethyca/fides/pull/1096)
-
+* Cypress component testing [#1106](https://github.com/ethyca/fides/pull/1106)
### Changed
* Changed behavior of `load_default_taxonomy` to append instead of upsert [#1040](https://github.com/ethyca/fides/pull/1040)
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/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",
+ ]);
+ });
+});
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/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"],
};
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"
+ ]
}