Genarrative/src/components/image-editor/UnifiedModalPortalTheme.test.tsx

/* @vitest-environment jsdom */

import { cleanup, render, screen } from '@testing-library/react';
import type { ComponentProps, ReactNode } from 'react';
import { afterEach, expect, test } from 'vitest';

import { AuthUiContext } from '../auth/AuthUiContext';
import { UnifiedModal } from '../common/UnifiedModal';

const DARK_AUTH_UI_VALUE = {
  platformTheme: 'dark',
} as ComponentProps<typeof AuthUiContext.Provider>['value'];

afterEach(() => {
  cleanup();
});

function withDarkAuthUi(children: ReactNode) {
  return (
    <AuthUiContext.Provider value={DARK_AUTH_UI_VALUE}>
      {children}
    </AuthUiContext.Provider>
  );
}

function getOverlay() {
  return screen.getByRole('dialog', { name: '主题弹窗' })
    .parentElement as HTMLElement;
}

test('restores the contextual platform theme on the portal overlay', () => {
  render(
    withDarkAuthUi(
      <UnifiedModal open title="主题弹窗" onClose={() => {}}>
        弹窗内容
      </UnifiedModal>,
    ),
  );

  expect(getOverlay().className).toContain('platform-theme');
  expect(getOverlay().className).toContain('platform-theme--dark');
  expect(getOverlay().parentElement).toBe(document.body);
});

test('falls back to light when no AuthUi provider is available', () => {
  render(
    <UnifiedModal open title="主题弹窗" onClose={() => {}}>
      弹窗内容
    </UnifiedModal>,
  );

  expect(getOverlay().className).toContain('platform-theme--light');
});

test('respects an existing explicit theme and supports a forced override', () => {
  const { rerender } = render(
    withDarkAuthUi(
      <UnifiedModal
        open
        title="主题弹窗"
        onClose={() => {}}
        overlayClassName="platform-theme platform-theme--light custom-overlay"
      >
        弹窗内容
      </UnifiedModal>,
    ),
  );

  expect(getOverlay().className).toContain('platform-theme--light');
  expect(getOverlay().className).not.toContain('platform-theme--dark');
  expect(getOverlay().className).toContain('custom-overlay');

  rerender(
    withDarkAuthUi(
      <UnifiedModal
        open
        title="主题弹窗"
        onClose={() => {}}
        portalTheme="dark"
        overlayClassName="platform-theme platform-theme--light custom-overlay"
      >
        弹窗内容
      </UnifiedModal>,
    ),
  );

  expect(getOverlay().className).toContain('platform-theme--dark');
  expect(getOverlay().className).not.toContain('platform-theme--light');
});

test('keeps custom and inline modals outside automatic portal theming', () => {
  const { rerender } = render(
    withDarkAuthUi(
      <UnifiedModal
        open
        title="主题弹窗"
        onClose={() => {}}
        portalTheme="none"
        overlayClassName="custom-overlay"
      >
        弹窗内容
      </UnifiedModal>,
    ),
  );

  expect(getOverlay().className).toContain('custom-overlay');
  expect(getOverlay().className).not.toContain('platform-theme--');

  rerender(
    withDarkAuthUi(
      <UnifiedModal
        open
        title="主题弹窗"
        onClose={() => {}}
        portal={false}
        overlayClassName="inline-overlay"
      >
        弹窗内容
      </UnifiedModal>,
    ),
  );

  expect(getOverlay().className).toContain('inline-overlay');
  expect(getOverlay().className).not.toContain('platform-theme--');
});