Add create test

GeoWerkstatt · Jan 15, 2025 · 7197976 · 7197976
1 parent e4c3999
commit 7197976
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 8 deletions.
diff --git a/src/Geopilot.Frontend/cypress/e2e/helpers/formHelpers.js b/src/Geopilot.Frontend/cypress/e2e/helpers/formHelpers.js
@@ -48,6 +48,21 @@ export const setInput = (fieldName, value, parent) => {
     });
 };
 
+/**
+ * Evaluates the state of an input form element
+ * @param {string} fieldName The name of the input field.
+ * @param {number} expectedValue The expected value.
+ * @param {string} parent (optional) The parent of the form element.
+ */
+export const evaluateInput = (fieldName, expectedValue, parent) => {
+  const selector = createBaseSelector(parent) + `[data-cy="${fieldName}-formInput"] input`;
+  cy.get(selector)
+    .filter((k, input) => {
+      return input.value === expectedValue;
+    })
+    .should("have.length", 1);
+};
+
 /**
  * Opens the dropdown for a select form element.
  * @param {string} selector The selector for the form element.
@@ -114,3 +129,36 @@ export const toggleCheckbox = (fieldName, parent) => {
   const selector = createBaseSelector(parent) + `[data-cy="${fieldName}-formCheckbox"]`;
   cy.get(selector).click();
 };
+
+/**
+ * Sets the value for an autocomplete form element.
+ * @param {string} fieldName The name of the autocomplete field.
+ * @param {string} value The text to type into the input field.
+ * @param {string} parent (optional) The parent of the form element.
+ */
+export const setAutocomplete = (fieldName, value, parent) => {
+  const selector = createBaseSelector(parent) + `[data-cy="${fieldName}-formAutocomplete"]`;
+  cy.get(selector)
+    .click()
+    .then(() => {
+      cy.get(selector).type(value, {
+        delay: 10,
+      });
+      cy.get('.MuiPaper-elevation [role="listbox"]').find('[role="option"]').first().click();
+    });
+};
+
+/**
+ * Evaluates the state of an autocomplete form element.
+ * @param {string} fieldName The name of the autocomplete field.
+ * @param {string[]} expectedValues An array of expected values.
+ * @param {string} parent (optional) The parent of the form element. */
+export const evaluateAutocomplete = (fieldName, expectedValues, parent) => {
+  const selector = createBaseSelector(parent) + `[data-cy="${fieldName}-formAutocomplete"]`;
+  cy.get(selector).within(() => {
+    cy.get(".MuiChip-root").should("have.length", expectedValues.length);
+    expectedValues.forEach(value => {
+      cy.get(".MuiChip-root span").contains(value);
+    });
+  });
+};
diff --git a/src/Geopilot.Frontend/cypress/e2e/helpers/promptHelpers.js b/src/Geopilot.Frontend/cypress/e2e/helpers/promptHelpers.js
@@ -1,6 +1,6 @@
 /**
  * Checks if a prompt is visible.
- * @param visible
+ * @param {boolean} visible The expected visibility state.
  */
 export const isPromptVisible = (visible = true) => {
   if (visible) {
@@ -12,7 +12,7 @@ export const isPromptVisible = (visible = true) => {
 
 /**
  * Checks if a prompt is visible and contains the expected action buttons.
- * @param actions An array of action button labels.
+ * @param {string[]} actions An array of action button labels.
  */
 export const checkPromptActions = actions => {
   isPromptVisible();
@@ -26,8 +26,8 @@ export const checkPromptActions = actions => {
 
 /**
  * Handles a prompt by clicking the action button.
- * @param message Name of the prompt message label.
- * @param action Name of the action button label.
+ * @param {string} message Name of the prompt message label.
+ * @param {string} action Name of the action button label.
  */
 export const handlePrompt = (message, action) => {
   isPromptVisible();

diff --git a/src/Geopilot.Frontend/cypress/e2e/mandates.cy.js b/src/Geopilot.Frontend/cypress/e2e/mandates.cy.js
@@ -1,7 +1,17 @@
 import { isSelectedNavItem, loginAsAdmin, openTool } from "./helpers/appHelpers.js";
-import { setInput, setSelect } from "./helpers/formHelpers.js";
+import {
+  evaluateAutocomplete,
+  evaluateInput,
+  evaluateSelect,
+  hasError,
+  setAutocomplete,
+  setInput,
+  setSelect,
+} from "./helpers/formHelpers.js";
 import { checkPromptActions, handlePrompt, isPromptVisible } from "./helpers/promptHelpers.js";
 
+const getRandomManadateName = () => `Mandate-${Math.random().toString(36).substring(2, 15)}`;
+
 describe("Mandate tests", () => {
   beforeEach(() => {
     loginAsAdmin();
@@ -21,7 +31,7 @@ describe("Mandate tests", () => {
   });
 
   it("checks for unsaved changes when navigating", () => {
-    const randomMandateName = `Mandate-${Math.random().toString(36).substring(2, 15)}`;
+    const randomMandateName = getRandomManadateName();
 
     cy.get('[data-cy="addMandate-button"]').click();
     cy.location().should(location => {
@@ -85,4 +95,106 @@ describe("Mandate tests", () => {
     cy.get('[data-cy="mandates-grid"] .MuiTablePagination-actions [aria-label="Go to next page"]').click();
     cy.get('[data-cy="mandates-grid"] .MuiDataGrid-row').first().contains(randomMandateName);
   });
+
+  it("adds new mandate", () => {
+    const randomMandateName = getRandomManadateName();
+    cy.intercept({ url: "/api/v1/mandate", method: "POST" }).as("saveNew");
+
+    cy.get('[data-cy="addMandate-button"]').click();
+    cy.location().should(location => {
+      expect(location.pathname).to.eq(`/admin/mandates/0`);
+    });
+
+    cy.get('[data-cy="reset-button"]').should("be.disabled");
+    cy.get('[data-cy="save-button"]').should("be.disabled");
+
+    hasError("name", true);
+    hasError("extent-bottom-left-longitude", true);
+    hasError("extent-bottom-left-latitude", true);
+    hasError("extent-upper-right-longitude", true);
+    hasError("extent-upper-right-latitude", true);
+    hasError("precursor", true);
+    hasError("partialDelivery", true);
+    hasError("comment", true);
+
+    setInput("name", randomMandateName);
+    hasError("name", false);
+    cy.get('[data-cy="reset-button"]').should("be.enabled");
+
+    setInput("extent-bottom-left-longitude", "7.3");
+    hasError("extent-bottom-left-longitude", true);
+    hasError("extent-bottom-left-latitude", true);
+    hasError("extent-upper-right-longitude", true);
+    hasError("extent-upper-right-latitude", true);
+    setInput("extent-bottom-left-latitude", "47.13");
+    hasError("extent-bottom-left-longitude", true);
+    hasError("extent-bottom-left-latitude", true);
+    hasError("extent-upper-right-longitude", true);
+    hasError("extent-upper-right-latitude", true);
+    setInput("extent-upper-right-longitude", "8.052");
+    hasError("extent-bottom-left-longitude", true);
+    hasError("extent-bottom-left-latitude", true);
+    hasError("extent-upper-right-longitude", true);
+    hasError("extent-upper-right-latitude", true);
+    setInput("extent-upper-right-latitude", "47.46");
+    hasError("extent-bottom-left-longitude", false);
+    hasError("extent-bottom-left-latitude", false);
+    hasError("extent-upper-right-longitude", false);
+    hasError("extent-upper-right-latitude", false);
+    setSelect("precursor", 0, 3);
+    hasError("precursor", false);
+    setSelect("partialDelivery", 1, 2);
+    hasError("partialDelivery", false);
+    setSelect("comment", 1, 3);
+    hasError("comment", false);
+
+    hasError("extent-bottom-left-longitude", false);
+    hasError("extent-bottom-left-latitude", false);
+    hasError("extent-upper-right-longitude", false);
+    hasError("extent-upper-right-latitude", false);
+
+    cy.get('[data-cy="save-button"]').should("be.enabled");
+
+    setAutocomplete("organisations", "Brown and Sons");
+    evaluateAutocomplete("organisations", ["Brown and Sons"]);
+    setAutocomplete("fileTypes", ".csv");
+    setAutocomplete("fileTypes", ".xtf");
+    evaluateAutocomplete("fileTypes", [".csv", ".xtf"]);
+
+    cy.get('[data-cy="reset-button"]').click();
+    evaluateInput("name", "");
+    evaluateAutocomplete("organisations", []);
+    evaluateAutocomplete("fileTypes", []);
+    evaluateInput("extent-bottom-left-longitude", "");
+    evaluateInput("extent-bottom-left-latitude", "");
+    evaluateInput("extent-upper-right-longitude", "");
+    evaluateInput("extent-upper-right-latitude", "");
+    evaluateSelect("precursor", "");
+    evaluateSelect("partialDelivery", "");
+    evaluateSelect("comment", "");
+
+    setInput("name", randomMandateName);
+    setAutocomplete("organisations", "Brown and Sons");
+    setAutocomplete("fileTypes", ".csv");
+    setAutocomplete("fileTypes", ".xtf");
+    setInput("extent-bottom-left-longitude", "7.3");
+    setInput("extent-bottom-left-latitude", "47.13");
+    setInput("extent-upper-right-longitude", "8.052");
+    setInput("extent-upper-right-latitude", "47.46");
+    setSelect("precursor", 0, 3);
+    setSelect("partialDelivery", 1, 2);
+    setSelect("comment", 1, 3);
+
+    cy.get('[data-cy="save-button"]').click();
+    cy.wait("@saveNew");
+    cy.location().should(location => {
+      expect(location.pathname).to.match(/\/admin\/mandates\/[1-9]\d*/);
+    });
+
+    // TODO: Check if the new mandate can be edited right away.
+
+    cy.get('[data-cy="backToMandates-button"]').click();
+    cy.get('[data-cy="mandates-grid"] .MuiTablePagination-actions [aria-label="Go to next page"]').click();
+    cy.contains(randomMandateName);
+  });
 });
diff --git a/src/Geopilot.Frontend/src/pages/admin/mandateDetail.tsx b/src/Geopilot.Frontend/src/pages/admin/mandateDetail.tsx
@@ -157,9 +157,11 @@ export const MandateDetail = () => {
 
   // trigger form validation on mount
   useEffect(() => {
-    formMethods.trigger();
+    if (mandate) {
+      formMethods.trigger();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [formMethods.trigger]);
+  }, [mandate, formMethods.trigger]);
 
   return (
     <FlexBox>