@griddo/ax 1.69.9 → 1.72.1

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

@@ -2,7 +2,7 @@ import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
 
@@ -216,7 +216,7 @@ describe("onChange events", () => {
 
     const { rerender } = render(Component, { store });
 
-    let iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    let iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
       fireEvent.click(iconActionComponents[0]);
@@ -226,7 +226,7 @@ describe("onChange events", () => {
       rerender(Component);
     });
 
-    iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
       fireEvent.click(iconActionComponents[2]);
@@ -249,7 +249,7 @@ describe("onChange events", () => {
     await act(async () => {
       fireEvent.click(radioFieldInputs[5]);
 
-      const buttonDefault = screen.getByTestId("buttonDefault");
+      const buttonDefault = screen.getByTestId("button-default");
       fireEvent.click(buttonDefault);
     });
 
@@ -282,7 +282,7 @@ describe("onChange events", () => {
     let referenceFieldItems = screen.getAllByTestId("reference-field-item");
     expect(referenceFieldItems.length).toBe(2);
 
-    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
       fireEvent.click(iconActionComponents[0]);
@@ -297,7 +297,7 @@ describe("onChange events", () => {
 
     await act(async () => {
       fireEvent.click(manualPanelItem[4]);
-      fireEvent.click(screen.getByTestId("buttonDefault"));
+      fireEvent.click(screen.getByTestId("button-default"));
     });
 
     await act(async () => {
@@ -335,7 +335,7 @@ describe("onChange events", () => {
     let referenceFieldItems = screen.getAllByTestId("reference-field-item");
     expect(referenceFieldItems.length).toBe(2);
 
-    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
       fireEvent.click(iconActionComponents[0]);
@@ -351,7 +351,7 @@ describe("onChange events", () => {
     await act(async () => {
       fireEvent.click(manualPanelItem[0]);
       fireEvent.click(manualPanelItem[6]);
-      fireEvent.click(screen.getByTestId("buttonDefault"));
+      fireEvent.click(screen.getByTestId("button-default"));
     });
 
     await act(async () => {
@@ -403,7 +403,7 @@ describe("onChange events", () => {
 
     const { rerender } = render(Component, { store });
 
-    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
       fireEvent.click(iconActionComponents[0]);
@@ -413,7 +413,7 @@ describe("onChange events", () => {
       rerender(Component);
     });
 
-    let tagComponent = screen.getAllByTestId("tagComponent");
+    let tagComponent = screen.getAllByTestId("delete-icon-wrapper");
 
     expect(tagComponent.length).toBe(2);
 
@@ -425,7 +425,7 @@ describe("onChange events", () => {
       rerender(Component);
     });
 
-    tagComponent = screen.getAllByTestId("tagComponent");
+    tagComponent = screen.getAllByTestId("delete-icon-wrapper");
 
     expect(tagComponent.length).toBe(1);
   });
@@ -453,38 +453,188 @@ describe("onChange events", () => {
       rerender(Component);
     });
 
-    let iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems[0]).toHaveTextContent("Article 02");
+
+    const droppable = screen.getByTestId("droppable");
+    expect(droppable).toBeTruthy();
+
+    fireEvent.dragStart(referenceFieldItems[0]);
+    fireEvent.dragEnter(droppable);
+    fireEvent.dragOver(droppable);
+    fireEvent.drop(droppable);
+  });
+
+  test("should render the drag handle if list length is greater than two", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
 
     await act(async () => {
-      fireEvent.click(iconActionComponents[1]);
+      rerender(Component);
     });
 
+    const referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(2);
+    const handleWrappers = screen.getAllByTestId("handle-wrapper");
+    expect(handleWrappers.length).toEqual(2);
+  });
+
+  test("should delete items", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
     await act(async () => {
       rerender(Component);
     });
+    let referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(2);
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
 
+    await act(async () => {
+      fireEvent.click(iconActionComponents[2]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    const actionMenuItem = screen.getByTestId("action-menu-item");
+    await act(async () => {
+      fireEvent.click(actionMenuItem);
+    });
+
+    //   await act(async () => {
+    //     rerender(Component);
+    //   });
+
+    referenceFieldItems = screen.getAllByTestId("reference-field-item");
+=======
+    const referenceFieldItems = screen.getAllByTestId("reference-field-item");
+>>>>>>> release/1.72
+    expect(referenceFieldItems[0]).toHaveTextContent("Article 02");
+
+    const droppable = screen.getByTestId("droppable");
+    expect(droppable).toBeTruthy();
+
+    fireEvent.dragStart(referenceFieldItems[0]);
+    fireEvent.dragEnter(droppable);
+    fireEvent.dragOver(droppable);
+    fireEvent.drop(droppable);
+  });
+
+  test("should render the drag handle if list length is greater than two", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    const referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(2);
+    const handleWrappers = screen.getAllByTestId("handle-wrapper");
+    expect(handleWrappers.length).toEqual(2);
+  });
+
+  test("should hide the drag handle if list length is lower than two", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
     let referenceFieldItems = screen.getAllByTestId("reference-field-item");
-    expect(referenceFieldItems[0]).toHaveTextContent("Article 03");
+    expect(referenceFieldItems.length).toBe(2);
 
-    iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
-      fireEvent.click(iconActionComponents[3]);
+      fireEvent.click(iconActionComponents[2]);
     });
 
     await act(async () => {
       rerender(Component);
     });
 
+    const actionMenuItem = screen.getByTestId("action-menu-item");
+    await act(async () => {
+      fireEvent.click(actionMenuItem);
+    });
+
+    //   await act(async () => {
+    //     rerender(Component);
+    //   });
+
     referenceFieldItems = screen.getAllByTestId("reference-field-item");
     expect(referenceFieldItems[0]).toHaveTextContent("Article 02");
   });*/
 
-  test("should delete items", async () => {
+  test("should hide the drag handle if list length is lower than two", async () => {
     defaultProps.source = ["ARTICLES"];
     defaultProps.value = {
       mode: "manual",
-      fixed: [4492, 4493],
+      fixed: [],
     };
     const initialState = { ...initialStore, ...defaultProps };
     const onChange = jest.fn();
@@ -506,7 +656,7 @@ describe("onChange events", () => {
     let referenceFieldItems = screen.getAllByTestId("reference-field-item");
     expect(referenceFieldItems.length).toBe(2);
 
-    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
 
     await act(async () => {
       fireEvent.click(iconActionComponents[2]);
@@ -528,5 +678,7 @@ describe("onChange events", () => {
 
     referenceFieldItems = screen.getAllByTestId("reference-field-item");
     expect(referenceFieldItems.length).toBe(1);
+    const handleWrappers = screen.getAllByTestId("handle-wrapper");
+    expect(handleWrappers[0].hidden).toBe(true);
   });
 });

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

@@ -1,7 +1,7 @@
 import React from "react";
-import RichText from "@ax/components/Fields/RichText";
+import RichText, { IRichTextProps } from "@ax/components/Fields/RichText";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { mock } from "jest-mock-extended";
 import { render, screen, cleanup } from "@testing-library/react";
@@ -39,14 +39,3 @@ describe("RichText component rendering", () => {
     expect(richTextContent).toBeTruthy();
   });
 });
-
-interface IRichTextProps {
-  editorID: number;
-  value: string;
-  error?: boolean;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange: (value: string) => void;
-  handleValidation?: (value: string) => void;
-  html: boolean;
-}

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

@@ -1,7 +1,7 @@
 import * as React from "react";
-import Select from "@ax/components/Fields/Select";
+import Select, { ISelectProps } from "@ax/components/Fields/Select";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
@@ -24,7 +24,7 @@ describe("Select component rendering", () => {
         <Select {...defaultProps} />
       </ThemeProvider>
     );
-    expect(screen.getByTestId("selectComponent")).toBeTruthy();
+    expect(screen.getByTestId("select-component")).toBeTruthy();
   });
 
   test("should render the component with value selected", () => {
@@ -53,23 +53,3 @@ describe("Select component rendering", () => {
     expect(errors.length).toBe(1);
   });
 });
-
-interface ISelectProps {
-  name: string;
-  value: string;
-  options: IOptionProps[];
-  error?: boolean;
-  disabled?: boolean;
-  defaultValue?: IOptionProps;
-  placeholder?: string;
-  isMulti?: boolean;
-  type?: string;
-  mandatory?: boolean;
-  alignRight?: boolean;
-  onChange: (value: string) => void;
-}
-
-interface IOptionProps {
-  value: string;
-  label: string;
-}

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

@@ -1,7 +1,7 @@
 import * as React from "react";
-import SliderField from "@ax/components/Fields/SliderField";
+import SliderField, { ITextFieldProps } from "@ax/components/Fields/SliderField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
@@ -67,16 +67,3 @@ describe("Select component events trigger", () => {
     expect(onChangeMock).toBeCalledWith(20);
   });
 });
-
-interface ITextFieldProps {
-  title: string;
-  value: number;
-  defaultValue?: number;
-  min: number;
-  max: number;
-  step: number;
-  prefix?: string;
-  suffix?: string;
-  helptext?: string;
-  onChange: (value: number) => void;
-}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import TagField from "@ax/components/Fields/TagField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";
 
@@ -47,7 +47,7 @@ describe("TagField component", () => {
     const tagFieldInput = screen.getByTestId("tagFieldInput");
     expect(tagFieldInput).toBeTruthy();
 
-    const tagRendered = within(tagFieldWrapper).getAllByTestId("tagComponent");
+    const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
 
     const tagComponent = screen.getByTestId("tagFieldWrapper");
@@ -116,7 +116,7 @@ describe("TagField events", () => {
     );
 
     const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
-    const tagRendered = within(tagFieldWrapper).getAllByTestId("tagComponent");
+    const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
     fireEvent.click(tagRendered[0], 0);
     expect(onChange).toBeCalledTimes(1);

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

@@ -1,7 +1,7 @@
 import React from "react";
 import TextArea from "@ax/components/Fields/TextArea";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import TextField from "@ax/components/Fields/TextField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";
 
@@ -20,7 +20,7 @@ describe("TextField component rendering", () => {
       </ThemeProvider>
     );
 
-    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const textFieldContainer = screen.getByTestId("text-field-container");
     const inputComponent = screen.getByTestId("inputComponent");
 
     expect(textFieldContainer).toBeTruthy();
@@ -40,7 +40,7 @@ describe("TextField component rendering", () => {
       </ThemeProvider>
     );
 
-    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const textFieldContainer = screen.getByTestId("text-field-container");
     const inputComponent = screen.getByTestId("inputComponent");
     const prefix = screen.getByTestId("prefix");
     expect(textFieldContainer).toBeTruthy();
@@ -61,7 +61,7 @@ describe("TextField component rendering", () => {
       </ThemeProvider>
     );
 
-    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const textFieldContainer = screen.getByTestId("text-field-container");
     const inputComponent = screen.getByTestId("inputComponent");
     const backgroundIconComponent = screen.getByTestId("backgroundIconComponent");
 
@@ -83,7 +83,7 @@ describe("TextField component rendering", () => {
       </ThemeProvider>
     );
 
-    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const textFieldContainer = screen.getByTestId("text-field-container");
     const inputComponent = screen.getByTestId("inputComponent");
     const iconWrapperComponent = screen.getByTestId("iconWrapperComponent");
 
@@ -135,7 +135,7 @@ describe("onClick from buttons", () => {
 
     const iconWrapperComponent = screen.getByTestId("iconWrapperComponent");
     expect(iconWrapperComponent).toBeTruthy();
-    const iconActionComponent = within(iconWrapperComponent).getByTestId("iconActionComponent");
+    const iconActionComponent = within(iconWrapperComponent).getByTestId("icon-action-component");
     expect(iconActionComponent).toBeTruthy();
     fireEvent.click(iconActionComponent);
     expect(onClickIconMock).toBeCalledTimes(1);

package/src/__tests__/components/Fields/TimeField/HourInput/HourInput.test.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import HourInput from "@ax/components/Fields/TimeField/HourInput";
+import { act, Simulate } from "react-dom/test-utils";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IHourInputProps>();
+
+describe("HourInput component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const hourInputField = screen.getByTestId("time-field-input");
+    expect(hourInputField).toBeTruthy();
+  });
+
+  it("should render component as disabled", () => {
+    defaultProps.disabled = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const hourInputField = screen.getByTestId<HTMLInputElement>("time-field-input");
+    expect(hourInputField.disabled).toEqual(true);
+  });
+});
+
+describe("onChange events", () => {
+  it("should call onChange on change with valid time", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = "12:30";
+    defaultProps.disabled = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    act(() => {
+      fireEvent.change(input, { target: { value: "12:30" } });
+      Simulate.change(input);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith("12:30");
+  });
+
+  it("should call onChange on change with 24 hours time", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = "12:00";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    act(() => {
+      fireEvent.change(input, { target: { value: "23:30" } });
+      Simulate.change(input);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith("12:30");
+  });
+
+  it("should call onChange on change with 24 hours time", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = "12:00";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    act(() => {
+      fireEvent.change(input, { target: { value: "23:30" } });
+      Simulate.change(input);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith("12:30");
+  });
+
+  it("should call onChange on change with more than 12 hours", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = "12:00";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    act(() => {
+      fireEvent.change(input, { target: { value: "13:30" } });
+      Simulate.change(input);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith("12:30");
+  });
+
+  it("should call onChange on change with more than 59 minutes", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = "12:30";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HourInput {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    act(() => {
+      fireEvent.change(input, { target: { value: "10:72" } });
+      Simulate.change(input);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith("10:30");
+  });
+});
+
+interface IHourInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}