@griddo/ax 1.69.7 → 1.71.0

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

@@ -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);
     });
 
@@ -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 () => {
@@ -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 () => {
@@ -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,100 @@ 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[0]).toHaveTextContent("Article 03");
+    expect(referenceFieldItems.length).toBe(2);
 
-    iconActionComponents = screen.getAllByTestId("iconActionComponent");
+    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
 
     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();
@@ -528,5 +590,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,5 +1,5 @@
 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 globalTheme from "@ax/themes/theme.json";
@@ -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,5 +1,5 @@
 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 globalTheme from "@ax/themes/theme.json";
@@ -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,5 +1,5 @@
 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 globalTheme from "@ax/themes/theme.json";
@@ -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,4 +1,4 @@
-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";
@@ -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/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 "@griddo/core";
+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;
+}

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

@@ -0,0 +1,100 @@
+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 "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { TimeField } from "@ax/components";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITimeFieldProps>();
+
+describe("TimeField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TimeField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const timeFieldWrapper = screen.getByTestId("time-field-wrapper");
+    expect(timeFieldWrapper).toBeTruthy();
+  });
+
+  it("should render component as disabled", () => {
+    defaultProps.disabled = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TimeField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const timeFieldWrapper = screen.getByTestId<HTMLInputElement>("time-field-wrapper");
+    expect(timeFieldWrapper).toBeTruthy();
+  });
+
+  it("should render component with error", () => {
+    defaultProps.error = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TimeField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const timeFieldWrapper = screen.getByTestId<HTMLInputElement>("time-field-wrapper");
+    expect(timeFieldWrapper).toBeTruthy();
+  });
+
+  it("should render the component input", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TimeField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const timeFieldWInput = screen.getByTestId("time-field-input");
+    expect(timeFieldWInput).toBeTruthy();
+  });
+});
+
+describe("onChange events", () => {
+  it("should call onChange on change", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = "12:30 am";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TimeField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    fireEvent.change(input, { target: { value: "12:30 am" } });
+    expect(onChangeMock).toHaveBeenCalledWith("12:30 am");
+  });
+
+  it("should call onChange on change with no value", () => {
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+    defaultProps.value = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TimeField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("time-field-input");
+    fireEvent.change(input, { target: { value: "00:00 am" } });
+    expect(onChangeMock).toHaveBeenCalledWith("00:00 am");
+  });
+});
+
+interface ITimeFieldProps {
+  value?: string;
+  onChange: (value: string) => void;
+  error?: boolean;
+  disabled?: boolean;
+}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import ToggleField from "@ax/components/Fields/ToggleField";
+import ToggleField, { IToggleFieldProps } from "@ax/components/Fields/ToggleField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -90,11 +90,3 @@ describe("onClick events", () => {
     expect(defaultProps.onChange).not.toHaveBeenCalled();
   });
 });
-
-interface IToggleFieldProps {
-  name: string;
-  value: any;
-  checked?: boolean;
-  disabled?: boolean;
-  onChange?: (value: boolean) => void;
-}

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

@@ -0,0 +1,151 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { mock } from "jest-mock-extended";
+
+import { parseTheme } from "@griddo/core";
+
+import Tooltip, { ITooltipProps } from "@ax/components/Tooltip";
+import { Icon } from "@ax/components";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITooltipProps>();
+
+describe("Tooltip component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.content = "content";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tooltipComponent = screen.getByTestId("tooltip-component");
+    const tipComponent = screen.getByTestId("tipComponent");
+
+    expect(tooltipComponent).toBeTruthy();
+    expect(tipComponent).toBeTruthy();
+  });
+
+  it("should not render the component", () => {
+    defaultProps.content = undefined;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tooltipComponent = screen.queryByTestId("tooltip-component");
+    expect(tooltipComponent).not.toBeTruthy();
+  });
+});
+
+describe("Tooltip events triggering", () => {
+  it("should render the component and Tip Component is still visible when doing click", () => {
+    jest.useFakeTimers();
+    defaultProps.content = "content";
+    defaultProps.children = <Icon name="modified" size="16px" />;
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tooltipComponent = screen.getByTestId("tooltip-component");
+    const tipComponent = screen.queryByText("content");
+
+    defaultProps.hideOnClick = false;
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+    expect(tipComponent).not.toBeVisible();
+
+    act(() => {
+      // over the tooltip
+      fireEvent.mouseEnter(tooltipComponent);
+
+      rerender(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Tooltip {...defaultProps} />
+        </ThemeProvider>
+      );
+      jest.runAllTimers();
+    });
+
+    expect(tipComponent).toBeVisible();
+
+    act(() => {
+      // click and change the clicked value
+      fireEvent.mouseDown(tooltipComponent);
+
+      rerender(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Tooltip {...defaultProps} />
+        </ThemeProvider>
+      );
+
+      jest.runAllTimers();
+    });
+    expect(tipComponent).toBeVisible();
+  });
+
+  it("should render the component and change visibility of Tip Component when click", () => {
+    jest.useFakeTimers();
+    defaultProps.content = "content";
+    defaultProps.children = <Icon name="modified" size="16px" />;
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tooltipComponent = screen.getByTestId("tooltip-component");
+    const tipComponent = screen.queryByText("content");
+
+    defaultProps.hideOnClick = true;
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+    expect(tipComponent).not.toBeVisible();
+
+    act(() => {
+      // over the tooltip
+      fireEvent.mouseEnter(tooltipComponent);
+
+      rerender(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Tooltip {...defaultProps} />
+        </ThemeProvider>
+      );
+
+      jest.runAllTimers();
+    });
+
+    expect(tipComponent).toBeVisible();
+
+    act(() => {
+      fireEvent.mouseDown(tooltipComponent);
+
+      rerender(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Tooltip {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    fireEvent.mouseEnter(tooltipComponent);
+    fireEvent.mouseDown(document);
+
+    expect(tooltipComponent).toBeTruthy();
+    expect(tipComponent).not.toBeVisible();
+  });
+});