From 3eeb595a0eec16c8c3a0cb3b3a3dbda28ec850c1 Mon Sep 17 00:00:00 2001 From: Benjamin CHARMES Date: Fri, 4 Oct 2024 11:48:24 +0100 Subject: [PATCH] Fix e2e cypress test to work with dropdown Fix e2e cypress test to work with dropdown --- webapp/cypress/e2e/batchSampleFeature.cy.js | 8 ++++---- webapp/cypress/e2e/equipment.cy.js | 14 +------------- webapp/cypress/e2e/sampleTablePage.cy.js | 6 ++++-- webapp/cypress/support/commands.js | 14 +++++++------- .../src/components/DynamicButtonDataTable.vue | 19 ++++++++++++++++--- 5 files changed, 32 insertions(+), 29 deletions(-) diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js index 2a4d7cc27..44f896dbd 100644 --- a/webapp/cypress/e2e/batchSampleFeature.cy.js +++ b/webapp/cypress/e2e/batchSampleFeature.cy.js @@ -103,7 +103,7 @@ describe("Batch sample creation", () => { cy.verifySample("testB", "this sample has a name"); cy.verifySample("testC"); - cy.deleteSamples(["testA", "testB", "testC"]); + cy.deleteItems("sample", ["testA", "testB", "testC"]); }); it("adds two valid samples", () => { @@ -437,7 +437,7 @@ describe("Batch sample creation", () => { cy.verifySample("test_2", "testing 1,2"); cy.verifySample("test_3", "testing 1,2,3"); - cy.deleteSamples(["test_1", "test_2", "test_3"]); + cy.deleteItems("sample", ["test_1", "test_2", "test_3"]); }); it("uses the template id, name, and date", () => { @@ -460,7 +460,7 @@ describe("Batch sample creation", () => { cy.verifySample("test_6", "this is the test sample #6", "1980-02-01T05:35"); cy.verifySample("test_7", "this is the test sample #7", "1980-02-01T05:35"); - cy.deleteSamples(["test_5", "test_6", "test_7"]); + cy.deleteItems("sample", ["test_5", "test_6", "test_7"]); }); it("uses the template id, name, date, copyFrom, and components", () => { @@ -649,7 +649,7 @@ describe("Batch sample creation", () => { cy.verifySample("test2", "name2"); checkCreatedSample("test1"); checkCreatedSample("test2"); - cy.deleteSamples(["test1", "test2"]); + cy.deleteItems("sample", ["test1", "test2"]); }); it("checks errors on the row", () => { diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js index b2e0d36f7..b30e65359 100644 --- a/webapp/cypress/e2e/equipment.cy.js +++ b/webapp/cypress/e2e/equipment.cy.js @@ -85,19 +85,7 @@ describe("Equipment table page", () => { }); it("Deletes an item", function () { - cy.get("[data-testid=equipment-table]") - .contains(new RegExp("^" + "test_e2" + "$", "g")) - .parents("tr") - .find("input[type='checkbox']") - .click(); - - cy.get(".p-splitbutton-dropdown").click(); - cy.contains("Delete selected").click({ force: true }); - - cy.on("window:confirm", (text) => { - expect(text).to.contains("test_e2"); - return true; - }); + cy.deleteItems("equipment", ["test_e2"]); cy.contains("test_e2").should("not.exist"); diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js index 89f69d398..8e3f73eda 100644 --- a/webapp/cypress/e2e/sampleTablePage.cy.js +++ b/webapp/cypress/e2e/sampleTablePage.cy.js @@ -308,8 +308,9 @@ describe.only("Advanced sample creation features", () => { it("selects a sample by checkbox, adds it to a new collection, then checks the collections page", () => { // Insert 'component4' into new collection called 'test_collection' let test_id = "component4"; - cy.selectSampleCheckbox(test_id); - cy.findByText("Add to collection").click(); + cy.selectItemCheckbox("sample", test_id); + cy.get('[data-testid="selected-dropdown"]').click(); + cy.get('[data-testid="add-to-collection-button"]').click(); cy.findByLabelText("Insert into collection:").type("test_collection"); cy.findByText('Create new collection: "test_collection"').click(); cy.get('form[data-testid="add-to-collection-form"]').within(() => { @@ -318,6 +319,7 @@ describe.only("Advanced sample creation features", () => { // Visit collections page and look for 'test_collection' cy.visit("/collections"); // Visit edit page of collection and check that the sample is there + cy.get('[data-testid="search-input"]').type("test_collection"); cy.findByText("test_collection").click(); cy.findByText(test_id).should("exist"); }); diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js index 76dd02551..2d5a62887 100644 --- a/webapp/cypress/support/commands.js +++ b/webapp/cypress/support/commands.js @@ -68,22 +68,22 @@ Cypress.Commands.add("verifySample", (item_id, name = null, date = null) => { }); }); -Cypress.Commands.add("selectSampleCheckbox", (item_id) => { - cy.get("[data-testid=sample-table]") +Cypress.Commands.add("selectItemCheckbox", (type, item_id) => { + cy.get(`[data-testid=${type}-table]`) .contains(new RegExp("^" + item_id + "$", "g")) .parents("tr") .find("input[type='checkbox']") .click(); }); -Cypress.Commands.add("deleteSamples", (items_id) => { +Cypress.Commands.add("deleteItems", (type, items_id) => { cy.log("search for and delete: " + items_id); items_id.forEach((item_id) => { - cy.selectSampleCheckbox(item_id); + cy.selectItemCheckbox(type, item_id); }); - cy.get(".p-splitbutton-dropdown").click(); - cy.contains("Delete selected").click({ force: true }); + cy.get('[data-testid="selected-dropdown"]').click(); + cy.get('[data-testid="delete-selected-button"]').click(); cy.on("window:confirm", (text) => { expect(text).to.contains(items_id); @@ -91,7 +91,7 @@ Cypress.Commands.add("deleteSamples", (items_id) => { }); items_id.forEach((item_id) => { - cy.get("[data-testid=sample-table]") + cy.get(`[data-testid=${type}-table]`) .contains(new RegExp("^" + item_id + "$", "g")) .should("not.exist"); }); diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue index 6a17f0e0c..604f90aaa 100644 --- a/webapp/src/components/DynamicButtonDataTable.vue +++ b/webapp/src/components/DynamicButtonDataTable.vue @@ -47,7 +47,7 @@
- + @@ -153,6 +159,13 @@ export default { isSelectedDropdownVisible: false, }; }, + watch: { + itemsSelected(newVal) { + if (newVal.length === 0) { + this.isSelectedDropdownVisible = false; + } + }, + }, methods: { confirmDeletion() { const idsSelected = this.itemsSelected.map((x) => x.item_id || x.collection_id);