import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import { ConfirmDialog } from './confirm-dialog';

describe('ConfirmDialog', () => {
  it('associates its title and destructive-action description', () => {
    const html = renderToStaticMarkup(
      <ConfirmDialog open title="放弃当前配对？" description="将清理临时资源" onCancel={() => undefined} onConfirm={() => undefined} />,
    );

    const labelledBy = html.match(/aria-labelledby="([^"]+)"/)?.[1];
    const describedBy = html.match(/aria-describedby="([^"]+)"/)?.[1];
    expect(labelledBy).toBeTruthy();
    expect(describedBy).toBeTruthy();
    expect(html).toContain(`id="${labelledBy}"`);
    expect(html).toContain(`id="${describedBy}"`);
    expect(html).toContain('tabindex="-1"');
  });

  it('keeps the modal container focusable while its actions are loading', () => {
    const html = renderToStaticMarkup(
      <ConfirmDialog open loading title="安全退役？" onCancel={() => undefined} onConfirm={() => undefined} />,
    );

    expect(html).toContain('aria-busy="true"');
    expect(html).toContain('tabindex="-1"');
    expect(html.match(/disabled=""/g)?.length).toBe(2);
  });
});
