@oanda/labs-widget-common 1.0.200 → 1.0.202

package/test/components/SwitchItem.test.tsx

@@ -0,0 +1,239 @@
+/**
+ * @jest-environment jsdom
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { SwitchItem } from '../../src/components/Switch/SwitchItem';
+
+jest.mock('usehooks-ts', () => ({
+  ...jest.requireActual('usehooks-ts'),
+  useResizeObserver: jest.fn(),
+}));
+
+const mockItem = { id: 'item1', label: 'Test Item 1' };
+
+describe('SwitchItem', () => {
+  let originalGetBoundingClientRect: () => DOMRect;
+
+  const mockedUseResizeObserver = jest.requireMock('usehooks-ts')
+    .useResizeObserver as jest.Mock;
+
+  beforeEach(() => {
+    originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+
+    mockedUseResizeObserver.mockClear();
+
+    mockedUseResizeObserver.mockImplementation(
+      (options: { ref: React.RefObject<Element>; onResize: () => void }) => {
+        React.useEffect(() => {
+          if (options.ref.current && typeof options.onResize === 'function') {
+            options.onResize();
+          }
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [options.ref.current]);
+      }
+    );
+  });
+
+  afterEach(() => {
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    jest.restoreAllMocks();
+  });
+
+  it('should render correctly with basic props (inactive)', () => {
+    render(
+      <SwitchItem
+        handleClick={jest.fn()}
+        handleRender={jest.fn()}
+        isActive={false}
+        item={mockItem}
+      />
+    );
+    const listItem = screen.getByTestId('switch-item');
+    expect(listItem).toBeInTheDocument();
+    expect(listItem).not.toHaveClass('lw-text-text-negative');
+
+    const button = screen.getByRole('button', { name: 'Test Item 1' });
+    expect(button).toBeInTheDocument();
+    expect(button).not.toBeDisabled();
+    expect(button).not.toHaveAttribute('aria-current');
+    expect(button).toHaveValue(mockItem.id);
+  });
+
+  it('should render correctly when active', () => {
+    render(
+      <SwitchItem
+        handleClick={jest.fn()}
+        handleRender={jest.fn()}
+        isActive={true}
+        item={mockItem}
+      />
+    );
+    const listItem = screen.getByTestId('switch-item');
+    expect(listItem).toHaveClass('lw-text-text-negative');
+
+    const button = screen.getByRole('button', { name: 'Test Item 1' });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-current', 'true');
+  });
+
+  it('should call handleClick when button is clicked and not active', () => {
+    const handleClickMock = jest.fn();
+    render(
+      <SwitchItem
+        handleClick={handleClickMock}
+        handleRender={jest.fn()}
+        isActive={false}
+        item={mockItem}
+      />
+    );
+    const button = screen.getByRole('button', { name: 'Test Item 1' });
+    fireEvent.click(button);
+    expect(handleClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call handleClick when button is clicked and active (button is disabled)', () => {
+    const handleClickMock = jest.fn();
+    render(
+      <SwitchItem
+        handleClick={handleClickMock}
+        handleRender={jest.fn()}
+        isActive={true}
+        item={mockItem}
+      />
+    );
+    const button = screen.getByRole('button', { name: 'Test Item 1' });
+    fireEvent.click(button);
+    expect(handleClickMock).not.toHaveBeenCalled();
+  });
+
+  it('should apply equalSize styles when equalSize prop is true', () => {
+    render(
+      <SwitchItem
+        equalSize={true}
+        handleClick={jest.fn()}
+        handleRender={jest.fn()}
+        isActive={false}
+        item={mockItem}
+      />
+    );
+    const listItem = screen.getByTestId('switch-item');
+    expect(listItem).toHaveClass('lw-shrink-0', 'lw-basis-0');
+  });
+
+  it('should not apply equalSize styles when equalSize prop is false or undefined', () => {
+    const { rerender } = render(
+      <SwitchItem
+        equalSize={false}
+        handleClick={jest.fn()}
+        handleRender={jest.fn()}
+        isActive={false}
+        item={mockItem}
+      />
+    );
+    let listItem = screen.getByTestId('switch-item');
+    expect(listItem).not.toHaveClass('lw-shrink-0');
+    expect(listItem).not.toHaveClass('lw-basis-0');
+
+    rerender(
+      <SwitchItem
+        handleClick={jest.fn()}
+        handleRender={jest.fn()}
+        isActive={false}
+        item={mockItem}
+      />
+    );
+    listItem = screen.getByTestId('switch-item');
+    expect(listItem).not.toHaveClass('lw-shrink-0');
+    expect(listItem).not.toHaveClass('lw-basis-0');
+  });
+
+  it('should use labelCallback to modify the label', () => {
+    const labelCallback = (label: string) => `Callback: ${label}`;
+    render(
+      <SwitchItem
+        handleClick={jest.fn()}
+        handleRender={jest.fn()}
+        isActive={false}
+        item={mockItem}
+        labelCallback={labelCallback}
+      />
+    );
+    const button = screen.getByRole('button', {
+      name: 'Callback: Test Item 1',
+    });
+    expect(button).toBeInTheDocument();
+    expect(screen.getByText('Callback: Test Item 1')).toBeInTheDocument();
+  });
+
+  describe('handleRender calls (via useResizeObserver mock)', () => {
+    it('should call handleRender with correct dimensions when active and component mounts', () => {
+      const handleRenderMock = jest.fn();
+      const mockLiRect = {
+        left: 50,
+        width: 120,
+        top: 0,
+        height: 40,
+        x: 0,
+        y: 0,
+        bottom: 0,
+        right: 0,
+        toJSON: () => {},
+      } as DOMRect;
+
+      // eslint-disable-next-line func-names
+      Element.prototype.getBoundingClientRect = jest.fn(function (
+        this: Element
+      ) {
+        if (
+          this.tagName === 'LI' &&
+          (this as HTMLElement).dataset.testid === 'switch-item'
+        ) {
+          return mockLiRect;
+        }
+        return originalGetBoundingClientRect.call(this);
+      });
+
+      render(
+        <SwitchItem
+          handleClick={jest.fn()}
+          handleRender={handleRenderMock}
+          isActive={true}
+          item={mockItem}
+        />
+      );
+
+      expect(handleRenderMock).toHaveBeenCalledTimes(1);
+      expect(handleRenderMock).toHaveBeenCalledWith({
+        left: mockLiRect.left,
+        width: mockLiRect.width,
+      });
+    });
+
+    it('should NOT call handleRender when inactive, even on mount', () => {
+      const handleRenderMock = jest.fn();
+      Element.prototype.getBoundingClientRect = jest.fn().mockReturnValue({
+        left: 50,
+        width: 120,
+        top: 0,
+        height: 40,
+        x: 0,
+        y: 0,
+        bottom: 0,
+        right: 0,
+        toJSON: () => {},
+      } as DOMRect);
+
+      render(
+        <SwitchItem
+          handleClick={jest.fn()}
+          handleRender={handleRenderMock}
+          isActive={false}
+          item={mockItem}
+        />
+      );
+      expect(handleRenderMock).not.toHaveBeenCalled();
+    });
+  });
+});

package/test/utils/useNumberFormat.test.tsx

@@ -0,0 +1,127 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useNumberFormat } from '../../src';
+
+describe('useNumberFormat', () => {
+  it('should initialize with undefined if no initialValue is provided', () => {
+    const { result } = renderHook(() => useNumberFormat({}));
+    expect(result.current.value).toBeUndefined();
+  });
+
+  it('should initialize with the provided initialValue', () => {
+    const { result } = renderHook(() => useNumberFormat({ initialValue: 10 }));
+    expect(result.current.value).toBe(10);
+  });
+
+  it('should update value on handleValueChange', () => {
+    const { result } = renderHook(() => useNumberFormat({ initialValue: 10 }));
+    act(() => {
+      result.current.handleValueChange({
+        formattedValue: '20',
+        value: '20',
+        floatValue: 20,
+      });
+    });
+    expect(result.current.value).toBe(20);
+  });
+
+  it('should increment value by default step (1)', () => {
+    const { result } = renderHook(() => useNumberFormat({ initialValue: 5 }));
+    act(() => {
+      result.current.increment();
+    });
+    expect(result.current.value).toBe(6);
+  });
+
+  it('should increment value by provided step', () => {
+    const { result } = renderHook(() =>
+      useNumberFormat({ initialValue: 5, step: 5 })
+    );
+    act(() => {
+      result.current.increment();
+    });
+    expect(result.current.value).toBe(10);
+  });
+
+  it('should not increment if value is undefined', () => {
+    const { result } = renderHook(() => useNumberFormat({}));
+    act(() => {
+      result.current.increment();
+    });
+    expect(result.current.value).toBeUndefined();
+  });
+
+  it('should decrement value by default step (1)', () => {
+    const { result } = renderHook(() => useNumberFormat({ initialValue: 5 }));
+    act(() => {
+      result.current.decrement();
+    });
+    expect(result.current.value).toBe(4);
+  });
+
+  it('should decrement value by provided step', () => {
+    const { result } = renderHook(() =>
+      useNumberFormat({ initialValue: 10, step: 5 })
+    );
+    act(() => {
+      result.current.decrement();
+    });
+    expect(result.current.value).toBe(5);
+  });
+
+  it('should not decrement if value is undefined', () => {
+    const { result } = renderHook(() => useNumberFormat({}));
+    act(() => {
+      result.current.decrement();
+    });
+    expect(result.current.value).toBeUndefined();
+  });
+
+  it('should not decrement below zero', () => {
+    const { result } = renderHook(() => useNumberFormat({ initialValue: 0 }));
+    act(() => {
+      result.current.decrement();
+    });
+    expect(result.current.value).toBe(0);
+
+    const { result: result2 } = renderHook(() =>
+      useNumberFormat({ initialValue: 2, step: 3 })
+    );
+    act(() => {
+      result2.current.decrement();
+    });
+    expect(result2.current.value).toBe(2); // Stays at 2 because 2 - 3 < 0
+  });
+
+  it('should not decrement if value is 0 and step is positive', () => {
+    const { result } = renderHook(() =>
+      useNumberFormat({ initialValue: 0, step: 5 })
+    );
+    act(() => {
+      result.current.decrement();
+    });
+    expect(result.current.value).toBe(0);
+  });
+
+  it('should handle decrement when value - step is less than 0', () => {
+    const { result } = renderHook(() =>
+      useNumberFormat({ initialValue: 1, step: 2 })
+    );
+    act(() => {
+      result.current.decrement();
+    });
+    // The current logic: `prevValue !== undefined && prevValue - step >= 0 ? prevValue - step : prevValue`
+    // So, if 1 - 2 < 0, it should return prevValue (1)
+    expect(result.current.value).toBe(1);
+  });
+
+  it('increment should set value to undefined if prevValue is negative (though this state is unlikely given NumericFormat constraints)', () => {
+    // This tests the hook's internal logic, even if NumericFormat prevents negative inputs.
+    const { result } = renderHook(() => useNumberFormat({ initialValue: -5 }));
+    act(() => {
+      result.current.increment();
+    });
+    // prevValue (-5) is not >= 0, so it becomes undefined
+    expect(result.current.value).toBeUndefined();
+  });
+});