[New] Added test cases for pages admin form builder components transl…

app/javascript/components/form/components/form-section-field.jsx

@@ -49,7 +49,7 @@ const FormSectionField = ({ checkErrors, field, formMethods, formMode, disableUn
   return (
     handleVisibility() || (
       <ConditionalWrapper condition={Boolean(WrapWithComponent)} wrapper={WrapWithComponent}>
-        <div className={classes} data-testid="form-section-field">
+        <div data-testid="form-section-field" className={classes}>
           {renderField}
         </div>
       </ConditionalWrapper>

app/javascript/components/page-navigation/component.jsx

@@ -47,7 +47,9 @@ const Component = ({ handleToggleNav, menuList = [], mobileDisplay = false, sele
 
   return (
     <ConditionalWrapper condition={mobileDisplay} wrapper={Drawer} {...drawerProps}>
-      <List component="nav" data-testid="list">{renderList}</List>
+      <List component="nav" data-testid="list">
+        {renderList}
+      </List>
     </ConditionalWrapper>
   );
 };

app/javascript/components/pages/admin/form-builder/components/translations-form/components/field-translation-row/component.spec.js

@@ -0,0 +1,48 @@
+// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+
+import { fromJS } from "immutable";
+
+import { mountedFormComponent, screen } from "../../../../../../../../test-utils";
+
+import FieldTranslationRow from "./component";
+
+describe("<FieldTranslationRow />", () => {
+
+  const field1 = {
+    name: "field_1",
+    display_name: { fr: "Field 1", ar: "Field 1", en: "Field 1" },
+    type: "text_field"
+  };
+
+  const state = fromJS({
+    application: { primero: { locales: ["en", "fr", "ar"] } },
+    records: {
+      admin: {
+        forms: {
+          selectedFields: [
+            field1,
+            {
+              name: "field_2",
+              display_name: { en: "Field 2" }
+            }
+          ]
+        }
+      }
+    }
+  });
+
+  const props = { field: fromJS(field1), selectedLocaleId: "fr", formMode: {}, formMethods: {} };
+
+  it("should render the <FormSectionField /> for the fr language", () => {
+    mountedFormComponent(<FieldTranslationRow {...props} />, { state });
+    expect(document.getElementById('fields.field_1.display_name.en')).toBeInTheDocument();
+    expect(document.getElementById('fields.field_1.display_name.fr')).toBeInTheDocument();
+  });
+
+  it("should render the <FormSectionField /> for the ar language", () => {
+    const arProps = { field: fromJS(field1), selectedLocaleId: "ar", formMode: {}, formMethods: {} };
+    mountedFormComponent(<FieldTranslationRow {...arProps} />, { state });
+    expect(document.getElementById('fields.field_1.display_name.en')).toBeInTheDocument();
+    expect(document.getElementById('fields.field_1.display_name.ar')).toBeInTheDocument();
+  });
+});

app/javascript/components/pages/admin/lookups-form/components/draggable-row/component.jsx

@@ -53,7 +53,13 @@ const Component = ({
   );
 
   return (
-    <Draggable data-testid="draggable" key={uniqueId} draggableId={uniqueId} index={index} isDragDisabled={isDragDisabled}>
+    <Draggable
+      data-testid="draggable"
+      key={uniqueId}
+      draggableId={uniqueId}
+      index={index}
+      isDragDisabled={isDragDisabled}
+    >
       {provider => {
         return (
           <div ref={provider.innerRef} {...provider.draggableProps} {...provider.dragHandleProps} className={css.row}>

app/javascript/components/pages/admin/roles-form/forms/action-buttons.spec.js

@@ -1,5 +1,4 @@
 import { fromJS } from "immutable";
-import { Button } from "@material-ui/core";
 
 import { ACTIONS } from "../../../../permissions";
 import { mountedComponent, screen } from "../../../../../test-utils";
@@ -16,50 +15,45 @@ describe("<ActionButtons />", () => {
 
   describe("when isShow mode", () => {
     describe("when the user has write permissions on roles", () => {
-
-
       it("should render the edit button only", () => {
-        mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("show") }} />,  fromJS({
+        mountedComponent(
+          <ActionButtons {...{ ...defaultProps, formMode: whichFormMode("show") }} />,
+          fromJS({
             user: {
               permissions: {
                 roles: [ACTIONS.WRITE]
               }
             }
-          }))
-          expect(screen.getByRole('button')).toBeInTheDocument();
-          expect(screen.getByText('buttons.edit')).toBeInTheDocument();
-
+          })
+        );
+        expect(screen.getByRole("button")).toBeInTheDocument();
+        expect(screen.getByText("buttons.edit")).toBeInTheDocument();
       });
     });
 
     describe("when the user doesn't have write permissions on roles", () => {
-
       it("should not render the edit button", () => {
-        mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("show") }} />,  fromJS({}))
-          expect(screen.queryAllByRole('button')).toHaveLength(0);
+        mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("show") }} />, fromJS({}));
+        expect(screen.queryAllByRole("button")).toHaveLength(0);
       });
     });
   });
 
   describe("when isEdit mode", () => {
-
     it("should render cancel and save buttons only", () => {
-        mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("edit") }} />,  fromJS({}))
-        expect(screen.getAllByRole('button')).toHaveLength(2);
-        expect(screen.getByText('buttons.cancel')).toBeInTheDocument();
-        expect(screen.getByText('buttons.save')).toBeInTheDocument();
-
-
+      mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("edit") }} />, fromJS({}));
+      expect(screen.getAllByRole("button")).toHaveLength(2);
+      expect(screen.getByText("buttons.cancel")).toBeInTheDocument();
+      expect(screen.getByText("buttons.save")).toBeInTheDocument();
     });
   });
 
   describe("when isNew mode", () => {
-
     it("should render cancel and save buttons", () => {
-        mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("new") }} />,  fromJS({}))
-        expect(screen.getAllByRole('button')).toHaveLength(2);
-        expect(screen.getByText('buttons.cancel')).toBeInTheDocument();
-        expect(screen.getByText('buttons.save')).toBeInTheDocument();
+      mountedComponent(<ActionButtons {...{ ...defaultProps, formMode: whichFormMode("new") }} />, fromJS({}));
+      expect(screen.getAllByRole("button")).toHaveLength(2);
+      expect(screen.getByText("buttons.cancel")).toBeInTheDocument();
+      expect(screen.getByText("buttons.save")).toBeInTheDocument();
     });
   });
 });

app/javascript/components/pages/admin/roles-form/forms/associated-roles.spec.js

@@ -9,6 +9,7 @@ describe("pages/admin/<RolesForm>/forms - AssociatedRolesForm", () => {
 
   it("returns the AssociatedRolesForm with fields", () => {
     const roleForms = AssociatedRolesForm(fromJS([]), i18n);
+
     expect(roleForms.fields).toHaveLength(2);
   });
 });

app/javascript/components/pages/errors/not-authorized/component.spec.js

@@ -3,7 +3,6 @@ import { mountedComponent, screen } from "../../../../test-utils";
 import NotAuthorized from "./component";
 
 describe("<NotAuthorized />", () => {
-
   it("renders h1 tag", () => {
     mountedComponent(<NotAuthorized />, {});
     expect(screen.getByText(/error_page.not_authorized.code/i)).toBeInTheDocument();

app/javascript/components/pages/errors/not-found/component.spec.js

@@ -3,7 +3,6 @@ import { mountedComponent, screen } from "../../../../test-utils";
 import NotFound from "./component";
 
 describe("<NotFound />", () => {
-
   it("renders h1 tag", () => {
     mountedComponent(<NotFound />, {});
     expect(screen.getByText(/error_page.not_found.code/i)).toBeInTheDocument();

app/javascript/components/record-actions/toggle-open/component.spec.js

@@ -8,7 +8,6 @@ import { RECORD_PATH } from "../../../config";
 import ToggleOpen from "./component";
 
 describe("<ToggleOpen />", () => {
-
   const record = fromJS({
     id: "03cdfdfe-a8fc-4147-b703-df976d200977",
     case_id: "1799d556-652c-4ad9-9b4c-525d487b5e7b",
@@ -27,17 +26,17 @@ describe("<ToggleOpen />", () => {
   };
 
   it("renders ToggleOpen", () => {
-    mountedComponent(<ToggleOpen {...props} />)
+    mountedComponent(<ToggleOpen {...props} />);
     expect(screen.getByText(/cases.reopen_dialog_title/i)).toBeInTheDocument();
   });
 
   it("renders ActionDialog", () => {
-    mountedComponent(<ToggleOpen {...props} />)
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    mountedComponent(<ToggleOpen {...props} />);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
   });
 
   it("renders component with valid props", () => {
-    mountedComponent(<ToggleOpen {...props} />)
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    mountedComponent(<ToggleOpen {...props} />);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
   });
 });

app/javascript/components/record-form/form/subforms/subform-drawer/component.jsx

@@ -12,7 +12,13 @@ import css from "./styles.css";
 
 const Component = ({ open, cancelHandler, children, title }) => {
   return (
-    <Drawer data-testid="drawer" anchor="right" open={open} onClose={cancelHandler} classes={{ paper: css.subformDrawer }}>
+    <Drawer
+      data-testid="drawer"
+      anchor="right"
+      open={open}
+      onClose={cancelHandler}
+      classes={{ paper: css.subformDrawer }}
+    >
       <div className={css.subformDrawerContent}>
         <div className={css.title}>
           <h1>{title}</h1>

app/javascript/components/record-form/form/subforms/subform-drawer/component.spec.js

@@ -3,7 +3,6 @@ import { mountedComponent, screen } from "../../../../../test-utils";
 import SubformDrawer from "./component";
 
 describe("<RecordForm>/form/subforms/<SubformDrawer>", () => {
-
   const props = { open: true, children: "" };
 
   it("should render the subform drawer", () => {

app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/component.spec.js

@@ -58,6 +58,5 @@ describe("<RecordForm>/form/subforms/<SubformFields>/components/<ViolationItem /
 
     mountedComponent(<ViolationItem {...props} />, initialState);
     expect(screen.getByTestId("violation-item")).toBeInTheDocument();
-
   });
 });

app/javascript/components/reports-form/container.spec.js

@@ -98,6 +98,7 @@ describe("<ReportsForm /> - Container", () => {
 
   beforeEach(() => {
     const props = { mode: "new" };
+
     mountedComponent(<ReportsForm {...props} />, initialState);
   });
 

app/javascript/components/transitions/assignments/AssignmentsSummary.jsx

@@ -21,7 +21,9 @@ const AssignmentsSummary = ({ transition, classes }) => {
     <Grid container spacing={2}>
       <Grid item md={6} xs={10}>
         <div className={classes.wrapper} data-testid="wrapper">
-          <div className={classes.date} data-testid="date">{i18n.localizeDate(transition.created_at)}</div>
+          <div className={classes.date} data-testid="date">
+            {i18n.localizeDate(transition.created_at)}
+          </div>
           <div className={classes.titleHeader}>{i18n.t("transition.type.assign")}</div>
         </div>
       </Grid>

app/javascript/components/user-actions/component.spec.js

@@ -22,7 +22,6 @@ describe("<UserActions>", () => {
   });
 
   describe("when idp is used", () => {
-
     const props = { id: "1" };
 
     it("should render the Menu", () => {