Genarrative/packages/shared/src/components/GameDetailDisplay/index.test.tsx

/* @vitest-environment jsdom */

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

import { GameDetailDisplay } from './index';

describe('GameDetailDisplay', () => {
  test('renders host-provided data and switches the hero through asset urls', async () => {
    render(
      <GameDetailDisplay
        game={{
          title: '星轨防线',
          summary: '守住最后一条航线。',
          description: '一款测试游戏。',
          category: '动作',
          tags: ['测试'],
          author: { name: '陶泥儿' },
          deviceSupport: { desktop: true, mobile: false, touch: false },
          playCount: 1200,
        }}
        coverObjectKey="cover/alpha.png"
        screenshotObjectKeys={['screenshot/one.png']}
        assetUrls={{
          'cover/alpha.png': 'https://assets.example.test/cover/alpha.png',
          'screenshot/one.png':
            'https://assets.example.test/screenshot/one.png',
        }}
        controlsLabel="键盘"
        versionLabel="v2"
        rating={<span>评分 9.1</span>}
        actions={<button type="button">试玩当前待审版本</button>}
        infoCards={[{ label: '发行包', value: '2.0 MiB' }]}
        footnoteText="游戏运行在独立的安全容器中。"
      />,
    );

    expect(screen.getByRole('heading', { name: '星轨防线' })).toBeTruthy();
    expect(screen.getByText('由 陶泥儿 制作')).toBeTruthy();
    expect(screen.getByText(/次游玩$/u)).toBeTruthy();
    expect(screen.getByText('评分 9.1')).toBeTruthy();
    expect(
      screen.getByRole('button', { name: '试玩当前待审版本' }),
    ).toBeTruthy();
    expect(screen.getByText('键盘')).toBeTruthy();
    expect(screen.getByText('v2')).toBeTruthy();
    expect(screen.getByText('发行包').parentElement?.textContent).toBe(
      '发行包2.0 MiB',
    );
    expect(screen.getByText('游戏运行在独立的安全容器中。')).toBeTruthy();

    const heroImage = () =>
      document.querySelector('.game-detail-cover img')?.getAttribute('src');
    expect(heroImage()).toBe('https://assets.example.test/cover/alpha.png');

    const thumbs = screen.getAllByRole('button', { name: /（查看大图）/u });
    expect(thumbs).toHaveLength(2);
    fireEvent.click(thumbs[1]!);
    await waitFor(() =>
      expect(heroImage()).toBe(
        'https://assets.example.test/screenshot/one.png',
      ),
    );
  });
});