import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiKbd from '../UiKbd.vue';
import UiKbdGroup from '../UiKbdGroup.vue';

describe('UiKbd', () => {
  test('renders kbd element with slot content', () => {
    const { getByText } = render(UiKbd, {
      slots: { default: 'Ctrl' },
    });
    expect(getByText('Ctrl')).toBeInTheDocument();
  });

  test('renders as kbd HTML element', () => {
    const { container } = render(UiKbd, {
      slots: { default: 'K' },
    });
    const kbd = container.querySelector('kbd');
    expect(kbd).toBeInTheDocument();
  });

  test('has data-slot attribute', () => {
    const { container } = render(UiKbd, {
      slots: { default: 'Enter' },
    });
    const kbd = container.querySelector('[data-slot="kbd"]');
    expect(kbd).toBeInTheDocument();
  });
});

describe('UiKbdGroup', () => {
  test('renders span element with slot content', () => {
    const { getByText } = render(UiKbdGroup, {
      slots: { default: 'Content' },
    });
    expect(getByText('Content')).toBeInTheDocument();
  });

  test('has data-slot attribute', () => {
    const { container } = render(UiKbdGroup, {
      slots: { default: 'Group' },
    });
    const group = container.querySelector('[data-slot="kbd-group"]');
    expect(group).toBeInTheDocument();
  });
});
