Update cypress e2e tests to run on the new DataTable and remove /old …

…routes

webapp/cypress.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
     baseUrl: "http://localhost:8080",
     apiUrl: "http://localhost:5001",
     experimentalMemoryManagement: true,
+    numTestsKeptInMemory: 0,
     defaultCommandTimeout: 10000,
   },
   component: {

webapp/cypress/e2e/batchSampleFeature.cy.js

@@ -103,9 +103,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("testB", "this sample has a name");
     cy.verifySample("testC");
 
-    cy.deleteSample("testA");
-    cy.deleteSample("testB");
-    cy.deleteSample("testC");
+    cy.deleteSamples(["testA", "testB", "testC"]);
   });
 
   it("adds two valid samples", () => {
@@ -154,6 +152,7 @@ describe("Batch sample creation", () => {
   });
 
   it("modifies some data in the first sample", () => {
+    cy.get('[data-testid="search-input"]').type("baseA");
     cy.findByText("baseA").click();
     cy.findByLabelText("Description").type("this is a description of baseA.");
     cy.findByText("Add a block").click();
@@ -166,6 +165,7 @@ describe("Batch sample creation", () => {
   });
 
   it("modifies some data in the second sample", () => {
+    cy.get('[data-testid="search-input"]').type("baseB");
     cy.findByText("baseB").click();
     cy.findByLabelText("Description").type("this is a description of baseB.");
     cy.findByText("Add a block").click();
@@ -437,9 +437,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test_2", "testing 1,2");
     cy.verifySample("test_3", "testing 1,2,3");
 
-    cy.deleteSample("test_1");
-    cy.deleteSample("test_2");
-    cy.deleteSample("test_3");
+    cy.deleteSamples(["test_1", "test_2", "test_3"]);
   });
 
   it("uses the template id, name, and date", () => {
@@ -462,9 +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.deleteSample("test_5");
-    cy.deleteSample("test_6");
-    cy.deleteSample("test_7");
+    cy.deleteSamples(["test_5", "test_6", "test_7"]);
   });
 
   it("uses the template id, name, date, copyFrom, and components", () => {
@@ -522,6 +518,7 @@ describe("Batch sample creation", () => {
     cy.get("[data-testid=batch-modal-container]").contains("Close").click();
 
     function checkCreatedSample(item_id) {
+      cy.get('[data-testid="search-input"]').type(item_id);
       cy.contains(item_id).click();
       cy.contains("this is a description of baseB.");
       cy.get("#synthesis-information table").contains("component3");
@@ -652,8 +649,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test2", "name2");
     checkCreatedSample("test1");
     checkCreatedSample("test2");
-    cy.deleteSample("test1");
-    cy.deleteSample("test2");
+    cy.deleteSamples(["test1", "test2"]);
   });
 
   it("checks errors on the row", () => {
@@ -832,6 +828,7 @@ describe("Batch cell creation", () => {
     cy.verifySample("cell_3", "this is the test cell #3", "1980-02-01T23:59");
 
     function checkCreatedCell(item_id) {
+      cy.get('[data-testid="search-input"]').type(item_id);
       cy.contains(item_id).click();
       cy.get("#pos-electrode-table").contains("comp1");
       cy.get("#pos-electrode-table").contains("tagged");

webapp/cypress/e2e/editPage.cy.js

@@ -35,7 +35,7 @@ describe("Edit Page", () => {
 
   it("Adds a valid sample", () => {
     cy.createSample("editable_sample", "This is a sample name", "1990-01-07T00:00");
-    cy.get("tr>td").eq(7).contains(0); // 0 blocks are present
+    cy.get("tr>td").eq(8).contains(0); // 0 blocks are present
   });
 
   it("Add some more samples, to use as components", () => {
@@ -44,6 +44,7 @@ describe("Edit Page", () => {
   });
 
   it("Checks editing the sample edit page", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
     cy.findByLabelText("Chemical formula").type("NaCoO2", { force: true });
@@ -53,6 +54,7 @@ describe("Edit Page", () => {
     cy.contains("Unsaved changes").should("not.exist");
     cy.findByText("Home").click();
 
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample");
     cy.findByText("This is a sample name");
     cy.findByText("1990-01-07");
@@ -69,6 +71,7 @@ describe("Edit Page", () => {
   });
 
   it("adds some synthesis information", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information .vs__search").first().type("component1");
     cy.get(".vs__dropdown-menu").contains(".badge", "component1").click();
@@ -122,6 +125,7 @@ describe("Edit Page", () => {
   });
 
   it("deletes synthesis components and re-adds them", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) .close").click();
     cy.get("#synthesis-information tbody > tr").should("have.length", 2);
@@ -160,6 +164,7 @@ describe("Edit Page", () => {
   });
 
   it("tries to add a non-numeric value into quantity", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) td:nth-of-type(2) input").type(
       "100.001",
@@ -196,6 +201,7 @@ describe("Edit Page", () => {
   });
 
   it("Add some blocks to the sample and checks unsaved warning behavior", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
 
@@ -237,6 +243,7 @@ describe("Edit Page", () => {
     cy.contains("Unsaved changes").should("not.exist");
 
     cy.findByText("Home").click();
-    cy.get("[data-testid=sample-table] tr:nth-of-type(3) > td:nth-of-type(8)").contains(2); // 2 blocks are present
+    cy.get('[data-testid="search-input"]').type("editable_sample");
+    cy.get("[data-testid=sample-table] tr:nth-of-type(1) > td:nth-of-type(9)").contains(2); // 2 blocks are present
   });
 });

webapp/cypress/e2e/equipment.cy.js

@@ -73,7 +73,10 @@ describe("Equipment table page", () => {
 
   it("Attempts to Add an item with the same name", () => {
     cy.findByText("Add an item").click();
-    cy.findByLabelText("ID:").type("test_e3");
+    cy.get('[data-testid="create-equipment-form"]').within(() => {
+      cy.findByText("Add equipment").should("exist");
+      cy.findByLabelText("ID:").type("test_e3");
+    });
 
     cy.contains("already in use").should("exist");
     cy.get(".form-error a").contains("test_e3");
@@ -82,7 +85,19 @@ describe("Equipment table page", () => {
   });
 
   it("Deletes an item", function () {
-    cy.get("tr#test_e2 button.close").click();
+    cy.get("[data-testid=equipment-table]")
+      .contains(new RegExp("^" + "test_e2" + "$", "g"))
+      .parents("tr")
+      .find("input[type='checkbox']")
+      .click();
+
+    cy.get("[data-testid=delete-selected-button]").click();
+
+    cy.on("window:confirm", (text) => {
+      expect(text).to.contains("test_e2");
+      return true;
+    });
+
     cy.contains("test_e2").should("not.exist");
 
     cy.request({ url: `${API_URL}/get-item-data/test_e2`, failOnStatusCode: false }).then(

webapp/cypress/support/commands.js

@@ -68,17 +68,28 @@ Cypress.Commands.add("verifySample", (item_id, name = null, date = null) => {
     });
 });
 
-Cypress.Commands.add("deleteSample", (item_id) => {
-  cy.log("search for and delete: " + item_id);
-  cy.get("[data-testid=sample-table]")
-    .contains(new RegExp("^" + item_id + "$", "g"))
-    .parents("tr")
-    .find("button.close")
-    .click();
+Cypress.Commands.add("deleteSamples", (items_id) => {
+  cy.log("search for and delete: " + items_id);
+  items_id.forEach((item_id) => {
+    cy.get("[data-testid=sample-table]")
+      .contains(new RegExp("^" + item_id + "$", "g"))
+      .parents("tr")
+      .find("input[type='checkbox']")
+      .click();
+  });
 
-  cy.get("[data-testid=sample-table]")
-    .contains(new RegExp("^" + item_id + "$", "g"))
-    .should("not.exist");
+  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]")
+      .contains(new RegExp("^" + item_id + "$", "g"))
+      .should("not.exist");
+  });
 });
 
 Cypress.Commands.add("deleteSampleViaAPI", (item_id) => {
@@ -103,6 +114,7 @@ Cypress.Commands.add("searchAndSelectItem", (search_text, selector, clickPlus =
 
 Cypress.Commands.add("createEquipment", (item_id, name = null, date = null) => {
   cy.findByText("Add an item").click();
+
   cy.get('[data-testid="create-equipment-form"]').within(() => {
     cy.findByText("Add equipment").should("exist");
     cy.findByLabelText("ID:").type(item_id);

webapp/src/components/AddToCollectionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="modal-enclosure" data-testid="create-equipment-form" @submit.prevent="submitForm">
+  <form class="modal-enclosure" data-testid="add-to-collection-form" @submit.prevent="submitForm">
     <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
       <template #header> Add to collections </template>
       <template #body>

webapp/src/components/DynamicButtonDataTable.vue

@@ -57,6 +57,7 @@
       <button
         v-if="itemsSelected.length > 0"
         class="btn btn-default ml-2"
+        data-testid="delete-selected-button"
         :disabled="itemsSelected.length === 0"
         @click="confirmDeletion"
       >
@@ -69,6 +70,7 @@
         </InputIcon>
         <InputText
           v-model="localFilters.global.value"
+          data-testid="search-input"
           placeholder="Search"
           @input="updateFilters"
         />

webapp/src/components/DynamicDataTable.vue

@@ -7,9 +7,9 @@
     <DataTable
       v-model:filters="filters"
       v-model:selection="itemsSelected"
-      data-testid="sample-table"
       selection-mode="multiple"
       :value="data"
+      :data-testid="computedDataTestId"
       paginator
       :rows="20"
       :rows-per-page-options="[10, 20, 50, 100]"
@@ -169,15 +169,27 @@ export default {
       allowedTypes: INVENTORY_TABLE_TYPES,
     };
   },
+  computed: {
+    computedDataTestId() {
+      const dataTestIdMap = {
+        samples: "sample-table",
+        collections: "collection-table",
+        startingMaterials: "starting-material-table",
+        equipments: "equipment-table",
+      };
+      return dataTestIdMap[this.dataType] || "default-table";
+    },
+  },
   created() {
     this.editable_inventory = EDITABLE_INVENTORY;
   },
+
   methods: {
     goToEditPage(event) {
       const { item_id, collection_id } = event.data;
 
       if (item_id) {
-        window.open(`/edit/${item_id}`, "_blank");
+        this.$router.push(`/edit/${item_id}`);
       } else if (collection_id) {
         window.open(`/collections/${collection_id}`, "_blank");
       }
@@ -187,7 +199,7 @@ export default {
         FormattedItemName: {
           item_id: data.item_id !== undefined ? "item_id" : "collection_id",
           itemType: "type",
-          enableClick: true,
+          enableModifiedClick: true,
         },
         ChemicalFormula: {
           formula: "chemform",