@griddo/ax 1.67.9 → 1.68.1

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

@@ -0,0 +1,135 @@
+import React from "react";
+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 } from "@testing-library/react";
+import FileField, { IFileFieldProps } from "@ax/components/Fields/FileField";
+import { act } from "react-dom/test-utils";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IFileFieldProps>();
+
+describe("FileField component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.value.url = "google.es";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FileField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fileDataWrapper = screen.getByTestId("file-data-wrapper");
+
+    expect(fileDataWrapper).toBeTruthy();
+  });
+
+  it("should render the component when there is not value", () => {
+    defaultProps.value = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FileField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fileDataWrapper = screen.getByTestId("file-data-wrapper");
+
+    expect(fileDataWrapper).toBeTruthy();
+  });
+});
+
+describe("onClick events", () => {
+  it("should open FileDragAndDrop when clicking the file button", () => {
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FileField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component);
+
+    const fileButton = screen.getByTestId("field-icon-wrapper");
+    act(() => fileButton.click());
+
+    rerender(Component);
+
+    const fileDragAndDropWrapper = screen.queryByTestId("file-drag-and-drop-wrapper");
+    expect(fileDragAndDropWrapper).toBeTruthy();
+  });
+
+  it("should not open FileDragAndDrop when clicking the file button", () => {
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FileField {...defaultProps} disabled />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component);
+
+    const fileButton = screen.getByTestId("field-icon-wrapper");
+    act(() => fileButton.click());
+
+    rerender(Component);
+
+    const fileDragAndDropWrapper = screen.queryByTestId("file-drag-and-drop-wrapper");
+    expect(fileDragAndDropWrapper).toBeFalsy();
+  });
+
+  it("should call handleOnClickUrl when clicking the url button", () => {
+    defaultProps.value = { url: "google.es", uploadDate: "1/1/2022", sizeBytes: "123" };
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FileField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const windowOpen = window.open;
+    (window as any).open = () => ({ focus: () => null });
+
+    const { rerender } = render(Component);
+
+    const spyWindowOpen = jest.spyOn(window, "open");
+
+    const urlButton = screen.getAllByTestId("iconActionComponent");
+    act(() => urlButton[0].click());
+
+    expect(spyWindowOpen).toBeCalled();
+
+    (window as any).open = () => null;
+    rerender(Component);
+
+    act(() => urlButton[0].click());
+
+    expect(spyWindowOpen).toBeCalled();
+
+    window.open = windowOpen;
+  });
+
+  it("should call onChange when clicking the delete action", () => {
+    defaultProps.value = { url: "google.es", uploadDate: "1/1/2022", sizeBytes: "123" };
+    const onChange = jest.fn();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FileField {...defaultProps} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component);
+
+    const floatingMenu = screen.getAllByTestId("iconActionComponent");
+
+    act(() => floatingMenu[1].click());
+
+    rerender(Component);
+
+    const actionMenuItem = screen.getAllByTestId("action-menu-item");
+    act(() => actionMenuItem[1].click());
+
+    expect(onChange).toBeCalledTimes(1);
+  });
+});

package/src/__tests__/{HeadingField.test.tsx → components/Fields/HeadingField/HeadingField.test.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
-import HeadingField from "../components/Fields/HeadingField/index";
+import HeadingField from "@ax/components/Fields/HeadingField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup } from "@testing-library/react";
 
 afterEach(cleanup);

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

@@ -0,0 +1,76 @@
+import React from "react";
+import HiddenField from "@ax/components/Fields/HiddenField";
+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";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IHiddenFieldProps>();
+
+describe("Component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.hasMultipleOptions = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HiddenField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("field-multiple-options")).toBeTruthy();
+  });
+
+  it("should render the component when hasMultipleOptions is true", () => {
+    defaultProps.hasMultipleOptions = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HiddenField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("field-single-option")).toBeTruthy();
+    expect(screen.getByText("Show")).toBeTruthy();
+  });
+});
+
+describe("onClick events", () => {
+  it("should call showField with multiple options when clicking the component", () => {
+    defaultProps.hasMultipleOptions = true;
+    const showField = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HiddenField {...defaultProps} showField={showField} />
+      </ThemeProvider>
+    );
+
+    const wrapperMultipleOptions = screen.getByTestId("field-multiple-options");
+    fireEvent.click(wrapperMultipleOptions);
+    expect(showField).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call showField with single option when clicking the component", () => {
+    defaultProps.hasMultipleOptions = false;
+    const showField = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HiddenField {...defaultProps} showField={showField} />
+      </ThemeProvider>
+    );
+
+    const wrapperSingleOption = screen.getByTestId("field-single-option");
+    fireEvent.click(wrapperSingleOption);
+    expect(showField).toHaveBeenCalledTimes(1);
+  });
+});
+
+interface IHiddenFieldProps {
+  title: string;
+  showField: any;
+  hasMultipleOptions?: boolean;
+}

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

@@ -0,0 +1,70 @@
+import React from "react";
+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 { ISite } from "@ax/types";
+
+import MultiCheckSelect from "@ax/components/Fields/MultiCheckSelect";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IMultiCheckSelectProps>();
+
+describe("Component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MultiCheckSelect {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const multiCheckSelectContent = screen.getByTestId("multi-check-select-wrapper");
+
+    expect(multiCheckSelectContent).toBeTruthy();
+  });
+});
+
+describe("onClick events", () => {
+  it("should show select when clicking", () => {
+    defaultProps.options = [
+      {
+        name: "all",
+        value: "all",
+        title: "Select All",
+      },
+      {
+        name: "dimensionTwo",
+        value: "dimensionTwo",
+        title: "dimensionTwo",
+      },
+    ];
+    defaultProps.value = [];
+    defaultProps.selectAllOption = "all";
+    defaultProps.source = "TheSource";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MultiCheckSelect {...defaultProps} mandatory />
+      </ThemeProvider>
+    );
+
+    const field = screen.getByTestId("field");
+    fireEvent.click(field);
+    expect(screen.getByText("dimensionTwo")).toBeTruthy();
+  });
+});
+
+interface IMultiCheckSelectProps {
+  value: (string | number)[];
+  onChange: (value: string | (string | number)[]) => void;
+  site?: ISite | null;
+  placeholder: string;
+  source?: string;
+  className?: string;
+  mandatory?: boolean;
+  options?: { name: string; value: string; title: string }[];
+  selectAllOption?: string;
+  floating?: boolean;
+}

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import NoteField from "@ax/components/Fields/NoteField";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<INoteFieldProps>();
+defaultProps.value = { text: "This is the text" };
+
+describe("NoteField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NoteField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const noteFieldWrapper = screen.getByTestId("noteFieldWrapper");
+
+    expect(noteFieldWrapper).toBeTruthy();
+  });
+
+  it("should render text value", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NoteField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText("This is the text"));
+  });
+
+  it("should not render title", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NoteField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const title = screen.queryByTestId("title");
+
+    expect(title).toBeNull();
+  });
+
+  it("should render title", () => {
+    defaultProps.value.title = "Super title";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NoteField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const title = screen.queryByTestId("title");
+
+    expect(title).toBeTruthy();
+  });
+});
+
+interface INoteFieldProps {
+  value: { title?: string; text: string | JSX.Element };
+  className?: string;
+}

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

@@ -0,0 +1,109 @@
+import React from "react";
+import NumberField from "@ax/components/Fields/NumberField";
+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";
+
+afterEach(cleanup);
+
+const defaultProps = mock<INumberFieldProps>();
+
+describe("NumberField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NumberField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const conditionalFieldContent = screen.getByTestId("conditional-field-wrapper");
+
+    expect(conditionalFieldContent).toBeTruthy();
+  });
+});
+
+describe("onClick events", () => {
+  it("should call onChange when clicking arrow up", () => {
+    const onChange = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NumberField {...defaultProps} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const arrowUp = screen.getByTestId("arrow-up");
+    fireEvent.click(arrowUp);
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+
+  it("should call onChange when clicking arrow down", () => {
+    defaultProps.value = 2;
+    defaultProps.minValue = 1;
+    const onChange = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NumberField {...defaultProps} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const arrowDown = screen.getByTestId("arrow-down");
+    fireEvent.click(arrowDown);
+    expect(onChange).toHaveBeenCalledWith(1);
+    fireEvent.click(arrowDown);
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+});
+
+describe("onBlur events", () => {
+  it("should call handleValidation on blur", () => {
+    const handleValidation = jest.fn();
+    const onBlur = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NumberField {...defaultProps} handleValidation={handleValidation} onBlur={onBlur} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("input");
+    fireEvent.blur(input);
+    expect(handleValidation).toHaveBeenCalled();
+  });
+});
+
+describe("onChange events", () => {
+  it("should call onChange on change", () => {
+    defaultProps.maxValue = 7;
+    defaultProps.error = true;
+    const onChange = jest.fn();
+    const handleValidation = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NumberField {...defaultProps} onChange={onChange} handleValidation={handleValidation} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("input");
+    fireEvent.change(input, { target: { value: 5 } });
+    expect(onChange).toHaveBeenCalledWith(5);
+    expect(handleValidation).toHaveBeenCalled();
+  });
+});
+
+interface INumberFieldProps {
+  value?: number;
+  onChange: (value: number) => void;
+  name?: string;
+  error?: boolean;
+  minValue?: number;
+  maxValue?: number;
+  onClickIcon?: () => void;
+  onBlur?: (value: number) => void;
+  disabled?: boolean;
+  handleValidation?: (value: string, validators: Record<string, unknown>) => void;
+}

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

@@ -0,0 +1,106 @@
+import * as React from "react";
+import RadioField from "@ax/components/Fields/RadioField";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IRadioFieldProps>();
+
+describe("RadioField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RadioField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioFieldContainer = screen.getByTestId("radio-field-wrapper");
+
+    expect(radioFieldContainer).toBeTruthy();
+  });
+
+  it("should render input as checked", () => {
+    defaultProps.checked = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RadioField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioFieldInput = screen.getByTestId<HTMLInputElement>("radio-field-input");
+    expect(radioFieldInput.checked).toEqual(true);
+  });
+
+  it("should render input as disabled", () => {
+    defaultProps.disabled = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RadioField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioFieldInput = screen.getByTestId<HTMLInputElement>("radio-field-input");
+    expect(radioFieldInput.disabled).toEqual(true);
+  });
+
+  it("should render input with name", () => {
+    defaultProps.name = "This is the name";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RadioField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioFieldInput = screen.getByTestId<HTMLInputElement>("radio-field-input");
+    expect(radioFieldInput.name).toEqual("This is the name");
+  });
+});
+
+describe("onClick events", () => {
+  it("should not call onChange function", () => {
+    defaultProps.checked = false;
+    defaultProps.disabled = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RadioField {...defaultProps} onChange={undefined} />
+      </ThemeProvider>
+    );
+
+    const radioFieldInput = screen.getByTestId("radio-field-input");
+    fireEvent.click(radioFieldInput);
+    expect(defaultProps.onChange).not.toHaveBeenCalled();
+  });
+
+  it("should call onChange function", () => {
+    defaultProps.checked = false;
+    defaultProps.onChange = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RadioField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioFieldInput = screen.getByTestId("radio-field-input");
+    fireEvent.click(radioFieldInput);
+    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
+  });
+});
+
+interface IRadioFieldProps {
+  name: string;
+  title: string;
+  value: string;
+  checked?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}

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

@@ -0,0 +1,52 @@
+import React from "react";
+import RichText from "@ax/components/Fields/RichText";
+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 } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IRichTextProps>();
+defaultProps.value = "This is the content";
+
+describe("RichText component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RichText {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const richTextContent = screen.getByTestId("rich-text-wrapper");
+
+    expect(richTextContent).toBeTruthy();
+    expect(screen.getAllByText("This is the content")).toBeTruthy();
+  });
+
+  it("should render the component with html set to true", () => {
+    defaultProps.html = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RichText {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const richTextContent = screen.getByTestId("rich-text-wrapper");
+
+    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;
+}