mynode/packages/editor/CodeMirror/utils/imageLightbox.test.ts

import { showImageLightbox, closeImageLightbox, getActiveLightbox } from './imageLightbox';

describe('imageLightbox', () => {
	afterEach(() => {
		closeImageLightbox();
	});

	it('creates and mounts lightbox overlay to document.body', () => {
		const overlay = showImageLightbox('https://example.com/test.png', 'Test image');
		expect(overlay).toBeTruthy();
		expect(document.body.contains(overlay)).toBe(true);

		const active = getActiveLightbox();
		expect(active).not.toBeNull();
		expect(active?.img.src).toBe('https://example.com/test.png');
		expect(active?.img.alt).toBe('Test image');
	});

	it('closes on close button click or closeImageLightbox()', () => {
		showImageLightbox('https://example.com/test.png');
		expect(getActiveLightbox()).not.toBeNull();

		closeImageLightbox();
		expect(getActiveLightbox()).toBeNull();
	});

	it('closes when Escape key is pressed', () => {
		showImageLightbox('https://example.com/test.png');
		expect(getActiveLightbox()).not.toBeNull();

		const event = new KeyboardEvent('keydown', { key: 'Escape' });
		window.dispatchEvent(event);

		expect(getActiveLightbox()).toBeNull();
	});

	it('toggles original zoom on image click', () => {
		showImageLightbox('https://example.com/test.png');
		const active = getActiveLightbox();
		expect(active?.isZoomedOriginal).toBe(false);

		active?.img.dispatchEvent(new MouseEvent('click', { bubbles: true }));
		expect(getActiveLightbox()?.isZoomedOriginal).toBe(true);

		active?.img.dispatchEvent(new MouseEvent('click', { bubbles: true }));
		expect(getActiveLightbox()?.isZoomedOriginal).toBe(false);
	});
});