Files
immich-folio/components/__tests__/EssayMapLazy.test.tsx
Ralksta ad8b09700b release: v0.19.0
Release v0.19.0. See the `## [0.19.0] — 2026-09-29` section of
[CHANGELOG.md](https://github.com/ralksta/immich-folio/blob/dev/CHANGELOG.md)
for the full list.

Highlights: client proofing links (#683), custom content pages (#738),
asset picker search (#740), concurrent-edit detection (#742), env-locked
settings (#739), an accessibility baseline (#741), three security fixes
with advisories (#737, #755, #759), and a pre-release quality pass
(#780–#797).

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: ralksta <ralksta@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ralf <rohlenbo79@gmail.com>
Co-authored-by: Paul Thies <110185070+ImScheinox@users.noreply.github.com>
Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
Co-authored-by: Lance Martin <lancetaylor95@gmail.com>
2026-09-29 22:50:30 +02:00

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();
});
});