From 40294f297f8f27209f26a82687af956a47bca231 Mon Sep 17 00:00:00 2001 From: Allison King Date: Thu, 7 Jul 2022 10:11:08 -0400 Subject: [PATCH] Cypress tests for data category checkbox behavior (#851) * WIP checkbox tests * Add more checkbox tests * Clean up * Try to reduce test flakiness in CI * Configure to retry --- clients/admin-ui/cypress.config.ts | 2 + clients/admin-ui/cypress/e2e/datasets.cy.ts | 188 +++++++++++++++++- .../features/dataset/DataCategoryInput.tsx | 3 + 3 files changed, 183 insertions(+), 10 deletions(-) diff --git a/clients/admin-ui/cypress.config.ts b/clients/admin-ui/cypress.config.ts index bc27ecfe97..2915b3290f 100644 --- a/clients/admin-ui/cypress.config.ts +++ b/clients/admin-ui/cypress.config.ts @@ -5,4 +5,6 @@ export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", }, + defaultCommandTimeout: 5000, + retries: 3, }); diff --git a/clients/admin-ui/cypress/e2e/datasets.cy.ts b/clients/admin-ui/cypress/e2e/datasets.cy.ts index 9c8ae0f220..077847ade2 100644 --- a/clients/admin-ui/cypress/e2e/datasets.cy.ts +++ b/clients/admin-ui/cypress/e2e/datasets.cy.ts @@ -57,9 +57,12 @@ describe("Dataset", () => { it("Can render an edit form for a dataset field with existing values", () => { cy.visit("/dataset/demo_users_dataset"); - cy.getByTestId("field-row-uuid").click(); - cy.wait("@getDataCategory"); - cy.getByTestId("edit-drawer-content"); + cy.getByTestId("field-row-uuid") + .click() + .then(() => { + cy.wait("@getDataset"); + cy.getByTestId("edit-drawer-content"); + }); cy.getByTestId("input-description").should( "have.value", "User's unique ID" @@ -72,8 +75,12 @@ describe("Dataset", () => { it("Can render an edit form for a dataset collection with existing values", () => { cy.visit("/dataset/demo_users_dataset"); cy.getByTestId("more-actions-btn").click(); - cy.getByTestId("modify-collection").click(); - cy.getByTestId("edit-drawer-content"); + cy.getByTestId("modify-collection") + .click() + .then(() => { + cy.wait("@getDataset"); + cy.getByTestId("edit-drawer-content"); + }); cy.getByTestId("input-description").should( "have.value", "User information" @@ -85,8 +92,12 @@ describe("Dataset", () => { it("Can render an edit form for a dataset with existing values", () => { cy.visit("/dataset/demo_users_dataset"); cy.getByTestId("more-actions-btn").click(); - cy.getByTestId("modify-dataset").click(); - cy.getByTestId("edit-drawer-content"); + cy.getByTestId("modify-dataset") + .click() + .then(() => { + cy.wait("@getDataset"); + cy.getByTestId("edit-drawer-content"); + }); cy.getByTestId("input-name").should("have.value", "Demo Users Dataset"); cy.getByTestId("input-description").should( "have.value", @@ -148,13 +159,170 @@ describe("Dataset", () => { cy.visit("/dataset/demo_users_dataset"); cy.getByTestId("collection-select").select("products"); cy.getByTestId("more-actions-btn").click(); - cy.getByTestId("modify-dataset").click(); - cy.getByTestId("input-description").clear().type(newDescription); + cy.getByTestId("modify-dataset") + .click() + .then(() => { + cy.getByTestId("input-description").clear().type(newDescription); + cy.getByTestId("save-btn").click({ force: true }); + cy.wait("@putDataset").then((interception) => { + const { body } = interception.request; + expect(body.description).to.eql(newDescription); + }); + }); + }); + }); + + describe("Data category checkbox tree", () => { + beforeEach(() => { + cy.intercept("PUT", "/api/v1/dataset/*", { fixture: "dataset.json" }).as( + "putDataset" + ); + }); + it("Can render chosen data categories", () => { + cy.visit("/dataset/demo_users"); + cy.getByTestId("field-row-uuid").click(); + cy.getByTestId("data-category-dropdown").click(); + cy.get("[data-testid='checkbox-Unique ID'] > span").should( + "have.attr", + "data-checked" + ); + const ancestors = [ + "User Data", + "Derived Data", + "Derived User Identifiable Data", + ]; + ancestors.forEach((a) => { + cy.get(`[data-testid='checkbox-${a}'] > span`).should( + "have.attr", + "data-indeterminate" + ); + }); + cy.getByTestId("selected-categories").should( + "contain", + "user.derived.identifiable.unique_id" + ); + }); + + it("Can deselect data categories", () => { + cy.visit("/dataset/demo_users"); + cy.getByTestId("field-row-uuid").click(); + cy.getByTestId("data-category-dropdown").click(); + cy.getByTestId("checkbox-Unique ID").click(); + // should collapse away + cy.getByTestId("checkbox-Unique ID").should("not.exist"); + cy.get("[data-testid='checkbox-User Data'] > span").should( + "not.have.attr", + "data-indeterminate" + ); + cy.getByTestId("done-btn").click(); + cy.getByTestId("selected-categories").should( + "not.contain", + "user.derived.identifiable.unique_id" + ); + cy.getByTestId("save-btn").click({ force: true }); + cy.wait("@putDataset").then((interception) => { + const { body } = interception.request; + expect(body.collections[0].fields[5].data_categories).to.eql([]); + }); + }); + + it("Can select more data categories", () => { + cy.visit("/dataset/demo_users"); + cy.getByTestId("field-row-uuid").click(); + cy.getByTestId("data-category-dropdown").click(); + cy.getByTestId("checkbox-Telemetry Data").click(); + cy.getByTestId("checkbox-Account Data").click(); + cy.getByTestId("done-btn").click(); + cy.getByTestId("selected-categories").should( + "contain", + "user.derived.identifiable.unique_id" + ); + cy.getByTestId("selected-categories").should( + "contain", + "user.derived.identifiable.telemetry" + ); + cy.getByTestId("selected-categories").should("contain", "account"); cy.getByTestId("save-btn").click({ force: true }); cy.wait("@putDataset").then((interception) => { const { body } = interception.request; - expect(body.description).to.eql(newDescription); + expect(body.collections[0].fields[5].data_categories).to.eql([ + "user.derived.identifiable.unique_id", + "user.derived.identifiable.telemetry", + "account", + ]); }); }); + + it("Can interact with the checkbox tree properly", () => { + cy.visit("/dataset/demo_users"); + cy.getByTestId("field-row-uuid").click(); + cy.getByTestId("data-category-dropdown").click(); + // expand account data + cy.getByTestId("expand-Account Data").click(); + // select 1/2 children + cy.getByTestId("checkbox-Account Contact Data").click(); + cy.get("[data-testid='checkbox-Account Contact Data'] > span").should( + "have.attr", + "data-checked" + ); + // parent should be indeterminate since not all children are checked + cy.get("[data-testid='checkbox-Account Data'] > span").should( + "have.attr", + "data-indeterminate" + ); + // now select all children + cy.getByTestId("checkbox-Payment Data").click(); + // parent should be checked since all children are checked + cy.get("[data-testid='checkbox-Account Data'] > span").should( + "have.attr", + "data-checked" + ); + // the children's children should be disabled and checked since the parent is selected + cy.get("[data-testid='checkbox-Account City'] > span").should( + "have.attr", + "data-checked" + ); + cy.get("[data-testid='checkbox-Account City'] > span").should( + "have.attr", + "data-disabled" + ); + cy.getByTestId("done-btn").click(); + const expectedSelected = [ + "account.contact", + "account.payment", + "user.derived.identifiable.unique_id", + ]; + expectedSelected.forEach((e) => { + cy.getByTestId("selected-categories").should("contain", e); + }); + }); + + it("Should be able to clear selected", () => { + cy.visit("/dataset/demo_users"); + cy.getByTestId("field-row-uuid").click(); + cy.getByTestId("data-category-dropdown").click(); + cy.getByTestId("checkbox-Account Data").click(); + cy.get("[data-testid='checkbox-Account Data'] > span").should( + "have.attr", + "data-checked" + ); + cy.getByTestId("done-btn").click(); + cy.getByTestId("selected-categories").should( + "contain", + "user.derived.identifiable.unique_id" + ); + cy.getByTestId("selected-categories").should("contain", "account"); + cy.getByTestId("data-category-dropdown").click(); + cy.getByTestId("clear-btn").click(); + cy.get("[data-testid='checkbox-Account Data'] > span").should( + "not.have.attr", + "data-checked" + ); + cy.getByTestId("done-btn").click(); + cy.getByTestId("selected-categories").should( + "not.contain", + "user.derived.identifiable.unique_id" + ); + }); }); }); diff --git a/clients/admin-ui/src/features/dataset/DataCategoryInput.tsx b/clients/admin-ui/src/features/dataset/DataCategoryInput.tsx index afd1e8a2a7..03ae1f3c85 100644 --- a/clients/admin-ui/src/features/dataset/DataCategoryInput.tsx +++ b/clients/admin-ui/src/features/dataset/DataCategoryInput.tsx @@ -63,6 +63,7 @@ const DataCategoryDropdown = ({ _active={{ backgroundColor: "transparent" }} rightIcon={} width="100%" + data-testid="data-category-dropdown" > Select data categories @@ -85,6 +86,7 @@ const DataCategoryDropdown = ({ mr={2} width="auto" closeOnSelect={false} + data-testid="clear-btn" > Clear @@ -97,6 +99,7 @@ const DataCategoryDropdown = ({ _hover={{ backgroundColor: "primary.600" }} onClick={() => onChecked(internalChecked)} width="auto" + data-testid="done-btn" > Done