Fix e2e cypress test to work with dropdown

datalab-org · Oct 4, 2024 · 3eeb595 · 3eeb595
1 parent 1ed8473
commit 3eeb595
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -68,30 +68,30 @@ 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);
     return true;
   });
 
   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
@@ -47,7 +47,7 @@
     <div class="button-right d-flex">
       <div class="dropdown">
         <button
-          id="selectedDropdown"
+          data-testid="selected-dropdown"
           class="btn btn-default dropdown-toggle"
           type="button"
           data-toggle="dropdown"
@@ -66,18 +66,24 @@
         >
           <a
             v-if="itemsSelected.length !== 0 && dataType !== 'collections'"
+            data-testid="add-to-collection-button"
             class="dropdown-item"
             @click="handleAddToCollection"
           >
             Add to collection
           </a>
-          <a v-if="itemsSelected.length !== 0" class="dropdown-item" @click="confirmDeletion">
+          <a
+            v-if="itemsSelected.length !== 0"
+            data-testid="delete-selected-button"
+            class="dropdown-item"
+            @click="confirmDeletion"
+          >
             Delete selected
           </a>
         </div>
       </div>
 
-      <IconField class="">
+      <IconField>
         <InputIcon>
           <i class="pi pi-search"></i>
         </InputIcon>
@@ -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);