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

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

describe('UiSidebarGroupLabel', () => {
  test('emits collapse-click', async () => {
    const user = userEvent.setup();
    const onCollapse = vi.fn();
    const Harness = defineComponent({
      components: {
        UiSidebarProvider,
        UiSidebar,
        UiSidebarContent,
        UiSidebarGroup,
        UiSidebarGroupLabel,
      },
      setup() {
        return { onCollapse };
      },
      template: `
        <UiSidebarProvider :default-open="true">
          <UiSidebar collapsible="none">
            <UiSidebarContent>
              <UiSidebarGroup :default-open="true">
                <UiSidebarGroupLabel
                  :show-action="false"
                  :collapse-tooltip="''"
                  collapse-aria-label="Toggle section"
                  @collapse-click="onCollapse"
                >
                  Section
                </UiSidebarGroupLabel>
              </UiSidebarGroup>
            </UiSidebarContent>
          </UiSidebar>
        </UiSidebarProvider>
      `,
    });
    const { getByRole } = render(Harness);
    await user.click(getByRole('button', { name: 'Toggle section' }));
    expect(onCollapse).toHaveBeenCalledTimes(1);
  });
});
