import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Switch } from './switch';

describe('Switch', () => {
  it('toggles on click', async () => {
    const onCheckedChange = vi.fn();
    render(<Switch aria-label="Airplane mode" onCheckedChange={onCheckedChange} />);

    await userEvent.click(screen.getByRole('switch', { name: 'Airplane mode' }));

    expect(onCheckedChange).toHaveBeenCalledWith(true);
  });

  it('toggles with the keyboard', async () => {
    const onCheckedChange = vi.fn();
    render(<Switch aria-label="Airplane mode" onCheckedChange={onCheckedChange} />);

    await userEvent.tab();
    expect(screen.getByRole('switch', { name: 'Airplane mode' })).toHaveFocus();

    await userEvent.keyboard(' ');
    expect(onCheckedChange).toHaveBeenCalledWith(true);
  });

  it('exposes the size through a data attribute', () => {
    render(<Switch aria-label="Compact" size="sm" />);
    expect(screen.getByRole('switch', { name: 'Compact' })).toHaveAttribute('data-size', 'sm');
  });
});