orcs-design-system/es/components/SideNavV2/__tests__/resize.test.js

TeamForm's Design System, aka: ORCS

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import PropTypes from "prop-types";
import useResize from "../hooks/useResize";
import { calculateDesktopWidth, calculateMobileHeight } from "../utils/resizeUtils";
import SystemThemeProvider from "../../../SystemThemeProvider";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const renderWithTheme = (ui, options) => render(/*#__PURE__*/_jsx(SystemThemeProvider, {
  children: ui
}), options);

// Mock the resize utilities
jest.mock("../utils/resizeUtils", () => ({
  calculateDesktopWidth: jest.fn(),
  calculateMobileHeight: jest.fn(),
  applyResizeCursor: jest.fn(),
  removeResizeCursor: jest.fn()
}));

// Test component to use the hook
const TestComponent = _ref => {
  let {
    expandedRef,
    isSmallScreen,
    expandedItem,
    onWidthChange,
    currentItem
  } = _ref;
  const resizeHandlers = useResize(expandedRef, isSmallScreen, expandedItem, onWidthChange, currentItem);
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("div", {
      "data-testid": "resize-handle",
      onMouseDown: resizeHandlers.handleResizeStart
    }), /*#__PURE__*/_jsx("div", {
      "data-testid": "resize-status",
      children: resizeHandlers.isResizing ? "resizing" : "not-resizing"
    }), /*#__PURE__*/_jsx("div", {
      "data-testid": "has-resized-status",
      children: resizeHandlers.hasResized ? "has-resized" : "not-resized"
    })]
  });
};
TestComponent.propTypes = {
  expandedRef: PropTypes.object,
  isSmallScreen: PropTypes.bool,
  expandedItem: PropTypes.number,
  onWidthChange: PropTypes.func,
  currentItem: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
};
describe("useResize hook", () => {
  let mockExpandedRef;
  let mockOnWidthChange;
  beforeEach(() => {
    mockExpandedRef = {
      current: {
        style: {
          height: "300px"
        },
        offsetHeight: 300,
        parentElement: {
          // This is the Box element
          parentElement: {
            // This is the SideNavWrapper element
            querySelector: jest.fn().mockReturnValue({
              getBoundingClientRect: () => ({
                right: 200
              })
            })
          }
        }
      }
    };
    mockOnWidthChange = jest.fn();

    // Reset mocks
    jest.clearAllMocks();
  });
  it("should initialize with correct default state", () => {
    const {
      getByTestId
    } = renderWithTheme(/*#__PURE__*/_jsx(TestComponent, {
      expandedRef: mockExpandedRef,
      isSmallScreen: false,
      expandedItem: 0,
      onWidthChange: mockOnWidthChange
    }));
    expect(getByTestId("resize-status")).toHaveTextContent("not-resizing");
  });
  it("should handle resize start correctly", () => {
    const {
      getByTestId
    } = renderWithTheme(/*#__PURE__*/_jsx(TestComponent, {
      expandedRef: mockExpandedRef,
      isSmallScreen: false,
      expandedItem: 0,
      onWidthChange: mockOnWidthChange
    }));
    const resizeHandle = getByTestId("resize-handle");
    fireEvent.mouseDown(resizeHandle);
    expect(getByTestId("resize-status")).toHaveTextContent("resizing");
  });
  it("should call onWidthChange when resizing on desktop", () => {
    calculateDesktopWidth.mockReturnValue(400);
    const {
      getByTestId
    } = renderWithTheme(/*#__PURE__*/_jsx(TestComponent, {
      expandedRef: mockExpandedRef,
      isSmallScreen: false,
      expandedItem: 0,
      onWidthChange: mockOnWidthChange,
      currentItem: 1
    }));

    // Start resizing
    const resizeHandle = getByTestId("resize-handle");
    fireEvent.mouseDown(resizeHandle);

    // Simulate mouse move
    fireEvent.mouseMove(document, {
      clientX: 600
    });
    expect(calculateDesktopWidth).toHaveBeenCalledWith(600, expect.any(Object), 1);
    expect(mockOnWidthChange).toHaveBeenCalledWith(400);
  });
  it("should handle mobile resize correctly", () => {
    calculateMobileHeight.mockReturnValue(250);
    const {
      getByTestId
    } = renderWithTheme(/*#__PURE__*/_jsx(TestComponent, {
      expandedRef: mockExpandedRef,
      isSmallScreen: true,
      expandedItem: 0,
      onWidthChange: mockOnWidthChange,
      currentItem: {
        large: false
      }
    }));

    // Start resizing
    const resizeHandle = getByTestId("resize-handle");
    fireEvent.mouseDown(resizeHandle, {
      clientY: 100
    });

    // Simulate mouse move
    fireEvent.mouseMove(document, {
      clientY: 150
    });
    expect(calculateMobileHeight).toHaveBeenCalledWith(150, 100, 300, {
      large: false
    });
    expect(mockExpandedRef.current.style.height).toBe("250px");
  });
  it("should track isResizing state correctly during resize operations", () => {
    const {
      getByTestId
    } = renderWithTheme(/*#__PURE__*/_jsx(TestComponent, {
      expandedRef: mockExpandedRef,
      isSmallScreen: false,
      expandedItem: 0,
      onWidthChange: mockOnWidthChange,
      currentItem: 1
    }));

    // Initially not resizing
    expect(getByTestId("resize-status")).toHaveTextContent("not-resizing");

    // Start resizing
    const resizeHandle = getByTestId("resize-handle");
    fireEvent.mouseDown(resizeHandle);

    // Should be resizing now
    expect(getByTestId("resize-status")).toHaveTextContent("resizing");

    // End resize
    fireEvent.mouseUp(document);

    // Should not be resizing anymore
    expect(getByTestId("resize-status")).toHaveTextContent("not-resizing");
  });
  it("should track hasResized state correctly when resize movement occurs", () => {
    const {
      getByTestId
    } = renderWithTheme(/*#__PURE__*/_jsx(TestComponent, {
      expandedRef: mockExpandedRef,
      isSmallScreen: false,
      expandedItem: 0,
      onWidthChange: mockOnWidthChange,
      currentItem: 1
    }));

    // Initially not resized
    expect(getByTestId("has-resized-status")).toHaveTextContent("not-resized");

    // Start resizing
    const resizeHandle = getByTestId("resize-handle");
    fireEvent.mouseDown(resizeHandle);

    // Still not resized (no movement yet)
    expect(getByTestId("has-resized-status")).toHaveTextContent("not-resized");

    // Simulate mouse move (actual resize)
    fireEvent.mouseMove(document, {
      clientX: 600
    });

    // Should be marked as resized
    expect(getByTestId("has-resized-status")).toHaveTextContent("has-resized");

    // End resize
    fireEvent.mouseUp(document);

    // Should still be marked as resized
    expect(getByTestId("has-resized-status")).toHaveTextContent("has-resized");
  });
});