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 UiSidebarMenuSubItem from '../UiSidebarMenuSubItem.vue';
import {
  createSidebarShell,
  mockMatchMediaDesktop,
} from './sidebar-test-helpers';

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

describe('UiSidebarMenuSubItem', () => {
  test('renders label inside sub-item shell', () => {
    const { container, getByText } = render(
      createSidebarShell(
        `
        <UiSidebarMenu>
          <UiSidebarMenuSub>
            <UiSidebarMenuSubItem>Deep</UiSidebarMenuSubItem>
          </UiSidebarMenuSub>
        </UiSidebarMenu>
      `,
        { UiSidebarMenu, UiSidebarMenuSub, UiSidebarMenuSubItem },
      ),
    );
    expect(
      container.querySelector('[data-sidebar="menu-sub-item"]'),
    ).toBeTruthy();
    expect(getByText('Deep')).toBeInTheDocument();
  });
});
