import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' import { exportToPng, exportToSvg, EXPORT_QUALITY_OPTIONS, EXPORT_BACKGROUND_OPTIONS } from '../export' const mockToPng = vi.fn() const mockToSvg = vi.fn() vi.mock('html-to-image', () => ({ toPng: (...args: unknown[]) => mockToPng(...args), toSvg: (...args: unknown[]) => mockToSvg(...args), })) describe('exportToPng', () => { let el: HTMLElement let clickSpy: ReturnType let appendSpy: ReturnType let removeSpy: ReturnType let createSpy: ReturnType beforeEach(() => { el = document.createElement('div') clickSpy = vi.fn() createSpy = vi.spyOn(document, 'createElement').mockReturnValue( Object.assign(document.createElement('a'), { click: clickSpy }) as HTMLAnchorElement ) appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n) removeSpy = vi.spyOn(document.body, 'removeChild').mockImplementation((n) => n) mockToPng.mockResolvedValue('data:image/png;base64,abc') mockToSvg.mockResolvedValue('data:image/svg+xml;base64,abc') }) afterEach(() => { createSpy.mockRestore() appendSpy.mockRestore() removeSpy.mockRestore() }) it('calls toPng with pixelRatio 1 for standard quality', async () => { await exportToPng(el, 'standard') expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 1 })) }) it('calls toPng with pixelRatio 2 for high quality', async () => { await exportToPng(el, 'high') expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 })) }) it('calls toPng with pixelRatio 4 for ultra quality', async () => { await exportToPng(el, 'ultra') expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 4 })) }) it('defaults to high quality when no quality arg given', async () => { await exportToPng(el) expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 })) }) it('triggers a download with the correct filename', async () => { await exportToPng(el, 'high') expect(clickSpy).toHaveBeenCalled() }) it('defaults to dark background color', async () => { await exportToPng(el, 'standard') expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' })) }) it('uses white background color when white is requested (printing)', async () => { await exportToPng(el, 'standard', 'white') expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#ffffff' })) }) it('forces the element background to white during capture, then restores it', async () => { el.style.backgroundColor = 'rgb(13, 17, 23)' let bgDuringCapture = '' mockToPng.mockImplementation(() => { bgDuringCapture = el.style.backgroundColor return Promise.resolve('data:image/png;base64,abc') }) await exportToPng(el, 'standard', 'white') // the live element is painted white only for the duration of the capture expect(bgDuringCapture).toBe('rgb(255, 255, 255)') // and is restored afterwards so the on-screen canvas is untouched expect(el.style.backgroundColor).toBe('rgb(13, 17, 23)') }) it('attaches the download anchor to the DOM so Firefox triggers the download', async () => { await exportToPng(el, 'high') expect(appendSpy).toHaveBeenCalled() expect(removeSpy).toHaveBeenCalled() }) }) describe('exportToSvg', () => { let el: HTMLElement let clickSpy: ReturnType let appendSpy: ReturnType let removeSpy: ReturnType let createSpy: ReturnType beforeEach(() => { el = document.createElement('div') clickSpy = vi.fn() createSpy = vi.spyOn(document, 'createElement').mockReturnValue( Object.assign(document.createElement('a'), { click: clickSpy }) as HTMLAnchorElement ) appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n) removeSpy = vi.spyOn(document.body, 'removeChild').mockImplementation((n) => n) mockToSvg.mockResolvedValue('data:image/svg+xml;base64,abc') }) afterEach(() => { createSpy.mockRestore() appendSpy.mockRestore() removeSpy.mockRestore() }) it('defaults to dark background color', async () => { await exportToSvg(el) expect(mockToSvg).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' })) }) it('uses white background color when white is requested (printing)', async () => { await exportToSvg(el, 'white') expect(mockToSvg).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#ffffff' })) }) it('forces the element background to white during capture, then restores it', async () => { el.style.backgroundColor = 'rgb(13, 17, 23)' let bgDuringCapture = '' mockToSvg.mockImplementation(() => { bgDuringCapture = el.style.backgroundColor return Promise.resolve('data:image/svg+xml;base64,abc') }) await exportToSvg(el, 'white') expect(bgDuringCapture).toBe('rgb(255, 255, 255)') expect(el.style.backgroundColor).toBe('rgb(13, 17, 23)') }) it('triggers a download', async () => { await exportToSvg(el) expect(clickSpy).toHaveBeenCalled() }) }) describe('EXPORT_QUALITY_OPTIONS', () => { it('has exactly three options', () => { expect(EXPORT_QUALITY_OPTIONS).toHaveLength(3) }) it('options are standard, high, ultra in order', () => { expect(EXPORT_QUALITY_OPTIONS.map((o) => o.value)).toEqual(['standard', 'high', 'ultra']) }) it('pixel ratios are 1, 2, 4', () => { expect(EXPORT_QUALITY_OPTIONS.map((o) => o.pixelRatio)).toEqual([1, 2, 4]) }) }) describe('EXPORT_BACKGROUND_OPTIONS', () => { it('offers dark and white', () => { expect(EXPORT_BACKGROUND_OPTIONS.map((o) => o.value)).toEqual(['dark', 'white']) }) it('maps to the expected colors', () => { expect(EXPORT_BACKGROUND_OPTIONS.map((o) => o.color)).toEqual(['#0d1117', '#ffffff']) }) })