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

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

describe('UiSidebarPopoverMenu', () => {
  test('renders label header and data-slot', () => {
    const { container, getByText } = render(
      createSidebarShell(
        `
        <UiSidebarPopoverMenu label="Teams">
          <UiSidebarPopoverMenuItem label="One" />
        </UiSidebarPopoverMenu>
      `,
        { UiSidebarPopoverMenu, UiSidebarPopoverMenuItem },
      ),
    );
    expect(
      container.querySelector('[data-slot="sidebar-popover-menu"]'),
    ).toBeTruthy();
    expect(getByText('Teams')).toBeInTheDocument();
    expect(getByText('One')).toBeInTheDocument();
  });
});
