Reusable DataCard components

CHANGELOG.md

@@ -25,6 +25,7 @@
 - Use reusable form components for hydrogeology.
 - Replaced label for layer description quality.
 - Reduced number of seeded boreholes for development from 10'000 to 3'000.
+- Use reusable card components for hydrogeology.
 
 ### Fixed
 

src/client/cypress/e2e/editor/backfill.cy.js

@@ -5,6 +5,12 @@ import {
   startBoreholeEditing,
 } from "../helpers/testHelpers";
 import { setInput, setSelect } from "../helpers/formHelpers";
+import {
+  addItem,
+  startEditing,
+  saveForm,
+  deleteItem,
+} from "../helpers/buttonHelpers";
 
 describe("Backfill crud tests", () => {
   it("add, edit and delete backfills", () => {
@@ -27,10 +33,11 @@ describe("Backfill crud tests", () => {
     startBoreholeEditing();
 
     // select backfill tab
-    cy.get("[data-cy=completion-content-header-tab-Backfill]").click();
+    cy.get("[data-cy=completion-content-header-tab-backfill]").click();
     cy.wait("@backfill_GET");
 
     // add new backfill card
+    addItem("addFilling");
     cy.get('[data-cy="addFilling-button"]').click({ force: true });
     cy.wait("@codelist_GET");
 
@@ -42,7 +49,7 @@ describe("Backfill crud tests", () => {
     setSelect("materialId", 1);
 
     // save backfill
-    cy.get('[data-cy="save-icon"]').click();
+    saveForm();
 
     // check if backfill is saved
     cy.contains("123456");
@@ -52,18 +59,18 @@ describe("Backfill crud tests", () => {
     cy.contains("filter gravel");
 
     // edit backfill
-    cy.get('[data-cy="edit-icon"]').click({ force: true });
+    startEditing();
     cy.wait("@codelist_GET");
 
     setInput("fromDepth", "222");
 
     // close editing mask
-    cy.get('[data-cy="save-icon"]').click({ force: true });
+    saveForm();
     cy.contains("222");
     cy.contains("inactive");
 
     // delete backfill
-    cy.get('[data-cy="delete-icon"]').click({ force: true });
+    deleteItem();
     cy.contains("From depth").should("not.exist");
   });
 });

src/client/cypress/e2e/editor/casing.cy.js

@@ -9,6 +9,12 @@ import {
   setInput,
   setSelect,
 } from "../helpers/formHelpers";
+import {
+  addItem,
+  startEditing,
+  saveForm,
+  deleteItem,
+} from "../helpers/buttonHelpers";
 
 describe("Casing crud tests", () => {
   it("add, edit and delete casings", () => {
@@ -31,11 +37,11 @@ describe("Casing crud tests", () => {
     startBoreholeEditing();
 
     // select casing tab
-    cy.get("[data-cy=completion-content-header-tab-Casing]").click();
+    cy.get("[data-cy=completion-content-header-tab-casing]").click();
     cy.wait("@casing_GET");
 
     // create casing
-    cy.get('[data-cy="addCasing-button"]').click();
+    addItem("addCasing");
     cy.wait("@codelist_GET");
 
     setInput("name", "casing-1");
@@ -49,7 +55,7 @@ describe("Casing crud tests", () => {
     setInput("outerDiameter", "4");
     setInput("notes", "Lorem.");
 
-    cy.get('[data-cy="save-icon"]').click();
+    saveForm();
     cy.wait("@casing_GET");
 
     evaluateDisplayValue("name", "casing-1");
@@ -59,28 +65,28 @@ describe("Casing crud tests", () => {
     evaluateDisplayValue("materialCasingLayer", "steel");
     evaluateDisplayValue("dateStartCasing", "01. Jan. 2021");
     evaluateDisplayValue("dateFinishCasing", "02. Jan. 2021");
-    evaluateDisplayValue("casing_inner_diameter", "3");
-    evaluateDisplayValue("casing_outer_diameter", "4");
+    evaluateDisplayValue("casingInnerDiameter", "3");
+    evaluateDisplayValue("casingOuterDiameter", "4");
     evaluateDisplayValue("notes", "Lorem.");
 
     // update casing
-    cy.get('[data-cy="edit-icon"]').click();
+    startEditing();
     cy.wait("@codelist_GET");
 
     setInput("name", "casing-1 updated");
     setSelect("materialId", 5);
 
-    cy.get('[data-cy="save-icon"]').click({ force: true });
+    saveForm();
     evaluateDisplayValue("name", "casing-1 updated");
     evaluateDisplayValue("materialCasingLayer", "concrete");
-    evaluateDisplayValue("casing_inner_diameter", "3");
+    evaluateDisplayValue("casingInnerDiameter", "3");
 
     // delete casing
     // Precondition: instrumentation with reference to casing
-    cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click();
+    cy.get("[data-cy=completion-content-header-tab-instrumentation]").click();
     cy.wait("@instrumentation_GET");
 
-    cy.get('[data-cy="addInstrument-button"]').click({ force: true });
+    addItem("addInstrument");
     cy.wait("@casing_GET");
 
     setInput("notes", "Lorem.");
@@ -90,16 +96,16 @@ describe("Casing crud tests", () => {
     setSelect("kindId", 2);
     setSelect("statusId", 1);
     setSelect("casingId", 1);
-    cy.get('[data-cy="save-icon"]').click({ force: true });
+    saveForm();
 
-    cy.get("[data-cy=completion-content-header-tab-Casing]").click();
+    cy.get("[data-cy=completion-content-header-tab-casing]").click();
     cy.wait("@casing_GET");
 
-    cy.get('[data-cy="delete-icon"]').click({ force: true });
+    deleteItem();
     cy.wait("@casing_DELETE");
     cy.contains("casing-1 updated").should("not.exist");
 
-    cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click();
+    cy.get("[data-cy=completion-content-header-tab-instrumentation]").click();
     cy.wait("@instrumentation_GET");
     evaluateDisplayValue("casingName", "-");
   });

src/client/cypress/e2e/editor/completion.cy.js

@@ -14,6 +14,14 @@ import {
   evaluateCheckbox,
   evaluateDisplayValue,
 } from "../helpers/formHelpers";
+import {
+  addItem,
+  startEditing,
+  cancelEditing,
+  saveForm,
+  deleteItem,
+  copyItem,
+} from "../helpers/buttonHelpers";
 
 const toggleHeaderOpen = () => {
   cy.get('[data-cy="completion-header-display"]')
@@ -26,44 +34,28 @@ const toggleHeaderOpen = () => {
 };
 
 const addCompletion = () => {
-  cy.get('[data-cy="add-completion-button"]').click({
-    force: true,
-  });
+  addItem("addCompletion");
   cy.wait("@codelist_GET");
 };
 
-const startEditing = () => {
+const startEdit = () => {
   toggleHeaderOpen();
-  cy.get('[data-cy="edit-button"]').click({
-    force: true,
-  });
-};
-
-const cancelEditing = () => {
-  cy.get('[data-cy="cancel-button"]').click({
-    force: true,
-  });
+  startEditing();
 };
 
 const saveChanges = () => {
-  cy.get('[data-cy="save-button"]').click({
-    force: true,
-  });
+  saveForm();
   cy.wait("@get-completions-by-boreholeId");
 };
 
 const copyCompletion = () => {
   toggleHeaderOpen();
-  cy.get('[data-cy="copy-button"]').click({
-    force: true,
-  });
+  copyItem();
 };
 
 const deleteCompletion = () => {
   toggleHeaderOpen();
-  cy.get('[data-cy="delete-button"]').click({
-    force: true,
-  });
+  deleteItem();
 };
 
 const setTab = index => {
@@ -117,16 +109,16 @@ describe("completion crud tests", () => {
     cy.contains("Compl-1 (Clone)");
 
     // edit completion
-    startEditing();
+    startEdit();
     setSelect("kindId", 1);
     cancelEditing();
     cy.contains("telescopic");
-    startEditing();
+    startEdit();
     setInput("name", "Compl-2");
     toggleCheckbox("isPrimary");
     saveChanges();
     cy.contains("Compl-2");
-    startEditing();
+    startEdit();
     evaluateCheckbox("isPrimary", true);
     cancelEditing();
 
@@ -197,14 +189,14 @@ describe("completion crud tests", () => {
     isTabSelected(1);
 
     // check hash updates on tab switch
-    cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click();
+    cy.get("[data-cy=completion-content-header-tab-instrumentation]").click();
     cy.location().should(location => {
       expect(location.pathname).to.eq(
         `/editor/${boreholeId}/completion/${completion2Id}`,
       );
       expect(location.hash).to.eq("#instrumentation");
     });
-    cy.get("[data-cy=completion-content-header-tab-Backfill]").click();
+    cy.get("[data-cy=completion-content-header-tab-backfill]").click();
     cy.location().should(location => {
       expect(location.pathname).to.eq(
         `/editor/${boreholeId}/completion/${completion2Id}`,
@@ -214,7 +206,7 @@ describe("completion crud tests", () => {
 
     // switch tabs
     // existing editing to other existing: no prompt should be displayed when no changes have been made
-    startEditing();
+    startEdit();
     setTab(0);
     cy.get('[data-cy="prompt"]').should("not.exist");
     isTabSelected(0);
@@ -226,7 +218,7 @@ describe("completion crud tests", () => {
     });
 
     // existing editing to other existing: tab switching can be canceled in prompt
-    startEditing();
+    startEdit();
     setInput("name", "Compl-1 updated");
     setTab(1);
     handlePrompt("Unsaved changes", "cancel");
@@ -252,7 +244,7 @@ describe("completion crud tests", () => {
     });
 
     // existing editing to other existing: changes can be saved in prompt
-    startEditing();
+    startEdit();
     setInput("name", "Compl-2 updated");
     setTab(0);
     handlePrompt("Unsaved changes", "save");
@@ -339,7 +331,7 @@ describe("completion crud tests", () => {
       );
       expect(location.hash).to.eq("#casing");
     });
-    startEditing();
+    startEdit();
     cy.get(`[data-cy="name-formInput"]`).click();
     addCompletion();
     evaluateInput("name", "");
@@ -359,7 +351,7 @@ describe("completion crud tests", () => {
       );
       expect(location.hash).to.eq("#casing");
     });
-    startEditing();
+    startEdit();
     setInput("name", "Reset compl-1");
     addCompletion();
     handlePrompt("Unsaved changes", "reset");
@@ -377,7 +369,7 @@ describe("completion crud tests", () => {
       );
       expect(location.hash).to.eq("#casing");
     });
-    startEditing();
+    startEdit();
     setInput("name", "Reset compl-1");
     addCompletion();
     handlePrompt("Unsaved changes", "save");