// @vitest-environment jsdom

import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import { CollapsibleSidebarPanel } from '../src/view/ui-editor/components/CollapsibleSidebarPanel';

describe('CollapsibleSidebarPanel', () => {
  it('uses a zero flex basis when panels expand', () => {
    render(
      <div className="flex h-96 flex-col gap-3">
        <CollapsibleSidebarPanel label="Tree" title="UI Tree" grow={2}>
          <div>tree content</div>
        </CollapsibleSidebarPanel>
        <CollapsibleSidebarPanel label="Input" title="界面图">
          <div>input content</div>
        </CollapsibleSidebarPanel>
      </div>,
    );

    const treePanel = screen
      .getByRole('heading', { name: 'UI Tree' })
      .closest('section');
    const inputPanel = screen
      .getByRole('heading', { name: '界面图' })
      .closest('section');

    expect(treePanel?.style.flex).toBe('2 1 0px');
    expect(inputPanel?.style.flex).toBe('1 1 0px');

    fireEvent.click(screen.getByRole('button', { name: /UI Tree/ }));
    expect(treePanel?.style.flex).toBe('0 0 auto');

    fireEvent.click(screen.getByRole('button', { name: /UI Tree/ }));
    expect(treePanel?.style.flex).toBe('2 1 0px');
  });
});