import { render } from '@testing-library/vue';
import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
import UiSidebarMenu from '../UiSidebarMenu.vue';
import UiSidebarMenuSub from '../UiSidebarMenuSub.vue';
import {
  createSidebarShell,
  mockMatchMediaDesktop,
} from './sidebar-test-helpers';

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

describe('UiSidebarMenuSub', () => {
  test('border mode adds left border utilities on core sub-menu', () => {
    const { container } = render(
      createSidebarShell(
        `
        <UiSidebarMenu>
          <UiSidebarMenuSub mode="border" data-testid="sub" />
        </UiSidebarMenu>
      `,
        { UiSidebarMenu, UiSidebarMenuSub },
      ),
    );
    const el = container.querySelector('[data-testid="sub"]');
    expect(el?.className).toMatch(/border-l/);
  });

  test('indent mode removes horizontal margin utilities', () => {
    const { container } = render(
      createSidebarShell(
        `
        <UiSidebarMenu>
          <UiSidebarMenuSub mode="indent" data-testid="sub" />
        </UiSidebarMenu>
      `,
        { UiSidebarMenu, UiSidebarMenuSub },
      ),
    );
    const el = container.querySelector('[data-testid="sub"]');
    expect(el?.className).toMatch(/!mx-0/);
  });
});
