Add cypress tests

ethyca · Dec 12, 2024 · faef9cb · faef9cb
1 parent b285f14
commit faef9cb
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 32 deletions.
diff --git a/clients/admin-ui/cypress/e2e/taxonomy.cy.ts b/clients/admin-ui/cypress/e2e/taxonomy.cy.ts
@@ -1,5 +1,7 @@
 import { stubTaxonomyEntities } from "cypress/support/stubs";
 
+const dataCategoriesFixture = require("../fixtures/taxonomy/data_categories.json");
+
 describe("Taxonomy management page", () => {
   beforeEach(() => {
     cy.login();
@@ -17,7 +19,7 @@ describe("Taxonomy management page", () => {
       cy.visit("/taxonomy");
     });
 
-    it.only("Can switch between different taxonomies and load data", () => {
+    it("Can switch between different taxonomies and load data", () => {
       // data uses
       cy.getByTestId("taxonomy-type-selector").selectAntMenuOption("Data uses");
       cy.wait("@getDataUses");
@@ -36,10 +38,30 @@ describe("Taxonomy management page", () => {
     });
 
     it("Renders all active label from the taxonomy", () => {
-      cy.getByTestId("taxonomy-tree");
+      console.log("dataCategoriesFixture", dataCategoriesFixture);
+
+      cy.getByTestId("taxonomy-interactive-tree").within(() => {
+        dataCategoriesFixture
+          .filter((c) => c.active)
+          .forEach((category) => {
+            cy.getByTestId(`taxonomy-node-${category.fides_key}`).should(
+              "exist",
+            );
+          });
+      });
     });
 
-    it("Doesn't render inactive labels", () => {});
+    it("Doesn't render inactive labels", () => {
+      cy.getByTestId("taxonomy-interactive-tree").within(() => {
+        dataCategoriesFixture
+          .filter((c) => !c.active)
+          .forEach((category) => {
+            cy.getByTestId(`taxonomy-node-${category.fides_key}`).should(
+              "not.exist",
+            );
+          });
+      });
+    });
   });
 
   describe("Can edit data", () => {
@@ -67,11 +89,54 @@ describe("Taxonomy management page", () => {
       );
     });
 
-    it("Open edit drawer when clicking on a taxonomy item", () => {});
+    it("Open edit drawer when clicking on a taxonomy item", () => {
+      cy.getByTestId(`taxonomy-node-user.content`).click();
+      cy.getByTestId("edit-drawer-content").should("be.visible");
+    });
+
+    it("Edit drawer displays details", () => {
+      cy.getByTestId(`taxonomy-node-user.content`).click();
+      cy.getByTestId("edit-drawer-content").within(() => {
+        cy.contains("header", "User Content");
+        cy.getByTestId("edit-drawer-fides-key").should(
+          "contain",
+          "user.content",
+        );
+        cy.getByTestId("edit-taxonomy-form_name");
+        cy.getByTestId("edit-taxonomy-form_description").should(
+          "have.value",
+          "Content related to, or created by the subject.",
+        );
+      });
+    });
 
-    it("Edit drawer displays details", () => {});
+    it.only("Can edit taxonomy item", () => {
+      const taxonomyiesTestData = [
+        {
+          menuItemName: "Data categories",
+        },
+        {
+          menuItemName: "Data subjects",
+        },
+        {
+          menuItemName: "Data categories",
+        },
+      ];
 
-    it("Can edit taxonomy item", () => {});
+      cy.getByTestId(`taxonomy-node-user.content`).click();
+      cy.getByTestId("edit-drawer-content").within(() => {
+        cy.getByTestId("edit-taxonomy-form_name").clear().type("New name");
+        cy.getByTestId("edit-taxonomy-form_description")
+          .clear()
+          .type("New description");
+        cy.getByTestId("save-btn").click();
+      });
+      cy.wait("@putDataCategory").then((interception) => {
+        const { body } = interception.request;
+        expect(body.name).to.eql("New name");
+        expect(body.description).to.eql("New description");
+      });
+    });
 
     it("Can open an edit form for each taxonomy entity", () => {
       const expectedTabValues = [

diff --git a/clients/admin-ui/cypress/fixtures/taxonomy/data_categories.json b/clients/admin-ui/cypress/fixtures/taxonomy/data_categories.json
@@ -868,7 +868,7 @@
     "name": "Cookie ID",
     "description": "Cookie unique identification number.",
     "parent_key": "user.device",
-    "active": true
+    "active": false
   },
   {
     "version_added": "2.0.0",

diff --git a/clients/admin-ui/src/features/taxonomy/components/TaxonomyEditDrawer.tsx b/clients/admin-ui/src/features/taxonomy/components/TaxonomyEditDrawer.tsx
@@ -145,7 +145,12 @@ const TaxonomyEditDrawer = ({
               Fides key:
             </span>
             <AntTooltip title={taxonomyItem?.fides_key} trigger="click">
-              <span className="flex-1 truncate">{taxonomyItem?.fides_key}</span>
+              <span
+                className="flex-1 truncate"
+                data-testid="edit-drawer-fides-key"
+              >
+                {taxonomyItem?.fides_key}
+              </span>
             </AntTooltip>
           </div>
           {/* <div className="flex">

diff --git a/clients/admin-ui/src/features/taxonomy/components/TaxonomyEditForm.tsx b/clients/admin-ui/src/features/taxonomy/components/TaxonomyEditForm.tsx
@@ -45,10 +45,13 @@ const TaxonomyEditForm = ({
       form={form}
     >
       <AntForm.Item<string> label="Name" name="name">
-        <AntInput />
+        <AntInput data-testid="edit-taxonomy-form_name" />
       </AntForm.Item>
       <AntForm.Item<string> label="Description" name="description">
-        <AntInput.TextArea rows={4} />
+        <AntInput.TextArea
+          rows={4}
+          data-testid="edit-taxonomy-form_description"
+        />
       </AntForm.Item>
 
       {isDataSubjectType && <DataSubjectSpecialFields />}

diff --git a/clients/admin-ui/src/features/taxonomy/components/TaxonomyInteractiveTree.tsx b/clients/admin-ui/src/features/taxonomy/components/TaxonomyInteractiveTree.tsx
@@ -175,6 +175,7 @@ const TaxonomyInteractiveTree = ({
     <div
       className="size-full"
       style={{ backgroundColor: palette.FIDESUI_BG_CORINTH }}
+      data-testid="taxonomy-interactive-tree"
     >
       <TaxonomyTreeHoverProvider>
         <ReactFlow

diff --git a/clients/admin-ui/src/features/taxonomy/components/TaxonomyTreeNode.tsx b/clients/admin-ui/src/features/taxonomy/components/TaxonomyTreeNode.tsx
@@ -59,6 +59,7 @@ const TaxonomyTreeNode = ({ data }: NodeProps<TaxonomyTreeNodeType>) => {
       className="group relative"
       onMouseEnter={() => onMouseEnter(taxonomyItem?.fides_key!)}
       onMouseLeave={() => onMouseLeave(taxonomyItem?.fides_key!)}
+      data-testid={`taxonomy-node-${taxonomyItem?.fides_key}`}
     >
       <AntButton
         className={`${styles.button} ${getNodeHoverStatusClass()}`}

diff --git a/clients/fidesui/src/hoc/CustomMenu.tsx b/clients/fidesui/src/hoc/CustomMenu.tsx