Fix vendor tests (#4363)

ethyca · Oct 31, 2023 · 1a8f26b · 1a8f26b
1 parent a0e6f6d
commit 1a8f26b
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 42 deletions.
diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
@@ -36,15 +36,19 @@ describe("System management with Plus features", () => {
       cy.getSelectValueContainer("input-vendor_id");
     });
 
-    it("contains dictionary entries", () => {
-      cy.selectOption("input-vendor_id", "Aniview LTD");
+    it("contains type ahead dictionary entries", () => {
+      cy.getSelectValueContainer("input-vendor_id").type("A");
+      cy.get("#react-select-select-vendor_id-option-0").contains("Aniview LTD");
+      cy.get("#react-select-select-vendor_id-option-1").contains(
+        "Anzu Virtual Reality LTD"
+      );
     });
 
     it("can switch entries", () => {
-      cy.selectOption("input-vendor_id", "Aniview LTD");
+      cy.getSelectValueContainer("input-vendor_id").type("Aniview{enter}");
       cy.getSelectValueContainer("input-vendor_id").contains("Aniview LTD");
 
-      cy.selectOption("input-vendor_id", "Anzu Virtual Reality LTD");
+      cy.getSelectValueContainer("input-vendor_id").type("Anzu{enter}");
       cy.getSelectValueContainer("input-vendor_id").contains(
         "Anzu Virtual Reality LTD"
       );
@@ -55,7 +59,7 @@ describe("System management with Plus features", () => {
     // modal to pop up incorrectly when switching tabs
     it("can switch between tabs after populating from dictionary", () => {
       cy.wait("@getSystems");
-      cy.selectOption("input-vendor_id", "Anzu Virtual Reality LTD");
+      cy.getSelectValueContainer("input-vendor_id").type("Anzu{enter}");
       cy.getByTestId("dict-suggestions-btn").click();
       cy.getByTestId("toggle-dict-suggestions").click();
       // the form fetches the system again after saving, so update the intercept with dictionary values
@@ -67,6 +71,7 @@ describe("System management with Plus features", () => {
               body: {
                 ...origSystem,
                 ...dictSystem,
+                fides_key: origSystem.fides_key,
                 customFieldValues: undefined,
                 data_protection_impact_assessment: undefined,
               },
@@ -83,7 +88,6 @@ describe("System management with Plus features", () => {
       cy.getByTestId("input-dpo").should("have.value", "[email protected]");
       cy.getByTestId("tab-Data uses").click();
       cy.getByTestId("tab-System information").click();
-      // cy.pause();
       cy.getByTestId("tab-Data uses").click();
       cy.getByTestId("confirmation-modal").should("not.exist");
     });

diff --git a/clients/admin-ui/cypress/fixtures/plus_health.json b/clients/admin-ui/cypress/fixtures/plus_health.json
@@ -10,5 +10,8 @@
     "enabled": true,
     "service_health": null,
     "service_error": null
-  }
+  },
+  "fidesplus_version": "2.2.0",
+  "fides_cloud": { "enabled": true },
+  "tcf": { "enabled": true }
 }
diff --git a/clients/admin-ui/cypress/fixtures/systems/system.json b/clients/admin-ui/cypress/fixtures/systems/system.json
@@ -24,7 +24,8 @@
       "special_category_legal_basis": "Explicit Consent",
       "data_shared_with_third_parties": false,
       "third_parties": [],
-      "shared_categories": []
+      "shared_categories": [],
+      "id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
     }
   ],
   "processes_personal_data": true,

diff --git a/clients/admin-ui/cypress/fixtures/systems/systems_with_data_uses.json b/clients/admin-ui/cypress/fixtures/systems/systems_with_data_uses.json
@@ -73,7 +73,8 @@
         "data_subjects": ["customer"],
         "dataset_references": ["demo_users_dataset"],
         "egress": null,
-        "ingress": null
+        "ingress": null,
+        "id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
       }
     ],
     "joint_controller": null,
@@ -113,7 +114,8 @@
         "data_subjects": ["customer"],
         "dataset_references": null,
         "egress": null,
-        "ingress": null
+        "ingress": null,
+        "id": "pri_06430a1c-1365-422e-90a7-d444ddb32181"
       }
     ],
     "joint_controller": null,

diff --git a/clients/admin-ui/src/features/system/SystemFormTabs.tsx b/clients/admin-ui/src/features/system/SystemFormTabs.tsx
@@ -2,7 +2,7 @@ import { Box, Button, Text, useToast } from "@fidesui/react";
 import { DataFlowAccordion } from "common/system-data-flow/DataFlowAccordion";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import DataTabs, { type TabData } from "~/features/common/DataTabs";
@@ -109,30 +109,33 @@ const SystemFormTabs = ({
     }
   }, [activeSystem]);
 
-  const handleSuccess = (system: SystemResponse) => {
-    // show a save message if this is the first time the system was saved
-    if (activeSystem === undefined) {
-      setShowSaveMessage(true);
-    }
-    dispatch(setActiveSystem(system));
-    const toastParams = {
-      ...DEFAULT_TOAST_PARAMS,
-      description: (
-        <ToastMessage
-          onViewDatamap={() => {
-            router.push(systemOrDatamapRoute).then(() => {
+  const handleSuccess = useCallback(
+    (system: SystemResponse) => {
+      // show a save message if this is the first time the system was saved
+      if (activeSystem === undefined) {
+        setShowSaveMessage(true);
+      }
+      dispatch(setActiveSystem(system));
+      const toastParams = {
+        ...DEFAULT_TOAST_PARAMS,
+        description: (
+          <ToastMessage
+            onViewDatamap={() => {
+              router.push(systemOrDatamapRoute).then(() => {
+                toast.closeAll();
+              });
+            }}
+            onAddPrivacyDeclaration={() => {
+              setTabIndex(1);
               toast.closeAll();
-            });
-          }}
-          onAddPrivacyDeclaration={() => {
-            setTabIndex(1);
-            toast.closeAll();
-          }}
-        />
-      ),
-    };
-    toast({ ...toastParams });
-  };
+            }}
+          />
+        ),
+      };
+      toast({ ...toastParams });
+    },
+    [activeSystem, dispatch, router, systemOrDatamapRoute, toast]
+  );
 
   useEffect(() => {
     /**
@@ -151,13 +154,16 @@ const SystemFormTabs = ({
 
   const { attemptAction } = useIsAnyFormDirty();
 
-  const onTabChange = (index: number) => {
-    attemptAction().then((modalConfirmed: boolean) => {
-      if (modalConfirmed) {
-        setTabIndex(index);
-      }
-    });
-  };
+  const onTabChange = useCallback(
+    (index: number) => {
+      attemptAction().then((modalConfirmed: boolean) => {
+        if (modalConfirmed) {
+          setTabIndex(index);
+        }
+      });
+    },
+    [attemptAction]
+  );
 
   const tabData: TabData[] = [
     {

diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -48,7 +48,11 @@ const VendorSelector = ({ disabled, options }: Props) => {
             </Label>
             <QuestionTooltip label="Enter the vendor to associate with the system" />
           </Flex>
-          <Flex position="relative" width="100%">
+          <Flex
+            position="relative"
+            width="100%"
+            data-testid={`input-${field.name}`}
+          >
             <Select
               options={suggestions}
               onBlur={(e) => {