Genarrative/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx

/* @vitest-environment jsdom */

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

import {
  PlatformMobileHomeWelcomeDialog,
  shouldOpenMobileHomeWelcomeDialog,
  shouldShowMobileHomeWelcomeDialog,
} from './PlatformMobileHomeWelcomeDialog';

test('shows mobile home welcome when entering the mobile site shell', () => {
  expect(
    shouldShowMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'platform',
      platformTab: 'home',
      pathname: '/',
    }),
  ).toBe(true);
  expect(
    shouldShowMobileHomeWelcomeDialog({
      isDesktopLayout: true,
      selectionStage: 'platform',
      platformTab: 'home',
      pathname: '/',
    }),
  ).toBe(false);
  expect(
    shouldShowMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'platform',
      platformTab: 'category',
      pathname: '/',
    }),
  ).toBe(true);
  expect(
    shouldShowMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'creation-home',
      platformTab: 'home',
      pathname: '/creation',
    }),
  ).toBe(true);
});

test('keeps mobile home welcome dismissed across site navigation until refresh', () => {
  expect(
    shouldOpenMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'platform',
      platformTab: 'home',
      pathname: '/',
      isDismissed: false,
    }),
  ).toBe(true);
  expect(
    shouldOpenMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'platform',
      platformTab: 'category',
      pathname: '/',
      isDismissed: true,
    }),
  ).toBe(false);
  expect(
    shouldOpenMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'platform',
      platformTab: 'home',
      pathname: '/',
      isDismissed: true,
    }),
  ).toBe(false);
  expect(
    shouldOpenMobileHomeWelcomeDialog({
      isDesktopLayout: false,
      selectionStage: 'platform',
      platformTab: 'home',
      pathname: '/',
      isDismissed: false,
    }),
  ).toBe(true);
});

test('renders mobile home welcome copy and closes with the acknowledge button', () => {
  const onClose = vi.fn();

  const { container } = render(
    <PlatformMobileHomeWelcomeDialog
      open
      platformThemeClass="platform-theme--light"
      onClose={onClose}
    />,
  );

  expect(screen.getByRole('dialog', { name: '欢迎' })).toBeTruthy();
  expect(
    screen.getByRole('heading', { level: 2, name: '欢迎' }),
  ).toBeTruthy();
  expect(screen.queryByRole('heading', { level: 1 })).toBeNull();
  const copy = document.querySelector(
    '.platform-mobile-home-welcome-dialog__copy',
  );
  expect(copy?.textContent).toBe(
    '尼嚎，新陶泥er！移动端仅支持作品展示体验创作工具请使用电脑端访问该地址',
  );
  expect(copy?.querySelectorAll('br')).toHaveLength(2);
  expect(
    document
      .querySelector('.platform-mobile-home-welcome-dialog__icon')
      ?.getAttribute('src'),
  ).toBe('/branding/mobile-home-welcome-taonier-ip.png');

  fireEvent.click(screen.getByRole('button', { name: '好' }));

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