import { flushSync, mount, unmount } from 'svelte';
import { afterEach, describe, expect, it, vi } from 'vitest';

import Button from './button.svelte';
import MenuButton from './menu-button.svelte';

describe('Button', () => {
  afterEach(() => {
    document.body.innerHTML = '';
  });

  it('转发 onclick 到原生按钮', async () => {
    const handleClick = vi.fn();
    const host = document.createElement('div');
    document.body.appendChild(host);

    const app = mount(Button, {
      target: host,
      props: {
        onclick: handleClick,
      },
    });
    flushSync();

    (host.querySelector('button') as HTMLButtonElement).click();

    expect(handleClick).toHaveBeenCalledTimes(1);

    await unmount(app);
    host.remove();
  });

  it('通过 MenuButton 转发 onclick 到原生按钮', async () => {
    const handleClick = vi.fn();
    const host = document.createElement('div');
    document.body.appendChild(host);

    const app = mount(MenuButton, {
      target: host,
      props: {
        onclick: handleClick,
      },
    });
    flushSync();

    (host.querySelector('button') as HTMLButtonElement).click();

    expect(handleClick).toHaveBeenCalledTimes(1);

    await unmount(app);
    host.remove();
  });
});