import { render } from '@testing-library/vue';
import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
import UiSidebar from '../UiSidebar.vue';
import UiSidebarProvider from '../UiSidebarProvider.vue';
import UiSidebarRail from '../UiSidebarRail.vue';
import {
  createOffcanvasSidebar,
  mockMatchMediaDesktop,
} from './sidebar-test-helpers';

beforeEach(() => mockMatchMediaDesktop());
afterEach(() => vi.restoreAllMocks());

describe('UiSidebarRail', () => {
  test('mounts rail control inside offcanvas sidebar', () => {
    const { container } = render(
      createOffcanvasSidebar('<UiSidebarRail />', {
        UiSidebarProvider,
        UiSidebar,
        UiSidebarRail,
      }),
    );
    expect(container.querySelector('[data-sidebar="rail"]')).toBeTruthy();
  });

  test('uses pointer cursor because rail toggles rather than resizes', () => {
    const { container } = render(
      createOffcanvasSidebar('<UiSidebarRail />', {
        UiSidebarProvider,
        UiSidebar,
        UiSidebarRail,
      }),
    );
    const rail = container.querySelector('[data-sidebar="rail"]');

    expect(rail).toHaveClass('cursor-pointer');
    expect(rail).not.toHaveClass('in-data-[side=left]:cursor-w-resize');
  });
});
