OH2-358 | Add cypress e2e tests to cover operation types (admin/types…

…/operations) (#633)

* Add cypress e2e tests to cover operation types (admin/types/operations)

* Review corrections

* Files  organisation

* typo correction

cypress/integrations/admin_activities/types_activities/operations_activities/add_operation_activity.cy.ts

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+const OPERATION_TYPE_STARTS_PATH = "/admin/types/operations";
+
+describe("Add operation type Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(OPERATION_TYPE_STARTS_PATH);
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+
+  it("should show operation type creation form", () => {
+    cy.dataCy("add-operation-type").click();
+    cy.dataCy("sub-operation-title").contains("New operation type");
+  });
+
+  it("should fail to create a new operation type", () => {
+    cy.byId("code").type("FAIL");
+    cy.byId("description").type("Operation type");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("info-box").contains("Fail");
+  });
+
+  it("should successfully create a new operation type", () => {
+    cy.byId("code").clear().type("22");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").contains(
+      "The operation type has been created successfully!"
+    );
+    cy.dataCy("approve-dialog").click();
+  });
+
+  it("should redirect after operation type creation", () => {
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+
+  it("should cancel the cancellation of the operation type creation", () => {
+    cy.dataCy("add-operation-type").click();
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains(
+      "Are you sure to cancel the operation type creation?"
+    );
+    cy.dataCy("close-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should cancel the operation type creation", () => {
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+});

cypress/integrations/admin_activities/types_activities/operations_activities/delete_operation_activity.cy.ts

@@ -0,0 +1,50 @@
+/// <reference types="cypress" />
+
+const OPERATION2_TYPES_START_PATH = "/admin/types/operations";
+
+describe("Operation Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(OPERATION2_TYPES_START_PATH);
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+
+  it("should present the table with four rows", () => {
+    cy.dataCy("operation-types-table")
+      .find("table")
+      .then(($table) => {
+        const rows = $table.find("tbody tr");
+        expect(rows.length).equal(9);
+      });
+  });
+
+  it("should display the deletion dialog", () => {
+    cy.dataCy("table-delete-action").first().click();
+    cy.dataCy("dialog-info").contains("Are you sure to delete item with code");
+  });
+
+  it("should cancel the operation deletion", () => {
+    cy.dataCy("close-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("operation-types-table")
+      .find("table")
+      .then(($table) => {
+        const rows = $table.find("tbody tr");
+        expect(rows.length).equal(9);
+      });
+  });
+
+  it("should delete the operation", () => {
+    cy.dataCy("table-delete-action").first().click();
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("dialog-info").contains(
+      "The operation type has been deleted successfully!"
+    );
+    cy.dataCy("approve-dialog").last().click();
+    cy.dataCy("operation-types-table")
+      .find("table")
+      .then(($table) => {
+        const rows = $table.find("tbody tr");
+        expect(rows.length).equal(8);
+      });
+  });
+});

cypress/integrations/admin_activities/types_activities/operations_activities/edit_operation_activity.cy.ts

@@ -0,0 +1,50 @@
+/// <reference types="cypress" />
+
+const OPERATION_TYPE_START_PATH = "/admin/types/operations";
+
+describe("Operation types Edit Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(OPERATION_TYPE_START_PATH);
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+
+  it("should show operation type edit form", () => {
+    cy.dataCy("table-edit-action").first().click();
+    cy.dataCy("sub-operation-title").contains("Edit operation type");
+  });
+
+  it("should fail to edit the operation type", () => {
+    cy.byId("code").should("be.disabled");
+    cy.byId("description").clear();
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should successfully save operation type changes", () => {
+    cy.byId("description").clear().type("Operation type");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").contains("has been updated successfully!");
+    cy.dataCy("approve-dialog").click();
+  });
+
+  it("should redirect after operation type update", () => {
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+
+  it("should cancel the cancellation of the operation type update", () => {
+    cy.dataCy("table-edit-action").first().click();
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains(
+      "Are you sure to cancel the operation type update?"
+    );
+    cy.dataCy("close-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should cancel the operation type update", () => {
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+});

cypress/integrations/admin_activities/types_activities/operations_activities/manage_operations_activity.cy.ts

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+
+const OPERATION_TYPES_START_PATH = "/admin/types/operations";
+
+describe("Operation types Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(OPERATION_TYPES_START_PATH);
+    cy.dataCy("sub-operation-title").contains("Manage operation types");
+  });
+
+  it("should present the table with four rows", () => {
+    cy.dataCy("operation-types-table")
+      .find("table")
+      .then(($table) => {
+        const rows = $table.find("tbody tr");
+        expect(rows.length).equal(9);
+      });
+  });
+});

src/components/accessories/admin/types/components/operations/OperationTypes.tsx

@@ -40,9 +40,9 @@ const OperationTypes = () => {
   const { t } = useTranslation();
   return (
     <>
-      <h3>{t("operationTypes.title")}</h3>
+      <h3 data-cy="sub-operation-title">{t("operationTypes.title")}</h3>
 
-      <div className="operationTypes">
+      <div className="operationTypes" data-cy="operation-types-table">
         <OperationTypesTable
           onEdit={handleEdit}
           onDelete={handleDelete}
@@ -54,6 +54,7 @@ const OperationTypes = () => {
               type="button"
               variant="contained"
               color="primary"
+              dataCy="add-operation-type"
             >
               {t("operationTypes.addOperationType")}
             </Button>

src/components/accessories/admin/types/components/operations/editOperationType/EditOperationType.tsx

@@ -7,7 +7,7 @@ import { IState } from "../../../../../../../types";
 import { ApiResponse } from "../../../../../../../state/types";
 import { updateOperationType } from "../../../../../../../state/types/operations/actions";
 import { PATHS } from "../../../../../../../consts";
-import { setTypeMode } from "../../../../../../../state/types/config";
+import { setTypeMode, TypeMode } from "../../../../../../../state/types/config";
 import "./styles.scss";
 import OperationTypeForm from "../operationTypesForm/OperationTypeForm";
 import { getInitialFields } from "../operationTypesForm/consts";
@@ -21,21 +21,29 @@ export const EditOperationType = () => {
     (state) => state.types.operations.update
   );
 
+  const mode = useSelector<IState, TypeMode>(
+    (state) => state.types.config.mode
+  );
+
   const handleSubmit = (code: string, value: OperationTypeDTO) => {
     dispatch(updateOperationType(code, value));
   };
 
   useEffect(() => {
-    dispatch(setTypeMode("edit"));
-  });
+    if (mode !== "edit") {
+      dispatch(setTypeMode("edit"));
+    }
+  }, [mode, dispatch]);
 
   if (state?.code !== code) {
     return <Navigate to={PATHS.admin_operations_types} />;
   }
 
   return (
     <div className="editOperationType">
-      <h3 className="title">{t("operationTypes.editOperationType")}</h3>
+      <h3 className="title" data-cy="sub-operation-title">
+        {t("operationTypes.editOperationType")}
+      </h3>
       <OperationTypeForm
         creationMode={false}
         onSubmit={handleSubmit}

src/components/accessories/admin/types/components/operations/newOperationType/NewOperationType.tsx

@@ -26,7 +26,7 @@ export const NewOperationType = () => {
   };
 
   return (
-    <div className="newOperationType">
+    <div className="newOperationType" data-cy="sub-operation-title">
       <h3 className="title">{t("operationTypes.addOperationType")}</h3>
       <OperationTypeForm
         creationMode

src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx

@@ -140,7 +140,12 @@ const OperationTypeForm: FC<IOperationTypeFormProps> = ({
 
         <div className="operationTypesForm__buttonSet">
           <div className="submit_button">
-            <Button type="submit" variant="contained" disabled={isLoading}>
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={isLoading}
+              dataCy="submit-form"
+            >
               {submitButtonLabel}
             </Button>
           </div>
@@ -150,6 +155,7 @@ const OperationTypeForm: FC<IOperationTypeFormProps> = ({
               variant="text"
               disabled={isLoading}
               onClick={() => setOpenResetConfirmation(true)}
+              dataCy="cancel-form"
             >
               {resetButtonLabel}
             </Button>