Genarrative/apps/ai-game-creator-shell/tests/launcherNoticeToast.test.tsx

/** @vitest-environment jsdom */
import { act, cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';

import { LauncherNoticeToast } from '../src/features/app-shell/LauncherNoticeToast';

const RUN_MESSAGE = '运行通过，已载入客户端运行视图';

function toastElement() {
  return document.querySelector('[data-launcher-notice-toast="true"]');
}

describe('外壳浮层提示', () => {
  afterEach(() => {
    cleanup();
    vi.useRealTimers();
  });

  it('没有提示时不渲染任何浮层', () => {
    render(<LauncherNoticeToast notice={null} onDismiss={vi.fn()} />);

    expect(toastElement()).toBeNull();
    expect(screen.queryByText(RUN_MESSAGE)).toBeNull();
  });

  it('在浮层里显示提示，并在到点后自动收起', () => {
    vi.useFakeTimers();
    const onDismiss = vi.fn();

    render(
      <LauncherNoticeToast
        notice={{ id: 1, message: RUN_MESSAGE }}
        onDismiss={onDismiss}
      />,
    );

    expect(toastElement()).not.toBeNull();
    expect(screen.getByText(RUN_MESSAGE)).not.toBeNull();

    act(() => {
      vi.advanceTimersByTime(2_600);
    });

    expect(onDismiss).toHaveBeenCalledTimes(1);
  });

  it('同一句文案连续触发时重新计时', () => {
    vi.useFakeTimers();
    const onDismiss = vi.fn();
    const { rerender } = render(
      <LauncherNoticeToast
        notice={{ id: 1, message: RUN_MESSAGE }}
        onDismiss={onDismiss}
      />,
    );

    rerender(
      <LauncherNoticeToast
        notice={{ id: 2, message: RUN_MESSAGE }}
        onDismiss={onDismiss}
      />,
    );
    act(() => {
      vi.advanceTimersByTime(2_000);
    });
    expect(onDismiss).not.toHaveBeenCalled();

    act(() => {
      vi.advanceTimersByTime(600);
    });
    expect(onDismiss).toHaveBeenCalledTimes(1);
  });

  it('父组件重渲染（换一个内联收起回调）不重新计时', () => {
    vi.useFakeTimers();
    const onDismiss = vi.fn();
    // 同一条提示的状态对象在外壳里是稳定的；会变的只有每次都新写的内联回调。
    const notice = { id: 1, message: RUN_MESSAGE };
    const { rerender } = render(
      <LauncherNoticeToast notice={notice} onDismiss={onDismiss} />,
    );

    act(() => {
      vi.advanceTimersByTime(2_000);
    });
    rerender(
      <LauncherNoticeToast notice={notice} onDismiss={() => onDismiss()} />,
    );
    act(() => {
      vi.advanceTimersByTime(600);
    });
    expect(onDismiss).toHaveBeenCalledTimes(1);
  });

  it('失败提示用错误色调，不需要调用方再拼一套文案', () => {
    render(
      <LauncherNoticeToast
        notice={{
          id: 1,
          tone: 'error',
          message: '在浏览器打开失败：permission denied',
        }}
        onDismiss={vi.fn()}
      />,
    );

    const toast = toastElement()?.querySelector(
      '.platform-runtime-status-toast',
    );
    // `PlatformRuntimeStatusToast` 的失败态就是 alert + assertive，成功态是 status + polite。
    expect(toast?.getAttribute('role')).toBe('alert');
    expect(
      screen.getByText('在浏览器打开失败：permission denied'),
    ).not.toBeNull();
  });

  it('失败提示比成功提示留得久：2.6 秒不该把错误收走', () => {
    vi.useFakeTimers();
    const onDismiss = vi.fn();
    render(
      <LauncherNoticeToast
        notice={{
          id: 1,
          tone: 'error',
          message: '运行游戏失败：预览端口被占用',
        }}
        onDismiss={onDismiss}
      />,
    );

    act(() => {
      vi.advanceTimersByTime(2_600);
    });
    expect(onDismiss).not.toHaveBeenCalled();

    act(() => {
      vi.advanceTimersByTime(3_400);
    });
    expect(onDismiss).toHaveBeenCalledTimes(1);
  });

  it('取消回显走同样的浮层，短时收起', () => {
    vi.useFakeTimers();
    const onDismiss = vi.fn();
    render(
      <LauncherNoticeToast
        notice={{ id: 1, tone: 'neutral', message: '已取消' }}
        onDismiss={onDismiss}
      />,
    );

    expect(screen.getByText('已取消')).not.toBeNull();
    expect(toastElement()?.querySelector('[role="status"]')).not.toBeNull();

    act(() => {
      vi.advanceTimersByTime(2_600);
    });
    expect(onDismiss).toHaveBeenCalledTimes(1);
  });

  it('粘性提示（承接原状态栏）不自动收起', () => {
    vi.useFakeTimers();
    const onDismiss = vi.fn();
    render(
      <LauncherNoticeToast
        notice={{ id: 1, sticky: true, message: '正在创建工作区' }}
        onDismiss={onDismiss}
      />,
    );

    act(() => {
      vi.advanceTimersByTime(60_000);
    });

    expect(onDismiss).not.toHaveBeenCalled();
    expect(screen.getByText('正在创建工作区')).not.toBeNull();
  });
});