From 7197976fd6b8a8f73c3a41f0fa69cf7ad4bdb40d Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 15 Jan 2025 16:47:20 +0100 Subject: [PATCH] Add create test --- .../cypress/e2e/helpers/formHelpers.js | 48 ++++++++ .../cypress/e2e/helpers/promptHelpers.js | 8 +- .../cypress/e2e/mandates.cy.js | 116 +++++++++++++++++- .../src/pages/admin/mandateDetail.tsx | 6 +- 4 files changed, 170 insertions(+), 8 deletions(-) diff --git a/src/Geopilot.Frontend/cypress/e2e/helpers/formHelpers.js b/src/Geopilot.Frontend/cypress/e2e/helpers/formHelpers.js index 97082a85..2873b656 100644 --- 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 index 1eb65825..328b283d 100644 --- 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 index 1d47d556..14793459 100644 --- 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 index f051ce04..0be7ad0a 100644 --- 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 (