Spaces:
Running
Running
| import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react' | |
| import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' | |
| import { prepareMap, renderPreview, searchPlaces } from './api' | |
| import App from './App' | |
| vi.mock('./components/MapViewport', () => ({ | |
| MapViewport: () => <div data-testid="map-viewport">map</div>, | |
| })) | |
| vi.mock('./api', () => ({ | |
| getStyles: vi.fn().mockResolvedValue([ | |
| { id: 'japanese_ink', name: 'Japanese Ink', description: '', preview: '', background: '#fff', text: '#111', water: '#ddd', parks: '#eee', road_motorway: '#111', road_primary: '#222', road_secondary: '#333', road_tertiary: '#444', road_residential: '#555', road_default: '#444', gradient: '#fff' }, | |
| { id: 'ocean', name: 'Ocean', description: '', preview: '', background: '#fff', text: '#111', water: '#ace', parks: '#eee', road_motorway: '#111', road_primary: '#222', road_secondary: '#333', road_tertiary: '#444', road_residential: '#555', road_default: '#444', gradient: '#fff' }, | |
| ]), | |
| prepareMap: vi.fn().mockResolvedValue({ map_data_id: 'a'.repeat(64), cache_hit: true }), | |
| renderPreview: vi.fn().mockResolvedValue(new Blob(['png'], { type: 'image/png' })), | |
| searchPlaces: vi.fn().mockResolvedValue([{ display_name: 'Paris, France', latitude: 48.8566, longitude: 2.3522, country: 'France', region: 'Ile-de-France', country_code: 'fr', provider: 'fake' }]), | |
| exportPoster: vi.fn(), | |
| })) | |
| describe('editor shell', () => { | |
| beforeEach(() => vi.clearAllMocks()) | |
| afterEach(cleanup) | |
| it('loads styles and exposes product controls', async () => { | |
| render(<App />) | |
| expect(screen.getByText('MapToPoster')).toBeInTheDocument() | |
| expect(screen.getAllByRole('button', { name: /Export/i })[0]).toBeInTheDocument() | |
| await waitFor(() => expect(screen.getAllByText('Japanese Ink').length).toBeGreaterThan(0)) | |
| fireEvent.click(screen.getAllByText('Ocean')[0]) | |
| expect(screen.getAllByText('Ocean').length).toBeGreaterThan(0) | |
| }) | |
| it('supports mobile-style panel switching and search selection', async () => { | |
| render(<App />) | |
| await waitFor(() => expect(screen.getAllByText('Japanese Ink').length).toBeGreaterThan(0)) | |
| fireEvent.click(screen.getAllByRole('button', { name: /Location/i })[0]) | |
| const search = screen.getAllByRole('textbox', { name: 'Search a place' })[0] | |
| fireEvent.change(search, { target: { value: 'Paris' } }) | |
| fireEvent.submit(search.closest('form')!) | |
| await waitFor(() => expect(screen.getAllByText('Paris, France').length).toBeGreaterThan(0)) | |
| fireEvent.click(screen.getAllByText('Paris, France')[0]) | |
| expect(screen.getAllByText('Paris, France').length).toBeGreaterThan(0) | |
| }) | |
| it('fills poster text from a selected Chinese location and omits caption', async () => { | |
| vi.mocked(searchPlaces).mockResolvedValueOnce([{ | |
| display_name: '深圳市, 广东省, 中国', latitude: 22.5431, longitude: 114.0579, | |
| country: '中国', region: '广东省', country_code: 'cn', provider: 'china-local', | |
| }]) | |
| render(<App />) | |
| await waitFor(() => expect(screen.getAllByText('Japanese Ink').length).toBeGreaterThan(0)) | |
| const search = screen.getAllByRole('textbox', { name: 'Search a place' })[0] | |
| fireEvent.change(search, { target: { value: '深圳' } }) | |
| fireEvent.submit(search.closest('form')!) | |
| await waitFor(() => expect(screen.getAllByText('深圳市, 广东省, 中国').length).toBeGreaterThan(0)) | |
| fireEvent.click(screen.getAllByText('深圳市, 广东省, 中国')[0]) | |
| expect(screen.getAllByRole('textbox', { name: 'Title' }).map((input) => (input as HTMLInputElement).value)).toEqual(['深圳市']) | |
| expect(screen.getAllByRole('textbox', { name: 'Subtitle' }).map((input) => (input as HTMLInputElement).value)).toEqual(['广东省']) | |
| expect(screen.queryByRole('textbox', { name: 'Caption' })).not.toBeInTheDocument() | |
| }) | |
| it('offers landscape ratios and sends the selected size for generation', async () => { | |
| render(<App />) | |
| await waitFor(() => expect(screen.getAllByText('Japanese Ink').length).toBeGreaterThan(0)) | |
| fireEvent.click(screen.getAllByRole('button', { name: 'Size' })[0]) | |
| fireEvent.click(screen.getAllByRole('button', { name: 'Landscape' })[0]) | |
| fireEvent.click(screen.getAllByRole('button', { name: 'landscape 16:9' })[0]) | |
| expect(document.querySelector('.poster-frame')).toHaveStyle({ aspectRatio: String(16 / 9) }) | |
| fireEvent.click(screen.getAllByRole('button', { name: /Generate preview/i })[0]) | |
| await waitFor(() => expect(prepareMap).toHaveBeenCalled()) | |
| expect(prepareMap).toHaveBeenCalledWith( | |
| expect.objectContaining({ layout: 'classic', size: { preset: '16:9' } }), | |
| expect.any(AbortSignal), | |
| ) | |
| }) | |
| it('changes zoom and fit state', () => { | |
| render(<App />) | |
| expect(screen.getAllByText('82%').length).toBeGreaterThan(0) | |
| fireEvent.click(screen.getAllByRole('button', { name: 'Zoom in' })[0]) | |
| expect(screen.getAllByText('92%').length).toBeGreaterThan(0) | |
| fireEvent.click(screen.getAllByRole('button', { name: 'Fit' })[0]) | |
| expect(screen.getAllByText('82%').length).toBeGreaterThan(0) | |
| }) | |
| it('waits for an explicit generation request and reports progress', async () => { | |
| let resolvePrepare!: (value: { map_data_id: string; cache_hit: boolean }) => void | |
| vi.mocked(prepareMap).mockReturnValueOnce(new Promise((resolve) => { resolvePrepare = resolve })) | |
| render(<App />) | |
| await waitFor(() => expect(screen.getAllByText('Japanese Ink').length).toBeGreaterThan(0)) | |
| expect(prepareMap).not.toHaveBeenCalled() | |
| fireEvent.click(screen.getAllByRole('button', { name: /Generate preview/i })[0]) | |
| expect(prepareMap).toHaveBeenCalledTimes(1) | |
| expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0) | |
| await act(async () => resolvePrepare({ map_data_id: 'a'.repeat(64), cache_hit: false })) | |
| await waitFor(() => expect(renderPreview).toHaveBeenCalledTimes(1)) | |
| await waitFor(() => expect(screen.getAllByText(/Preview ready in/).length).toBeGreaterThan(0)) | |
| }) | |
| }) | |