Add simple test for adding sample to collection then checking sample …

…page

webapp/cypress/e2e/sampleTablePage.cy.js

@@ -31,14 +31,18 @@ let sample_ids = [
   "component4",
 ];
 
+let collection_ids = ["test_collection"];
+
 before(() => {
   cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
+  cy.removeAllTestCollections(collection_ids, true);
 });
 
 after(() => {
   cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
+  cy.removeAllTestCollections(collection_ids, true);
 });
 
 describe("Sample table page", () => {
@@ -301,4 +305,20 @@ describe.only("Advanced sample creation features", () => {
       .should("have.value", "100"); // eq(1) gets the second element that matches
     cy.get("#synthesis-information tbody tr:nth-of-type(3) input").eq(0).should("have.value", ""); // eq(1) gets the second element that matches
   });
+  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.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(() => {
+      cy.findByText("Submit").click();
+    });
+    // Visit collections page and look for 'test_collection'
+    cy.visit("/collections");
+    // Visit edit page of collection and check that the sample is there
+    cy.findByText("test_collection").click();
+    cy.findByText(test_id).should("exist");
+  });
 });

webapp/cypress/support/commands.js

@@ -96,6 +96,15 @@ Cypress.Commands.add("deleteSamples", (items_id) => {
   });
 });
 
+Cypress.Commands.add("deleteCollectionViaAPI", (collection_id) => {
+  cy.log("search for and delete: " + collection_id);
+  cy.request({
+    method: "DELETE",
+    url: API_URL + "/collections/" + collection_id,
+    failOnStatusCode: false,
+  });
+});
+
 Cypress.Commands.add("deleteSampleViaAPI", (item_id) => {
   cy.log("search for and delete: " + item_id);
   cy.request({
@@ -220,3 +229,16 @@ Cypress.Commands.add("removeAllTestSamples", (item_ids, check_sample_table) => {
     });
   }
 });
+
+Cypress.Commands.add("removeAllTestCollections", (collection_ids, check_collection_table) => {
+  collection_ids.forEach((collection_id) => {
+    cy.deleteCollectionViaAPI(collection_id);
+  });
+
+  if (check_collection_table) {
+    cy.visit("/collections").then(() => {
+      // The test ID of the collection table is still 'sample table'
+      cy.get("[data-testid=sample-table] > tbody > tr").should("have.length", 0);
+    });
+  }
+});

webapp/src/components/AddToCollectionModal.vue

@@ -19,11 +19,11 @@
         </div>
         <div class="form-row">
           <div class="col-md-12 form-group">
-            <label for="collection-select">Insert into collection:</label>
+            <label id="addToCollectionLabel">Insert into collection:</label>
             <CollectionSelect
               id="collection-select"
-              v-model="startInCollection"
-              aria-labelledby="startInCollection"
+              v-model="addToCollection"
+              aria-labelledby="addToCollectionLabel"
               multiple
             />
           </div>
@@ -62,13 +62,13 @@ export default {
   emits: ["update:modelValue", "itemsUpdated"],
   data() {
     return {
-      startInCollection: [],
+      addToCollection: [],
     };
   },
   methods: {
     async submitForm() {
       try {
-        const collectionIds = this.startInCollection.map((collection) => collection.collection_id);
+        const collectionIds = this.addToCollection.map((collection) => collection.collection_id);
         const refcodes = this.itemsSelected.map((item) => item.refcode);
 
         for (const collectionId of collectionIds) {