Fix cypress test with new classes

Author: BenjaminCharmes

webapp/cypress/e2e/editPage.cy.js

@@ -26,8 +26,7 @@ describe("Edit Page", () => {
   it("Loads the main page without any errors", () => {
     cy.findByText("About").should("exist");
     cy.findByText("Samples").should("exist");
-    cy.findByTestId("add-item-button").should("exist");
-    cy.findByText("# of blocks").should("exist");
+    cy.get('[data-testid="add-item-button"]').should("exist");
 
     cy.contains("Server Error. Sample list could not be retreived.").should("not.exist");
     expect(consoleSpy).not.to.be.called;
@@ -306,7 +305,7 @@ describe("Edit Page", () => {
     cy.findByText("Add a block").click();
     cy.get('[data-testid="add-block-dropdown"]').findByText("Raman spectroscopy").click();
     cy.findAllByText("Select a file:").eq(2).should("exist");
-    cy.get("select.file-select-dropdown")
+    cy.get('[data-testid="file-select-dropdown"]')
       .eq(2)
       .select("example_data_raman_labspec_raman_example.txt");
     cy.contains("label", "X axis").should("exist");

webapp/cypress/support/commands.js

@@ -318,10 +318,9 @@ Cypress.Commands.add("verifyStartingMaterial", (item_id, name = null, date = nul
 Cypress.Commands.add("expandIfCollapsed", (selector) => {
   cy.get(selector)
     .find("[data-testid=collapse-arrow]")
-    .parents(".datablock-header")
-    .then(($header) => {
-      if (!$header.hasClass("expanded")) {
-        cy.wrap($header).find("[data-testid=collapse-arrow]").click();
+    .then(($arrow) => {
+      if (!$arrow.hasClass("rotate-90")) {
+        cy.wrap($arrow).click();
       }
     });
 });

webapp/src/components/SynthesisInformation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="synthesis-information" class="mb-2">
+  <div id="synthesis-information" data-testid="synthesis-block" class="mb-2">
     <div class="d-flex align-items-center mb-2">
       <font-awesome-icon
         :icon="['fas', 'chevron-right']"