ResizablePanel.test.jsx

import { render, screen, fireEvent, cleanup } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, describe, it, expect } from 'vitest';
import { ResizablePanel } from '../ResizablePanel';
import i18n from '../../i18n';

const getRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
const pxToRem = (px) => `${px / getRootFontSize()}rem`;

afterEach(() => {
  cleanup();
});

describe('ResizablePanel', () => {
  it('renders content and adjusts height with keyboard', async () => {
    const user = userEvent.setup();
    render(
      <ResizablePanel title="Test" initialHeight={300}>
        <div>content</div>
      </ResizablePanel>
    );

    const region = screen.getByRole('region', { name: /Test/ });
    expect(region.style.height).toBe(pxToRem(300));
    screen.getByText('content');

    const handle = screen.getByRole('button', { name: i18n.t('resize.adjust', { title: 'Test' }) });
    handle.focus();
    await user.keyboard('{ArrowUp}');
    expect(region.style.height).toBe(pxToRem(290));
    await user.keyboard('{ArrowDown}{ArrowDown}');
    expect(region.style.height).toBe(pxToRem(310));
  });

  it('resizes using mouse drag', () => {
    render(
      <ResizablePanel title="Test" initialHeight={300}>
        <div>content</div>
      </ResizablePanel>
    );

    const region = screen.getByRole('region', { name: /Test/ });
    const handle = screen.getByRole('button', { name: i18n.t('resize.adjust', { title: 'Test' }) });

    fireEvent.mouseDown(handle, { clientY: 0 });
    fireEvent.mouseMove(document, { clientY: 40 });
    fireEvent.mouseUp(document);

    expect(region.style.height).toBe(pxToRem(340));
  });
});