80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
|
// @vitest-environment jsdom
|
||
|
|
import { describe, it, expect, vi, beforeAll, afterEach } from 'vitest';
|
||
|
|
import { render, screen, cleanup } from '@testing-library/react';
|
||
|
|
import { parseJournalMarkdown } from '@/lib/journal';
|
||
|
|
import { escapeHtml } from '@/lib/escapeHtml';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Most essays have no map block, yet a static import of LeafletMap put its
|
||
|
|
* wrapper and Leaflet's render-blocking stylesheet on every album, subpage and
|
||
|
|
* journal page. EssayView now loads it only when a map block renders.
|
||
|
|
*/
|
||
|
|
|
||
|
|
const leafletModuleLoaded = vi.fn();
|
||
|
|
const mapProps = vi.fn();
|
||
|
|
|
||
|
|
vi.mock('@/components/LeafletMap', () => {
|
||
|
|
leafletModuleLoaded();
|
||
|
|
return {
|
||
|
|
LeafletMap: (props: { className?: string; markers: unknown[]; line?: boolean }) => {
|
||
|
|
mapProps(props);
|
||
|
|
return <div className={props.className} data-testid="leaflet-map" />;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
beforeAll(() => {
|
||
|
|
// FadeIn reveals at once under reduced motion instead of needing IntersectionObserver.
|
||
|
|
window.matchMedia = ((query: string) => ({
|
||
|
|
matches: query.includes('reduce'),
|
||
|
|
media: query,
|
||
|
|
addEventListener: () => {},
|
||
|
|
removeEventListener: () => {},
|
||
|
|
})) as unknown as typeof window.matchMedia;
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(() => cleanup());
|
||
|
|
|
||
|
|
describe('EssayView map block', () => {
|
||
|
|
it('does not load the map module just by being imported', async () => {
|
||
|
|
await import('@/app/[...path]/EssayView');
|
||
|
|
expect(leafletModuleLoaded).not.toHaveBeenCalled();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders the map on demand with the same markers and escaped popups', async () => {
|
||
|
|
const { EssayView } = await import('@/app/[...path]/EssayView');
|
||
|
|
const essay = parseJournalMarkdown(
|
||
|
|
[
|
||
|
|
'---',
|
||
|
|
'title: "Trip"',
|
||
|
|
'---',
|
||
|
|
'',
|
||
|
|
'::map The route',
|
||
|
|
"Berlin's <b>: 52.52, 13.405",
|
||
|
|
'48.137, 11.575',
|
||
|
|
].join('\n'),
|
||
|
|
);
|
||
|
|
const block = essay.blocks.find((b) => b.type === 'map');
|
||
|
|
const label =
|
||
|
|
block?.type === 'map' && block.items[0].kind === 'point' ? block.items[0].label : '';
|
||
|
|
expect(label).toBeTruthy();
|
||
|
|
|
||
|
|
const { container } = render(<EssayView essay={essay} assets={[]} />);
|
||
|
|
|
||
|
|
// Same container the eager version rendered, before and after the load.
|
||
|
|
expect(container.querySelector('.essay-map')).not.toBeNull();
|
||
|
|
await screen.findByTestId('leaflet-map');
|
||
|
|
expect(leafletModuleLoaded).toHaveBeenCalledTimes(1);
|
||
|
|
expect(container.querySelectorAll('.essay-map')).toHaveLength(1);
|
||
|
|
|
||
|
|
const props = mapProps.mock.calls.at(-1)![0];
|
||
|
|
expect(props.className).toBe('essay-map');
|
||
|
|
expect(props.line).toBe(true);
|
||
|
|
expect(props.markers).toHaveLength(2);
|
||
|
|
expect(props.markers[0]).toMatchObject({ lat: 52.52, lng: 13.405 });
|
||
|
|
expect(props.markers[0].popupHtml).toContain(`>${escapeHtml(label!)}</h3>`);
|
||
|
|
expect(props.markers[0].popupHtml).not.toContain('<b>');
|
||
|
|
expect(props.markers[1].popupHtml).toBeUndefined();
|
||
|
|
});
|
||
|
|
});
|