Genarrative/src/components/common/PlatformAsyncStatePanel.test.tsx

/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { describe, expect, test } from 'vitest';

import { PlatformAsyncStatePanel } from './PlatformAsyncStatePanel';

describe('PlatformAsyncStatePanel', () => {
  test('prefers error state over loading and content', () => {
    render(
      <PlatformAsyncStatePanel
        errorState={<div>出错了</div>}
        isLoading
        loadingState={<div>读取中</div>}
      >
        <div>内容</div>
      </PlatformAsyncStatePanel>,
    );

    expect(screen.getByText('出错了')).toBeTruthy();
    expect(screen.queryByText('读取中')).toBeNull();
    expect(screen.queryByText('内容')).toBeNull();
  });

  test('renders loading state before empty state', () => {
    render(
      <PlatformAsyncStatePanel
        isLoading
        isEmpty
        loadingState={<div>读取中</div>}
        emptyState={<div>暂无内容</div>}
      >
        <div>内容</div>
      </PlatformAsyncStatePanel>,
    );

    expect(screen.getByText('读取中')).toBeTruthy();
    expect(screen.queryByText('暂无内容')).toBeNull();
  });

  test('renders empty state when requested', () => {
    render(
      <PlatformAsyncStatePanel isEmpty emptyState={<div>暂无内容</div>}>
        <div>内容</div>
      </PlatformAsyncStatePanel>,
    );

    expect(screen.getByText('暂无内容')).toBeTruthy();
    expect(screen.queryByText('内容')).toBeNull();
  });

  test('falls back to content when no async state is active', () => {
    render(
      <PlatformAsyncStatePanel>
        <div>内容</div>
      </PlatformAsyncStatePanel>,
    );

    expect(screen.getByText('内容')).toBeTruthy();
  });
});