import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { nextTick } from 'vue';
import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
import UiSidebarGroup from '../UiSidebarGroup.vue';
import UiSidebarGroupContent from '../UiSidebarGroupContent.vue';
import UiSidebarGroupLabel from '../UiSidebarGroupLabel.vue';
import {
  createSidebarShell,
  mockMatchMediaDesktop,
} from './sidebar-test-helpers';

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

describe('UiSidebarGroupContent', () => {
  test('hides when group starts closed', async () => {
    const user = userEvent.setup();
    const { getByRole, queryByTestId } = render(
      createSidebarShell(
        `
        <UiSidebarGroup :default-open="false">
          <UiSidebarGroupLabel
            :show-action="false"
            :collapse-tooltip="''"
            collapse-aria-label="Toggle section"
          >
            Section
          </UiSidebarGroupLabel>
          <UiSidebarGroupContent>
            <span data-testid="inner">Body</span>
          </UiSidebarGroupContent>
        </UiSidebarGroup>
      `,
        { UiSidebarGroup, UiSidebarGroupLabel, UiSidebarGroupContent },
      ),
    );
    expect(queryByTestId('inner')).not.toBeInTheDocument();
    await user.click(getByRole('button', { name: 'Toggle section' }));
    await nextTick();
    expect(queryByTestId('inner')).toBeInTheDocument();
  });
});
