/* @vitest-environment jsdom */

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type { ComponentProps } from 'react';
import { describe, expect, it, vi } from 'vitest';

import App from './App';

vi.mock('./components/platform-entry/PlatformEntryFlowShell', async () => {
  const React = await import('react');
  type PlatformEntryFlowShellProps = ComponentProps<
    typeof import('./components/platform-entry/PlatformEntryFlowShell').PlatformEntryFlowShell
  >;

  return {
    PlatformEntryFlowShell: ({ setSelectionStage }: PlatformEntryFlowShellProps) =>
      React.createElement(
        'button',
        {
          type: 'button',
          onClick: () => {
            setSelectionStage('image-editor', {
              path: '/editor/canvas?projectid=project-from-test',
            });
          },
        },
        '打开最近项目',
      ),
  };
});

vi.mock('./RpgRuntimeApp', () => ({
  RpgRuntimeApp: () => <div>运行态</div>,
}));

describe('App navigation history', () => {
  it('keeps project canvas navigation as one history entry with projectid', async () => {
    window.history.replaceState(null, '', '/creation');
    const pushStateSpy = vi.spyOn(window.history, 'pushState');
    const user = userEvent.setup();

    render(<App />);

    await user.click(screen.getByRole('button', { name: '打开最近项目' }));

    await waitFor(() => {
      expect(window.location.pathname).toBe('/editor/canvas');
      expect(window.location.search).toBe('?projectid=project-from-test');
    });
    expect(pushStateSpy).toHaveBeenCalledTimes(1);
    expect(pushStateSpy).toHaveBeenCalledWith(
      null,
      '',
      '/editor/canvas?projectid=project-from-test',
    );

    window.history.back();
    await waitFor(() => {
      expect(window.location.pathname).toBe('/creation');
      expect(window.location.search).toBe('');
    });

    pushStateSpy.mockRestore();
  });
});