import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import { PanelLoadingState } from '../../src/components/PanelLoadingState/PanelLoadingState';

describe('PanelLoadingState', () => {
  it('centers the popup spinner beside the current loading message without branding', () => {
    const markup = renderToStaticMarkup(<PanelLoadingState message="Loading saved client …"/>);

    expect(markup).toContain('class="panel-loading-state"');
    expect(markup).toContain('role="status"');
    expect(markup).toContain('aria-label="Loading saved client …"');
    expect(markup).toContain('class="import-spinner"');
    expect(markup).toContain('<span>Loading saved client …</span>');
    expect(markup).not.toContain('<img');
  });

  it('supports the same branded state in compact loading regions', () => {
    expect(renderToStaticMarkup(<PanelLoadingState message="Loading results …" compact/>))
      .toContain('class="panel-loading-state is-compact"');
  });
});