@griddo/ax 1.65.12 → 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;
         }
@@ -81,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;

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

@@ -0,0 +1,306 @@
+import React from "react";
+import axios from "axios";
+import "@testing-library/jest-dom";
+import AsyncSelect 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<IAsyncSelectProps>();
+
+const defaultSite = mock<ISite>();
+defaultSite.id = 113;
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+describe("AsyncSelect component rendering", () => {
+  test("should render the component AsyncSelect", async () => {
+    defaultProps.name = "texto de prueba";
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    expect(screen.getByTestId("asyncSelect")).toBeTruthy();
+  });
+});
+
+describe("AsyncSelect component events", () => {
+  test("should call the api and receive data in pages", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "pages";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.selectedContent = { id: 1 };
+    defaultProps.value = [3622, 3621];
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          label: "Home",
+        },
+        {
+          value: 3731,
+          label: "English child",
+        },
+        {
+          value: 3730,
+          label: "English Parent",
+        },
+        {
+          value: 3787,
+          label: "English test",
+        },
+        {
+          value: 3745,
+          label: "New Page",
+        },
+        {
+          value: 3784,
+          label: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("Home");
+  });
+
+  test("should call the api and receive data in pages with no selectedContent", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "pages";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.selectedContent = null;
+    defaultProps.value = 3622;
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          label: "Home",
+        },
+        {
+          value: 3731,
+          label: "English child",
+        },
+        {
+          value: 3730,
+          label: "English Parent",
+        },
+        {
+          value: 3787,
+          label: "English test",
+        },
+        {
+          value: 3745,
+          label: "New Page",
+        },
+        {
+          value: 3784,
+          label: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("Home");
+  });
+
+  test("should call the api and receive data in categories", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "categories";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.value = 3622;
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          label: "Home",
+        },
+        {
+          value: 3731,
+          label: "English child",
+        },
+        {
+          value: 3730,
+          label: "English Parent",
+        },
+        {
+          value: 3787,
+          label: "English test",
+        },
+        {
+          value: 3745,
+          label: "New Page",
+        },
+        {
+          value: 3784,
+          label: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("Home");
+  });
+
+  test("should call the api and not receiving data", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "categories";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+
+    const data = {
+      data: [],
+      status: 500,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).not.toHaveTextContent("Home");
+  });
+
+  test("should call the api with source", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "categories";
+    defaultProps.source = "source";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.value = 3787;
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          title: "Home",
+        },
+        {
+          value: 3731,
+          title: "English child",
+        },
+        {
+          value: 3730,
+          title: "English Parent",
+        },
+        {
+          value: 3787,
+          title: "English test",
+        },
+        {
+          value: 3745,
+          title: "New Page",
+        },
+        {
+          value: 3784,
+          title: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("English test");
+  });
+});
+
+interface IAsyncSelectProps {
+  name: string;
+  value: any;
+  entity?: string;
+  entityId?: string | number;
+  error?: boolean;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  site: ISite;
+  lang: string;
+  selectedContent: any;
+  mandatory?: boolean;
+  placeholder?: string;
+  filter?: any[];
+  options?: any;
+  source?: string;
+}