@griddo/ax 1.65.10 → 1.65.13

package/src/components/Fields/ArrayFieldGroup/index.test.tsx

@@ -0,0 +1,277 @@
+import React from "react";
+import ArrayFieldGroup from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import FieldsBehavior from "@ax/components/FieldsBehavior";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IProps>();
+
+describe("ArrayFieldGroup component rendering", () => {
+  it("should render the component with no items and button", async () => {
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ArrayFieldGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+  });
+
+  it("should render the component with ArrayFieldInline", async () => {
+    defaultProps.value = [
+      {
+        id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
+        semTitle: "dsa",
+        subjects: [
+          {
+            id: "3ae4be00-9216-422d-a841-0448e305af08",
+            subjTeachers: {
+              mode: "manual",
+              fixed: [4476, 4425],
+            },
+            subjTitle: "as",
+            subjType: "das",
+          },
+        ],
+      },
+    ];
+    const fieldProps = {
+      objKey: "semTitle",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Title",
+        type: "TextField",
+        key: "semTitle",
+        mandatory: "true",
+        isTitle: true,
+      },
+      title: "Title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
+    defaultProps.arrayType = "inline";
+
+    // rendering with innerFields in props
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ArrayFieldGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
+
+    const fieldProps2 = {
+      objKey: "semTitle",
+      fieldType: "TextField",
+      field: {
+        title: "Title",
+        type: "TextField",
+        key: "semTitle",
+        mandatory: "true",
+        isTitle: true,
+      },
+      title: "Title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps2} key={1} />];
+
+    // rendering without innerFields in props
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ArrayFieldGroup {...defaultProps} />
+      </ThemeProvider>
+    );
+  });
+
+  it("should render the component with ArrayFieldItem", async () => {
+    defaultProps.value = [
+      {
+        id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
+        semTitle: "dsa",
+        subjects: [
+          {
+            id: "3ae4be00-9216-422d-a841-0448e305af08",
+            subjTeachers: {
+              mode: "manual",
+              fixed: [4476, 4425],
+            },
+            subjTitle: "as",
+            subjType: "das",
+          },
+        ],
+      },
+    ];
+    const fieldProps = {
+      objKey: "semTitle",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Title",
+        type: "TextField",
+        key: "semTitle",
+        mandatory: "true",
+        isTitle: false,
+      },
+      title: "Title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: false,
+      theme: "default-theme",
+    };
+
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
+    defaultProps.arrayType = "item";
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ArrayFieldGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("arrayFieldItem")).toBeTruthy();
+
+    const fieldProps2 = {
+      objKey: "semTitle",
+      fieldType: "TextField",
+      field: {
+        title: "A Title",
+        type: "TextField",
+        key: "semTitle",
+        mandatory: "true",
+        isTitle: true,
+      },
+      title: "A Title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps2} key={1} />];
+
+    // rendering with isTitle true
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ArrayFieldGroup {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText("A Title")).toBeTruthy();
+  });
+});
+
+describe("ArrayFieldGroup component events", () => {
+  it("should call the onclick of the button", async () => {
+    defaultProps.value = [
+      {
+        id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
+        semTitle: "dsa",
+        subjects: [
+          {
+            id: "3ae4be00-9216-422d-a841-0448e305af08",
+            subjTeachers: {
+              mode: "manual",
+              fixed: [4476, 4425],
+            },
+            subjTitle: "as",
+            subjType: "das",
+          },
+        ],
+      },
+    ];
+
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: Record<string, unknown>[]) => void>;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ArrayFieldGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    fireEvent.click(screen.getByTestId("buttonLineInverse"));
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
+  it("should call the handleDelete with the button", async () => {
+    defaultProps.value = [
+      {
+        id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
+        semTitle: "dsa",
+        subjects: [
+          {
+            id: "3ae4be00-9216-422d-a841-0448e305af08",
+            subjTeachers: {
+              mode: "manual",
+              fixed: [4476, 4425],
+            },
+            subjTitle: "as",
+            subjType: "das",
+          },
+        ],
+      },
+    ];
+    const fieldProps = {
+      objKey: "semTitle",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Title",
+        type: "TextField",
+        key: "semTitle",
+        mandatory: "true",
+        isTitle: true,
+      },
+      title: "Title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
+    defaultProps.arrayType = "inline";
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: Record<string, unknown>[]) => void>;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ArrayFieldGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
+    fireEvent.click(screen.getByTestId("iconActionComponent"));
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});
+
+interface IProps {
+  value: Record<string, unknown>[];
+  name: string;
+  onChange: (value: Record<string, unknown>[]) => void;
+  innerFields: any[];
+  divider: { title: string; text: string };
+  arrayType: string;
+}

package/src/components/Fields/ArrayFieldGroup/index.tsx

@@ -49,7 +49,6 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
         {items &&
           items.map((item: any, index: number) => {
             const handleFieldChange = (newValue: Record<string, unknown>) => handleChange(newValue, index);
-
             return arrayType === "inline" ? (
               <ArrayFieldInline
                 key={item.id}

package/src/components/Fields/AsyncCheckGroup/index.test.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import axios from "axios";
+import AsyncCheckGroup from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, cleanup, act } from "@testing-library/react";
+import { ISite } from "@ax/types";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IAsyncCheckGroup>();
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+describe("AsyncCheckGroup component rendering", () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+  it("should render the component with 6 options", async () => {
+    const defaultSite = mock<ISite>();
+    defaultSite.id = 113;
+    defaultProps.site = defaultSite;
+    defaultProps.value = [3622];
+    const data = {
+      data: [
+        {
+          value: 3622,
+          name: "Home",
+        },
+        {
+          value: 3731,
+          name: "English child",
+        },
+        {
+          value: 3730,
+          name: "English Parent",
+        },
+        {
+          value: 3787,
+          name: "English test",
+        },
+        {
+          value: 3745,
+          name: "New Page",
+        },
+        {
+          value: 3784,
+          name: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncCheckGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getAllByTestId("checkFieldLabel")).toHaveLength(6);
+  });
+
+  it("should render the component with no options", async () => {
+    defaultProps.source = "source";
+    defaultProps.value = [];
+
+    const data = {
+      data: [],
+      status: 500,
+      statusText: "Internal Server Error",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncCheckGroup {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    expect(screen.queryByTestId("checkFieldLabel")).not.toBeTruthy();
+  });
+});
+
+interface IAsyncCheckGroup {
+  value: any[];
+  site?: ISite | null;
+  source: string;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  error?: boolean;
+  handleValidation?: (value: string | any[]) => void;
+  validators?: Record<string, unknown>;
+  fullHeight?: boolean;
+}

package/src/components/Fields/AsyncCheckGroup/index.tsx

@@ -22,7 +22,6 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
         let result = null;
         const siteID = site ? site.id : null;
         result = await checkgroups.getCheckGroupItems(siteID, source);
-
         if (result && isReqOk(result.status)) {
           return result.data;
         }
@@ -59,7 +58,8 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
     error && handleValidation && handleValidation(newArrayObject);
   };
 
-  const isChecked = (id: number) => safeValue.find((e: any) => (typeof e === "number" ? e === id : e.value === id));
+  const isChecked = (id: number) =>
+    safeValue.find((e: any) => (typeof e === "number" ? e === id : (e.value || e.id) === id));
 
   const checks =
     options &&
@@ -80,7 +80,7 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
 };
 
 interface IAsyncCheckGroup {
-  value: any[];
+  value: any[] | null;
   site?: ISite | null;
   source: string;
   onChange: (value: any) => void;