@griddo/ax 1.72.11 → 1.73.2

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

@@ -0,0 +1,149 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import FloatingPanel, { IFloatingPanelProps } from "@ax/components/FloatingPanel";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("FloatingPanel component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps: IFloatingPanelProps = {
+      isOpen: true,
+      isOpenedSecond: false,
+      children: false,
+      title: "title",
+      toggleModal: jest.fn(),
+      handlePanel: jest.fn(),
+      secondary: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const FloatingPanelWrapper = screen.getByTestId("floating-panel");
+    expect(FloatingPanelWrapper).toBeTruthy();
+  });
+
+  it("should render the component with iconAction", () => {
+    const defaultProps: IFloatingPanelProps = {
+      isOpen: true,
+      isOpenedSecond: false,
+      children: false,
+      title: "title",
+      toggleModal: jest.fn(),
+      handlePanel: jest.fn(),
+      secondary: true,
+      closeOnOutsideClick: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const floatingPanelWrapper = screen.getByTestId("floating-panel");
+    expect(floatingPanelWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+  });
+});
+
+describe("FloatingPanel component events trigger", () => {
+  it("should trigger the handleOnClick", () => {
+    const handlePanelMock = jest.fn();
+    const toggleModalMock = jest.fn();
+    const defaultProps: IFloatingPanelProps = {
+      isOpen: true,
+      isOpenedSecond: false,
+      children: false,
+      title: "title",
+      toggleModal: toggleModalMock,
+      handlePanel: handlePanelMock,
+      secondary: true,
+      closeOnOutsideClick: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const floatingPanelWrapper = screen.getByTestId("floating-panel");
+    expect(floatingPanelWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.click(iconAction);
+    expect(toggleModalMock).toBeCalled();
+    expect(handlePanelMock).toBeCalledWith(false);
+  });
+
+  it("should trigger the handleClickOutside and trigger handlePanel", () => {
+    const handlePanelMock = jest.fn();
+    const toggleModalMock = jest.fn();
+    const defaultProps: IFloatingPanelProps = {
+      isOpen: true,
+      isOpenedSecond: false,
+      children: false,
+      title: "title",
+      toggleModal: toggleModalMock,
+      handlePanel: handlePanelMock,
+      secondary: true,
+      closeOnOutsideClick: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const floatingPanelWrapper = screen.getByTestId("floating-panel");
+    expect(floatingPanelWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+
+    fireEvent.mouseDown(document);
+    expect(toggleModalMock).toBeCalled();
+    expect(handlePanelMock).toBeCalledWith(false);
+  });
+
+  it("should trigger the handleClickOutside and not trigger handlePanel", () => {
+    const handlePanelMock = jest.fn();
+    const toggleModalMock = jest.fn();
+    const defaultProps: IFloatingPanelProps = {
+      isOpen: true,
+      isOpenedSecond: false,
+      children: false,
+      title: "title",
+      toggleModal: toggleModalMock,
+      handlePanel: handlePanelMock,
+      secondary: true,
+      closeOnOutsideClick: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const floatingPanelWrapper = screen.getByTestId("floating-panel");
+    expect(floatingPanelWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+
+    fireEvent.mouseDown(document);
+    expect(toggleModalMock).not.toBeCalled();
+    expect(handlePanelMock).not.toBeCalled();
+  });
+});

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, cleanup, screen } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import GuardModal, { IGuardModalProps } from "@ax/components/GuardModal";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IGuardModalProps>();
+
+describe("GuardModal component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.isOpen = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GuardModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const guardModal = screen.getByTestId("modal-wrapper");
+    expect(guardModal).toBeTruthy();
+    const guardModalContent = screen.getByTestId("guard-modal-content");
+    expect(guardModalContent).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import Icon, { IStateProps } from "@ax/components/Icon";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Icon component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps: IStateProps = {
+      name: "delete",
+      size: "24",
+    };
+
+    const { container } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Icon {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const svgIcon = container.querySelector("svg");
+    expect(svgIcon).toBeTruthy();
+  });
+
+  it("should render the component with no size", () => {
+    const defaultProps: IStateProps = {
+      name: "delete",
+    };
+
+    const { container } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Icon {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const svgIcon = container.querySelector("svg");
+    expect(svgIcon).toBeTruthy();
+  });
+
+  it("should render the component with fill", () => {
+    const defaultProps: IStateProps = {
+      name: "delete",
+      fill: "#FFFFFF",
+    };
+
+    const { container } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Icon {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const svgIcon = container.querySelector("svg");
+    expect(svgIcon).toBeTruthy();
+  });
+
+  it("should not render the component if no svg", () => {
+    const defaultProps: IStateProps = {
+      name: "no-icon",
+      size: "24",
+    };
+
+    const { container } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Icon {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const svgIcon = container.querySelector("svg");
+    expect(svgIcon).toBeNull();
+  });
+});

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

@@ -0,0 +1,91 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import IconAction, { IIconActionProps } from "@ax/components/IconAction";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("IconAction component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps: IIconActionProps = {
+      icon: "delete",
+      size: "m",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <IconAction {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByTestId("icon-action-component");
+    expect(button).toBeTruthy();
+  });
+
+  it("should render the component inversed", () => {
+    const defaultProps: IIconActionProps = {
+      icon: "delete",
+      size: "m",
+      inversed: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <IconAction {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByTestId("icon-action-component");
+    expect(button).toBeTruthy();
+  });
+});
+
+describe("onClick events", () => {
+  test("onClick been called if enabled", () => {
+    const onClickMock = jest.fn();
+    const defaultProps: IIconActionProps = {
+      icon: "delete",
+      size: "m",
+      onClick: onClickMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <IconAction {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByTestId("icon-action-component");
+    expect(button).toBeTruthy();
+
+    fireEvent.click(button);
+    expect(onClickMock).toBeCalledTimes(1);
+  });
+
+  test("onClick not to be called if disabled", () => {
+    const onClickMock = jest.fn();
+    const defaultProps: IIconActionProps = {
+      icon: "delete",
+      size: "m",
+      onClick: onClickMock,
+      disabled: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <IconAction {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByTestId("icon-action-component");
+    expect(button).toBeTruthy();
+
+    fireEvent.click(button);
+    expect(onClickMock).toBeCalledTimes(0);
+  });
+});

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

@@ -0,0 +1,206 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import Notification, { INotificationProps } from "@ax/components/Notification";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Notification component rendering", () => {
+  it("should render the success notification", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const notificationWrapper = screen.getByTestId("notification-wrapper");
+    const successIcon = screen.getByTestId("success-icon");
+    expect(notificationWrapper).toBeTruthy();
+    expect(successIcon).toBeTruthy();
+  });
+
+  it("should render the error notification", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "error",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const notificationWrapper = screen.getByTestId("notification-wrapper");
+    const alertIcon = screen.getByTestId("alert-icon");
+    expect(notificationWrapper).toBeTruthy();
+    expect(alertIcon).toBeTruthy();
+  });
+
+  it("should render the warning notification", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "warning",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const notificationWrapper = screen.getByTestId("notification-wrapper");
+    const warningIcon = screen.getByTestId("warning-icon");
+    expect(notificationWrapper).toBeTruthy();
+    expect(warningIcon).toBeTruthy();
+  });
+
+  it("should render the close button", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const closeButton = screen.getByTestId("close-button");
+    expect(closeButton).toBeTruthy();
+  });
+
+  it("should not render the close button", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+      closeButton: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const closeButton = screen.queryByTestId("close-button");
+    expect(closeButton).toBeFalsy();
+  });
+
+  it("should render the action button with no actionsBelow", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+      btnText: "Action",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionButton = screen.getByTestId("action-button");
+    expect(actionButton).toBeTruthy();
+  });
+
+  it("should render the action button with actionsBelow", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+      btnText: "Action",
+      actionsBelow: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionButton = screen.getByTestId("action-button");
+    expect(actionButton).toBeTruthy();
+  });
+});
+
+describe("Notification component with subnotifications", () => {
+  it("should render the subnotifications open button", () => {
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "error",
+      subErrors: [
+        { id: 1, error: "SubError 1" },
+        { id: 2, error: "SubError 2" },
+        { id: 3, error: "Suberror 3" },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const suberrorsButton = screen.getByTestId("suberrors-button");
+    expect(suberrorsButton).toBeTruthy();
+    fireEvent.click(suberrorsButton);
+    const subnotifications = screen.getAllByTestId("subnotification-wrapper");
+    expect(subnotifications).toHaveLength(3);
+  });
+});
+
+describe("Notification component events", () => {
+  it("should call onClick on action button click", () => {
+    const onClickMock = jest.fn();
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+      btnText: "Action",
+      onClick: onClickMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionButton = screen.getByTestId("action-button");
+    expect(actionButton).toBeTruthy();
+    fireEvent.click(actionButton);
+    expect(onClickMock).toBeCalledTimes(1);
+  });
+
+  it("should call resetError on close and hide notification", () => {
+    const resetErrorMock = jest.fn();
+    const defaultProps: INotificationProps = {
+      text: "Notification text",
+      type: "success",
+      resetError: resetErrorMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Notification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const closeButton = screen.getByTestId("close-button");
+    expect(closeButton).toBeTruthy();
+    fireEvent.click(closeButton);
+    expect(resetErrorMock).toBeCalledTimes(1);
+    const notificationWrapper = screen.getByTestId("notification-wrapper");
+    expect(notificationWrapper).not.toBeVisible();
+  });
+});

package/src/__tests__/components/Notification/SubNotification/Subnotification.test.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import SubNotification, { ISubNotificationProps } from "@ax/components/Notification/SubNotification";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("SubNotification component rendering", () => {
+  it("should render the subnotification", () => {
+    const defaultProps: ISubNotificationProps = {
+      text: "SubNotification text",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SubNotification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subnotificationWrapper = screen.getByTestId("subnotification-wrapper");
+    expect(subnotificationWrapper).toBeTruthy();
+  });
+
+  it("should close the subnotification", () => {
+    const defaultProps: ISubNotificationProps = {
+      text: "SubNotification text",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SubNotification {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subnotificationButton = screen.getByTestId("subnotification-close-button");
+    expect(subnotificationButton).toBeTruthy();
+    fireEvent.click(subnotificationButton);
+    const subnotificationWrapper = screen.queryByTestId("subnotification-wrapper");
+    expect(subnotificationWrapper).not.toBeVisible();
+  });
+});

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

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import ReorderArrows, { IReorderArrows } from "@ax/components/ReorderArrows";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IReorderArrows>();
+
+describe("ReorderArrows component rendering", () => {
+  it("should render the component if is first", () => {
+    defaultProps.index = 0;
+    defaultProps.listLength = 10;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReorderArrows {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const reorderWrapper = screen.getByTestId("reorder-first");
+    expect(reorderWrapper).toBeTruthy();
+  });
+
+  it("should render the component if is last", () => {
+    defaultProps.index = 9;
+    defaultProps.listLength = 10;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReorderArrows {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const reorderWrapper = screen.getByTestId("reorder-last");
+    expect(reorderWrapper).toBeTruthy();
+  });
+
+  it("shouldn't render the component", () => {
+    defaultProps.index = 9;
+    defaultProps.listLength = 0;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReorderArrows {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const reorderWrapperLast = screen.queryByTestId("reorder-last");
+    const reorderWrapperFirst = screen.queryByTestId("reorder-first");
+    expect(reorderWrapperLast).not.toBeTruthy();
+    expect(reorderWrapperFirst).not.toBeTruthy();
+  });
+});
+
+describe("ReorderArrows component events trigger", () => {
+  it("should trigger the handleDownClick", () => {
+    const handleDownClickMock = defaultProps.handleDownClick as jest.MockedFunction<(value: any) => void>;
+    defaultProps.index = 0;
+    defaultProps.listLength = 10;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReorderArrows {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const reorderWrapper = screen.getByTestId("reorder-first");
+    expect(reorderWrapper).toBeTruthy();
+    const reorderIcon = screen.getByTestId("icon-action-component");
+    expect(reorderIcon).toBeTruthy();
+    fireEvent.click(reorderIcon);
+    expect(handleDownClickMock).toBeCalled();
+  });
+
+  it("should trigger the handleUpClick", () => {
+    const handleUpClickMock = defaultProps.handleUpClick as jest.MockedFunction<(value: any) => void>;
+    defaultProps.index = 9;
+    defaultProps.listLength = 10;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReorderArrows {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const reorderWrapper = screen.getByTestId("reorder-last");
+    expect(reorderWrapper).toBeTruthy();
+    const reorderIcon = screen.getByTestId("icon-action-component");
+    expect(reorderIcon).toBeTruthy();
+    fireEvent.click(reorderIcon);
+    expect(handleUpClickMock).toBeCalled();
+  });
+});