Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cypress tests for data category checkbox behavior #851

Merged
merged 22 commits into from
Jul 7, 2022
Merged

Cypress tests for data category checkbox behavior #851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f78190a
Initial cypress setup
allisonking Jun 29, 2022
2ab4ecb
Make sure cypress artifacts don't sneak in
allisonking Jun 29, 2022
7d84bb6
Configure cypress CI
allisonking Jun 29, 2022
bc8990d
Add working directory and node matrix
allisonking Jun 29, 2022
0b3b84f
Configure eslint to play nicely with cypress
allisonking Jun 29, 2022
a171680
Configure cypress gh action
allisonking Jun 30, 2022
113c55d
Add working directory
allisonking Jun 30, 2022
1e01c9d
Try to configure cypress again
allisonking Jun 30, 2022
73c2209
Fix wait-on url
allisonking Jun 30, 2022
5ee92f7
Clean up
allisonking Jun 30, 2022
dd5b816
merge main
allisonking Jun 30, 2022
31719cd
Add more cypress tests for dataset views
allisonking Jun 30, 2022
0a9a768
More tests for viewing edit forms
allisonking Jun 30, 2022
10b8d72
Add test for editing a dataset field
allisonking Jun 30, 2022
cfbd389
Add more editing tests
allisonking Jul 1, 2022
7a09635
Merge branch 'main' into aking-713-cypress-dataset-tests
allisonking Jul 5, 2022
714973d
WIP checkbox tests
allisonking Jul 5, 2022
5b256e3
Merge branch 'main' into aking-713-cypress-checkbox
allisonking Jul 6, 2022
6e6e7da
Add more checkbox tests
allisonking Jul 6, 2022
2cd6a9e
Clean up
allisonking Jul 6, 2022
8d77d6f
Try to reduce test flakiness in CI
allisonking Jul 6, 2022
79b780f
Configure to retry
allisonking Jul 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions clients/admin-ui/cypress.config.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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