@griddo/ax 1.68.7 → 1.69.0

package/src/__tests__/components/Fields/AnalyticsField/AnalyticsField.test.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import AnalyticsField from "@ax/components/Fields/AnalyticsField";
-import { IAnalytics } from "@ax/types";
-import { createStore, combineReducers } from "redux";
-import analyticsReducer from "../../../../__mocks__/reducers/analyticsState";
-import pageEditorReducer from "../../../../__mocks__/reducers/pageEditor";
+import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
+
+import { render, cleanup } from "../../../../../config/jest/test-utils";
+
+import AnalyticsField from "@ax/components/Fields/AnalyticsField";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
-import { render, cleanup } from "../../../../../config/jest/test-utils";
 
 const valuesMock = {
   contentSelect: "",
@@ -26,6 +25,9 @@ const analyticsMock = {
 
 afterEach(cleanup);
 
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+
 describe("AnalyticsField component rendering", () => {
   test("should render the component PageAnalytics", () => {
     const initialState = {
@@ -36,11 +38,13 @@ describe("AnalyticsField component rendering", () => {
     };
     const initialStore = {
       analytics: analyticsMock,
+      pageEditor: {
+        template: "BasicTemplate",
+      },
     };
-    const store = createStore(
-      combineReducers({ pageEditor: pageEditorReducer, analytics: analyticsReducer }),
-      initialStore
-    );
+
+    const store = mockStore(initialStore);
+
     const { getByText } = render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <AnalyticsField {...initialState} />
@@ -70,11 +74,13 @@ describe("AnalyticsField component rendering", () => {
     };
     const initialStore = {
       analytics: analyticsMock,
+      pageEditor: {
+        template: "BasicTemplate",
+      },
     };
-    const store = createStore(
-      combineReducers({ pageEditor: pageEditorReducer, analytics: analyticsReducer }),
-      initialStore
-    );
+
+    const store = mockStore(initialStore);
+
     const { getByText } = render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <AnalyticsField {...initialState} />
@@ -84,17 +90,3 @@ describe("AnalyticsField component rendering", () => {
     expect(getByText(/Add More Dimensions/i)).toBeInTheDocument();
   });
 });
-
-export interface IAnalyticsFieldProps {
-  value: IState;
-  template: string;
-  onChange: (value: IState) => void;
-  analytics: IAnalytics;
-}
-
-export interface IState {
-  contentSelect: string;
-  groupSelect: string;
-  dimensionsSelect: string[];
-  values: Record<string, string>;
-}

package/src/__tests__/components/Fields/CheckGroup/CheckGroup.test.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+import { render, cleanup, fireEvent, screen } from "@testing-library/react";
+
 import CheckGroup from "@ax/components/Fields/CheckGroup";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
-import "@testing-library/jest-dom";
-import { Simulate } from "react-dom/test-utils";
-import { render, cleanup, fireEvent, screen } from "@testing-library/react";
+
+import { parseTheme } from "@griddo/core";
 
 afterEach(cleanup);
 
@@ -15,6 +18,8 @@ const defaultProps = {
   onChange: jest.fn(),
 };
 
+const user = userEvent.setup();
+
 describe("CheckField component rendering", () => {
   it("should render the component with no CheckField", () => {
     render(
@@ -153,15 +158,9 @@ describe("CheckField events", () => {
     );
     expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(3);
     const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
-    fireEvent.change(checkFieldInputs[1], {
-      target: { value: "name", checked: true },
-    });
-    Simulate.change(checkFieldInputs[1]);
 
-    fireEvent.change(checkFieldInputs[2], {
-      target: { value: "surname", checked: true },
-    });
-    Simulate.change(checkFieldInputs[2]);
+    await user.type(checkFieldInputs[1], "name");
+    await user.type(checkFieldInputs[2], "surname");
 
     expect(onChangeMock).toHaveBeenCalledTimes(2);
     expect(onChangeMock).toBeCalledWith(["all"]);
@@ -204,17 +203,12 @@ describe("CheckField events", () => {
     expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(4);
 
     const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
-    fireEvent.change(checkFieldInputs[1], {
-      target: { value: "name", checked: true },
-    });
-    Simulate.change(checkFieldInputs[1]);
+
+    await user.type(checkFieldInputs[1], "name");
     expect(onChangeMock).toHaveBeenCalledTimes(1);
     expect(onChangeMock).toBeCalledWith(["name"]);
 
-    fireEvent.change(checkFieldInputs[2], {
-      target: { value: "surname", checked: true },
-    });
-    Simulate.change(checkFieldInputs[2]);
+    await user.type(checkFieldInputs[2], "surname");
     expect(onChangeMock).toHaveBeenCalledTimes(2);
     expect(onChangeMock).toBeCalledWith(["name", "surname"]);
   });
@@ -256,18 +250,12 @@ describe("CheckField events", () => {
     expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(4);
 
     const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
-    fireEvent.change(checkFieldInputs[1], {
-      target: { value: "name", checked: true },
-    });
-    Simulate.change(checkFieldInputs[1]);
+    await user.type(checkFieldInputs[1], "name");
 
     expect(onChangeMock).toHaveBeenCalledTimes(1);
     expect(onChangeMock).toBeCalledWith(["name"]);
 
-    fireEvent.change(checkFieldInputs[2], {
-      target: { value: "surname", checked: true },
-    });
-    Simulate.change(checkFieldInputs[2]);
+    await user.type(checkFieldInputs[2], "surname");
     expect(onChangeMock).toHaveBeenCalledTimes(2);
     expect(onChangeMock).toBeCalledWith(["surname"]);
   });

package/src/__tests__/components/Fields/MultiCheckSelectGroup/MultiCheckSelectGroup.test.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import Axios from "axios";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+import MultiCheckSelectGroup, { IMultiCheckSelectGroupProps } from "@ax/components/Fields/MultiCheckSelectGroup";
+
+afterEach(cleanup);
+
+jest.mock("axios");
+const mockedAxios = Axios as jest.MockedFunction<typeof Axios>;
+
+const defaultProps = mock<IMultiCheckSelectGroupProps>();
+
+describe("MultiCheckSelectGroup component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.value = {
+      NEWS_AREAS: [
+        {
+          label: "another page",
+          name: "another page",
+          value: 4168,
+        },
+      ],
+    };
+    defaultProps.elements = [
+      {
+        source: "NEWS_AREAS",
+        key: "NEWS_AREAS",
+        placeholder: "News Areas",
+        isGlobal: true,
+      },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MultiCheckSelectGroup {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const multiCheckSelectWrapper = screen.getByTestId("multi-check-select-wrapper");
+
+    expect(multiCheckSelectWrapper).toBeTruthy();
+  });
+});
+
+describe("onChange events", () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should call onChange", async () => {
+    const onChange = jest.fn();
+    defaultProps.value = {};
+    defaultProps.note = "lorem ipsum";
+    defaultProps.elements = [
+      {
+        source: "NEWS_AREAS",
+        key: "NEWS_AREAS",
+        placeholder: "News Areas",
+      },
+    ];
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MultiCheckSelectGroup {...defaultProps} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const data = {
+      data: [
+        {
+          value: 4168,
+          label: "another page",
+          name: "another page",
+        },
+        {
+          value: 4111,
+          label: "New Page",
+          name: "New Page",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    const { rerender } = render(Component);
+
+    const field = screen.getByTestId("field");
+
+    await act(async () => {
+      fireEvent.click(field);
+    });
+
+    rerender(Component);
+
+    const checkFieldInputs = screen.getAllByTestId("checkFieldInput");
+
+    await act(async () => {
+      fireEvent.click(checkFieldInputs[0]);
+    });
+
+    expect(onChange).toBeCalledWith({
+      NEWS_AREAS: [
+        {
+          label: "another page",
+          name: "another page",
+          value: 4168,
+        },
+      ],
+    });
+  });
+});