@griddo/ax 1.69.9 → 1.72.1

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 "@ax/helpers";
+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,7 +1,7 @@
 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 { 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";
@@ -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,152 @@
+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 "@ax/helpers";
+
+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("tip-component");
+
+    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");
+    const iconComponent = screen.getByTestId("icon-component");
+
+    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();
+  });
+});

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

@@ -1,7 +1,7 @@
 import React from "react";
 import UniqueCheck from "@ax/components/Fields/UniqueCheck";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup } from "@testing-library/react";
@@ -35,9 +35,9 @@ describe("CheckField component rendering", () => {
       </ThemeProvider>
     );
 
-    const checkFieldLabel = screen.getByTestId("checkFieldLabel");
+    const checkFieldLabel = screen.getByTestId("check-field-label");
 
-    expect(screen.getAllByTestId("checkFieldLabel")).toHaveLength(1);
+    expect(screen.getAllByTestId("check-field-label")).toHaveLength(1);
     expect(checkFieldLabel).toHaveTextContent("Option 1");
   });
 });

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

@@ -13,7 +13,7 @@ import {
   structuredDataResponse,
 } from "../../../../__mocks__/mockedAxios";
 
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import UrlField, { IUrlFieldProps } from "@ax/components/Fields/UrlField/index";
 import globalTheme from "@ax/themes/theme.json";
 
@@ -251,7 +251,7 @@ describe("UrlField component rendering", () => {
       render(Component, { store });
     });
 
-    expect(screen.getAllByTestId("selectComponent")).toBeTruthy();
+    expect(screen.getAllByTestId("select-component")).toBeTruthy();
   });
 
   test("should render the select with tabs and subSlug", async () => {
@@ -290,7 +290,7 @@ describe("UrlField component rendering", () => {
       render(Component, { store });
     });
 
-    const selectComponents = screen.getAllByTestId("selectComponent");
+    const selectComponents = screen.getAllByTestId("select-component");
 
     await act(async () => {
       selectComponents[3].click();
@@ -431,7 +431,7 @@ describe("onClick events", () => {
     });
 
     const selectionListItem = screen.getAllByTestId("selection-list-item");
-    const checkFieldInputs = screen.getAllByTestId("checkFieldInput");
+    const checkFieldInputs = screen.getAllByTestId("check-field-input");
     const pageField = screen.getByTestId("page-field");
 
     await act(async () => {

package/src/__tests__/components/Fields/VisualUniqueSelection/ImageSelection/ImageSelection.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import ImageSelection from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
+import ImageSelection, { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
@@ -85,15 +85,3 @@ describe("VisualUniqueSelection component events", () => {
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
-
-interface IImageSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any;
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  theme: string;
-}

package/src/__tests__/components/Fields/VisualUniqueSelection/ScrollableSelection/ScrollableSelection.test.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
-import ScrollableSelection from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
+import ScrollableSelection, {
+  IScrollableSelectionProps,
+} from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
@@ -129,8 +131,8 @@ describe("ScrollableSelection component events", () => {
     const dots = screen.getAllByTestId("dotSelected");
     expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
     expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
-    const nextButton = screen.getAllByTestId("iconActionComponent")[1];
-    const prevButton = screen.getAllByTestId("iconActionComponent")[0];
+    const nextButton = screen.getAllByTestId("icon-action-component")[1];
+    const prevButton = screen.getAllByTestId("icon-action-component")[0];
     fireEvent.click(nextButton);
     expect((dots[0] as HTMLOptionElement).selected).toBeFalsy();
     expect((dots[1] as HTMLOptionElement).selected).toBeTruthy();
@@ -158,19 +160,3 @@ describe("ScrollableSelection component events", () => {
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
-
-interface IScrollableSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any[];
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  actions: any;
-  selectedContent: any;
-  reference?: string;
-  theme: string;
-  elementUniqueSelection: boolean;
-}

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

@@ -1,7 +1,9 @@
 import * as React from "react";
 import VisualUniqueSelection from "@ax/components/Fields/VisualUniqueSelection";
+import { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
+import { IScrollableSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
 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";
@@ -48,31 +50,3 @@ describe("VisualUniqueSelection component rendering", () => {
     expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
   });
 });
-
-interface IImageSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any;
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  theme: string;
-  elementUniqueSelection: boolean;
-}
-
-interface IScrollableSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any[];
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  actions: any;
-  selectedContent: any;
-  reference?: string;
-  theme: string;
-}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 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";
 

package/src/__tests__/components/FieldsBehavior/FieldsBehavior.test.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import FieldsBehavior from "@ax/components/FieldsBehavior";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("FieldsBehavior component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps = {
+      objKey: "subjDocumentUrl",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Document URL",
+        type: "TextField",
+        key: "subjDocumentUrl",
+        placeholder: "https://",
+        condition: "url",
+      },
+      filled: true,
+      title: "Cool title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldsBehavior {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+  });
+
+  it("should render the component with error message", () => {
+    const defaultProps = {
+      objKey: "subjDocumentUrl",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Document URL",
+        type: "TextField",
+        key: "subjDocumentUrl",
+        placeholder: "https://",
+        condition: "url",
+      },
+      error: true,
+      helptext: "ayuda",
+      filled: true,
+      title: "Cool title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+      whiteList: ["BasicContent", "CardCollection"],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldsBehavior {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+    const helpMessage = screen.queryByText("ayuda");
+    expect(helpMessage).toBeTruthy();
+  });
+
+  it("should render the component with tooltip 'Options'", () => {
+    const defaultProps = {
+      objKey: "subjDocumentUrl",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Document URL",
+        type: "TextField",
+        key: "subjDocumentUrl",
+        placeholder: "https://",
+        condition: "url",
+      },
+      title: "Cool title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+      advanced: true,
+      whiteList: [],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldsBehavior {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+
+    const tooltipComponent = screen.getByTestId("tooltip-component");
+    const tipComponent = screen.queryByText("Options");
+    expect(tooltipComponent).toBeTruthy();
+    expect(tipComponent).toBeTruthy();
+  });
+
+  it("should render the component with tooltip 'Hide'", () => {
+    const defaultProps = {
+      objKey: "subjDocumentUrl",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Document URL",
+        type: "TextField",
+        key: "subjDocumentUrl",
+        placeholder: "https://",
+        condition: "url",
+      },
+      title: "Cool title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+      hideable: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldsBehavior {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+
+    const tooltipComponent = screen.getByTestId("tooltip-component");
+    const tipComponent = screen.queryByText("Hide");
+    expect(tooltipComponent).toBeTruthy();
+    expect(tipComponent).toBeTruthy();
+  });
+});

package/src/__tests__/components/SubNav/SubNav.test.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+
+import SubNav, { ISubNavProps } from "@ax/components/SubNav";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ISubNavProps>();
+
+describe("SubNav component rendering", () => {
+  it("should render the component's wrapper", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SubNav {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subNavWrapper = screen.getByTestId("sub-nav-wrapper");
+    expect(subNavWrapper).toBeTruthy();
+  });
+
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SubNav {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subNav = screen.getByTestId("sub-nav");
+    expect(subNav).toBeTruthy();
+  });
+});

package/src/__tests__/components/TableCounter/TableCounter.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup } from "@testing-library/react";
+
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import TableCounter, { ITableCounter } from "@ax/components/TableCounter";
+
+afterEach(cleanup);
+
+const props: ITableCounter = {
+  totalItems: 0,
+};
+
+describe("TableCounter component", () => {
+  test("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableCounter {...props} />
+      </ThemeProvider>
+    );
+
+    const tableCounter = screen.getAllByTestId("table-counter");
+    expect(tableCounter).toBeTruthy();
+  });
+
+  test("should render the total items value", () => {
+    const defaultProps = { totalItems: 0 };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableCounter {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tableCounter = screen.getByTestId("table-counter");
+    expect(tableCounter.textContent).toEqual("0 results");
+  });
+
+  test("should render results label in singular when totalItems equal 1", () => {
+    const defaultProps = { totalItems: 1 };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableCounter {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tableCounter = screen.getByTestId("table-counter");
+    expect(tableCounter.textContent).toEqual("1 result");
+  });
+});