Cypress tests for dataset DELETEs (#845)

* Add delete tests * Add test for deleting entire dataset * Extend getByTestId to take options * Attempt to use a .then to fix CI tests
ethyca · Jul 28, 2022 · f5faf52 · f5faf52
1 parent ce93715
commit f5faf52
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 6 deletions.
diff --git a/clients/admin-ui/cypress/e2e/datasets.cy.ts b/clients/admin-ui/cypress/e2e/datasets.cy.ts
@@ -172,6 +172,68 @@ describe("Dataset", () => {
     });
   });
 
+  describe("Deleting datasets", () => {
+    beforeEach(() => {
+      cy.intercept("PUT", "/api/v1/dataset/*").as("putDataset");
+      cy.fixture("dataset.json").then((dataset) => {
+        cy.intercept("DELETE", "/api/v1/dataset/*", {
+          body: {
+            message: "resource deleted",
+            resource: dataset,
+          },
+        }).as("deleteDataset");
+      });
+    });
+
+    it("Can delete a field from a dataset", () => {
+      const fieldName = "uuid";
+      cy.visit("/dataset/demo_users_dataset");
+      cy.getByTestId(`field-row-${fieldName}`)
+        .click()
+        .then(() => {
+          cy.getByTestId("delete-btn").click();
+          cy.getByTestId("continue-btn").click();
+          cy.wait("@putDataset").then((interception) => {
+            const { body } = interception.request;
+            expect(body.collections[0].fields.length).to.eql(5);
+            expect(
+              body.collections[0].fields.filter((f) => f.name === fieldName)
+                .length
+            ).to.eql(0);
+          });
+        });
+    });
+
+    it("Can delete a collection from a dataset", () => {
+      const collectionName = "users";
+      cy.visit("/dataset/demo_users_dataset");
+      cy.getByTestId("collection-select").select(collectionName);
+      cy.getByTestId("more-actions-btn").click();
+      cy.getByTestId("modify-collection").click();
+      cy.getByTestId("delete-btn").click();
+      cy.getByTestId("continue-btn").click();
+      cy.wait("@putDataset").then((interception) => {
+        const { body } = interception.request;
+        expect(body.collections.length).to.eql(1);
+        expect(
+          body.collections.filter((c) => c.name === collectionName).length
+        ).to.eql(0);
+      });
+    });
+
+    it("Can delete a dataset", () => {
+      cy.visit("/dataset/demo_users_dataset");
+      cy.getByTestId("more-actions-btn").click();
+      cy.getByTestId("modify-dataset").click();
+      cy.getByTestId("delete-btn").click();
+      cy.getByTestId("continue-btn").click();
+      cy.wait("@deleteDataset").then((interception) => {
+        expect(interception.request.url).to.contain("demo_users_dataset");
+      });
+      cy.getByTestId("toast-success-msg");
+    });
+  });
+
   describe("Data category checkbox tree", () => {
     beforeEach(() => {
       cy.intercept("PUT", "/api/v1/dataset/*", { fixture: "dataset.json" }).as(

diff --git a/clients/admin-ui/cypress/support/commands.ts b/clients/admin-ui/cypress/support/commands.ts
@@ -11,7 +11,15 @@ declare global {
        * Custom command to select DOM element by data-testid attribute
        * @example cy.getByTestId('clear-btn')
        */
-      getByTestId(selector: string): Chainable<JQuery<HTMLElement>>;
+      getByTestId(
+        selector: string,
+        options?: Partial<
+          Cypress.Loggable &
+            Cypress.Timeoutable &
+            Cypress.Withinable &
+            Cypress.Shadow
+        >
+      ): Chainable<JQuery<HTMLElement>>;
     }
   }
 }

diff --git a/clients/admin-ui/src/features/common/ConfirmationModal.tsx b/clients/admin-ui/src/features/common/ConfirmationModal.tsx
@@ -26,15 +26,24 @@ const ConfirmationModal = ({
 }: Props) => (
   <Modal isOpen={isOpen} onClose={onClose} size="lg">
     <ModalOverlay />
-    <ModalContent textAlign="center" p={2}>
+    <ModalContent textAlign="center" p={2} data-testid="confirmation-modal">
       <ModalHeader fontWeight="medium">{title}</ModalHeader>
       <ModalBody>{message}</ModalBody>
       <ModalFooter>
         <SimpleGrid columns={2} width="100%">
-          <Button variant="outline" mr={3} onClick={onClose}>
+          <Button
+            variant="outline"
+            mr={3}
+            onClick={onClose}
+            data-testid="cancel-btn"
+          >
             Cancel
           </Button>
-          <Button colorScheme="primary" onClick={onConfirm}>
+          <Button
+            colorScheme="primary"
+            onClick={onConfirm}
+            data-testid="continue-btn"
+          >
             Continue
           </Button>
         </SimpleGrid>

diff --git a/clients/admin-ui/src/features/common/toast.tsx b/clients/admin-ui/src/features/common/toast.tsx
@@ -1,13 +1,13 @@
 import { Text, UseToastOptions } from "@fidesui/react";
 
 const SuccessMessage = ({ message }: { message: string }) => (
-  <Text>
+  <Text data-testid="toast-success-msg">
     <strong>Success:</strong> {message}
   </Text>
 );
 
 const ErrorMessage = ({ message }: { message: string }) => (
-  <Text>
+  <Text data-testid="toast-error-msg">
     <strong>Error:</strong> {message}
   </Text>
 );

diff --git a/clients/admin-ui/src/features/dataset/EditCollectionOrFieldForm.tsx b/clients/admin-ui/src/features/dataset/EditCollectionOrFieldForm.tsx
@@ -84,13 +84,15 @@ const EditCollectionOrFieldForm = ({
               name="description"
               label="Description"
               tooltip={descriptionTooltip}
+              data-testid="description-input"
             />
             <CustomSelect
               name="data_qualifier"
               label="Identifiability"
               options={IDENTIFIER_OPTIONS}
               tooltip={dataQualifierTooltip}
               isSearchable={false}
+              data-testid="identifiability-input"
             />
             <DataCategoryInput
               dataCategories={allDataCategories}

diff --git a/clients/admin-ui/src/features/dataset/EditDatasetForm.tsx b/clients/admin-ui/src/features/dataset/EditDatasetForm.tsx
@@ -66,29 +66,34 @@ const EditDatasetForm = ({ values, onClose, onSubmit }: Props) => {
               name="name"
               label="Name"
               tooltip={DATASET.name.tooltip}
+              data-testid="name-input"
             />
             <CustomTextInput
               name="description"
               label="Description"
               tooltip={DATASET.description.tooltip}
+              data-testid="description-input"
             />
             <CustomTextInput
               name="retention"
               label="Retention period"
               tooltip={DATASET.retention.tooltip}
+              data-testid="retention-input"
             />
             <CustomSelect
               name="data_qualifier"
               label="Identifiability"
               options={DATA_QUALIFIERS_OPTIONS}
               tooltip={DATASET.data_qualifiers.tooltip}
+              data-testid="identifiability-input"
             />
             <CustomMultiSelect
               name="third_country_transfers"
               label="Geographic location"
               tooltip={DATASET.third_country_transfers.tooltip}
               isSearchable
               options={COUNTRY_OPTIONS}
+              data-testid="geography-input"
             />
             <DataCategoryInput
               dataCategories={allDataCategories}

diff --git a/clients/admin-ui/src/features/dataset/EditDrawer.tsx b/clients/admin-ui/src/features/dataset/EditDrawer.tsx
@@ -61,6 +61,7 @@ const EditDrawer = ({
                 icon={<TrashCanSolidIcon />}
                 size="xs"
                 onClick={onDeleteOpen}
+                data-testid="delete-btn"
               />
             </DrawerHeader>
             <DrawerBody>