Skip to content

Commit

Permalink
Cypress tests for data category checkbox behavior (#851)
Browse files Browse the repository at this point in the history 
* WIP checkbox tests

* Add more checkbox tests

* Clean up

* Try to reduce test flakiness in CI

* Configure to retry
  • Loading branch information
@allisonking
allisonking authored Jul 7, 2022
1 parent c5efe4e commit 40294f2
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 10 deletions.
2 changes: 2 additions & 0 deletions clients/admin-ui/cypress.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,6 @@ export default defineConfig({
e2e: {
baseUrl: "http://localhost:3000",
},
defaultCommandTimeout: 5000,
retries: 3,
});
188 changes: 178 additions & 10 deletions clients/admin-ui/cypress/e2e/datasets.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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",
Expand Down Expand Up @@ -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"
);
});
});
});
3 changes: 3 additions & 0 deletions clients/admin-ui/src/features/dataset/DataCategoryInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const DataCategoryDropdown = ({
_active={{ backgroundColor: "transparent" }}
rightIcon={<ArrowDownLineIcon />}
width="100%"
data-testid="data-category-dropdown"
>
Select data categories
</MenuButton>
Expand All @@ -85,6 +86,7 @@ const DataCategoryDropdown = ({
mr={2}
width="auto"
closeOnSelect={false}
data-testid="clear-btn"
>
Clear
</MenuItem>
Expand All @@ -97,6 +99,7 @@ const DataCategoryDropdown = ({
_hover={{ backgroundColor: "primary.600" }}
onClick={() => onChecked(internalChecked)}
width="auto"
data-testid="done-btn"
>
Done
</MenuItem>
Expand Down

0 comments on commit 40294f2

Please sign in to comment.