@griddo/ax 1.72.11 → 1.73.2

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

@@ -0,0 +1,712 @@
+import React, { useRef } 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 FloatingMenu, { IFloatingProps } from "@ax/components/FloatingMenu";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+jest.mock("react", () => {
+  const originReact = jest.requireActual("react");
+  const mUseRef = jest.fn();
+  return {
+    ...originReact,
+    useRef: mUseRef,
+  };
+});
+
+const useMockRef = useRef as jest.MockedFunction<typeof useRef>;
+
+describe("FloatingMenu component rendering", () => {
+  it("should render the component", () => {
+    const buttonContent = () => (
+      <div>
+        <span>texto</span>
+      </div>
+    );
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      position: "left",
+      closeOnSelect: false,
+      isCheckGroup: true,
+      reactiveToHover: true,
+      offset: 10,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+  });
+
+  it("should show the floating div when click", () => {
+    const buttonContent = () => (
+      <div>
+        <span>texto</span>
+      </div>
+    );
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: true,
+      reactiveToHover: true,
+      offset: 10,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.click(floatingMenu);
+
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    fireEvent.mouseDown(document);
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+  });
+
+  it("should close the floating div when click", () => {
+    const buttonContent = () => (
+      <div>
+        <span>texto</span>
+      </div>
+    );
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: true,
+      reactiveToHover: true,
+      offset: 10,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.click(floatingMenu);
+
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    useMockRef.mockReturnValueOnce(wrapperRef);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    fireEvent.mouseDown(document);
+
+    expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeTruthy();
+  });
+
+  it("should close the floating div when select option", () => {
+    const buttonContent = () => <input type="checkbox" data-testid="menu-children" />;
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: true,
+      reactiveToHover: true,
+      offset: 10,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.click(floatingMenu);
+
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const menuChildren = screen.getByTestId("menu-children");
+    fireEvent.click(menuChildren);
+
+    expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeTruthy();
+  });
+
+  it("should close the floating div when select option and is not a checkgroup", () => {
+    const buttonContent = () => <span data-testid="menu-children">texto</span>;
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: false,
+      reactiveToHover: true,
+      offset: 10,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.click(floatingMenu);
+
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const menuChildren = screen.getByTestId("menu-children");
+    fireEvent.click(menuChildren);
+
+    expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeTruthy();
+  });
+
+  it("shouldn't close the floating div when select option", () => {
+    const buttonContent = () => <span data-testid="menu-children">texto</span>;
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: false,
+      reactiveToHover: true,
+      offset: 10,
+      closeOnSelect: false,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.click(floatingMenu);
+
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const menuChildren = screen.getByTestId("menu-children");
+    fireEvent.click(menuChildren);
+
+    expect(screen.queryByTestId("floating-menu-wrapper")).toBeTruthy();
+  });
+
+  it("should open the floating menu when handle over", () => {
+    const buttonContent = () => <span data-testid="menu-children">texto</span>;
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: false,
+      reactiveToHover: true,
+      offset: 10,
+      closeOnSelect: false,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.mouseEnter(floatingMenu);
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+    //Comprobación extra para testear que si ya está abierto, no gestiona el handleClick
+    fireEvent.mouseEnter(floatingMenu);
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+  });
+
+  it("should close the floating menu when handle leave", () => {
+    const buttonContent = () => <span data-testid="menu-children">texto</span>;
+
+    const defaultProps: IFloatingProps = {
+      children: "<div>hola</div>",
+      Button: buttonContent,
+      isInAppBar: true,
+      isCheckGroup: false,
+      reactiveToHover: true,
+      offset: 10,
+      closeOnSelect: false,
+    };
+
+    const wrapperRef = { current: {} };
+    const buttonRef = { current: {} };
+    const menuOptionsRef = { current: {} };
+
+    Object.defineProperty(wrapperRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValue(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(buttonRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    Object.defineProperty(menuOptionsRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValueOnce(wrapperRef);
+    useMockRef.mockReturnValueOnce(buttonRef);
+    useMockRef.mockReturnValueOnce(menuOptionsRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FloatingMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+
+    fireEvent.mouseEnter(floatingMenu);
+    expect(screen.getByTestId("floating-menu-wrapper")).toBeTruthy();
+
+    fireEvent.mouseLeave(floatingMenu);
+    expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeTruthy();
+  });
+});