url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: white background option for export + Firefox download

Browse Source 
Fixes two issues reported in #165:

- Export always produced a black background, making prints with a
  white page wasteful/unreadable. Adds a Dark/White background choice
  in the export modal, threaded through both PNG and SVG export.
- Firefox refused the download because the programmatic anchor was not
  attached to the document. The anchor is now appended before click and
  removed after, which Firefox requires.

Closes #165

ha-relevant: yes
This commit is contained in:
Pouzor
2026-06-29 00:47:39 +02:00
parent 8b9972ca78
commit fd2c50c1aa
4 changed files with 129 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/modals/__tests__/ExportModal.test.tsx
+28 -2
View File
@@ -12,6 +12,10 @@ vi.mock('@/utils/export', () => ({
{ value: 'high', label: 'High', pixelRatio: 2, hint: '2× — recommended' },
{ value: 'ultra', label: 'Ultra', pixelRatio: 4, hint: '4× — print quality, large file' },
],
EXPORT_BACKGROUND_OPTIONS: [
{ value: 'dark', label: 'Dark', color: '#0d1117', hint: 'screen / docs' },
{ value: 'white', label: 'White', color: '#ffffff', hint: 'printing' },
],
}))
const el = document.createElement('div')
@@ -49,7 +53,7 @@ describe('ExportModal', () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByText('Standard').closest('button')!)
fireEvent.click(screen.getByRole('button', { name: /download/i }))
await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'standard'))
await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'standard', 'dark'))
})
it('renders an SVG option under the quality options', () => {
@@ -62,7 +66,7 @@ describe('ExportModal', () => {
fireEvent.click(screen.getByText('SVG').closest('button')!)
expect(screen.getByText('SVG').closest('button')!.className).toContain('border-[#00d4ff]')
fireEvent.click(screen.getByRole('button', { name: /download/i }))
await waitFor(() => expect(mockExportToSvg).toHaveBeenCalledWith(el))
await waitFor(() => expect(mockExportToSvg).toHaveBeenCalledWith(el, 'dark'))
expect(mockExportToPng).not.toHaveBeenCalled()
})
@@ -74,6 +78,28 @@ describe('ExportModal', () => {
expect(screen.getByText('SVG').closest('button')!.className).not.toContain('border-[#00d4ff]')
})
it('renders dark and white background options, dark selected by default', () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
expect(screen.getByText('Dark')).toBeInTheDocument()
expect(screen.getByText('White')).toBeInTheDocument()
expect(screen.getByText('Dark').closest('button')!.className).toContain('border-[#00d4ff]')
})
it('exports with white background when White is selected (printing)', async () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByText('White').closest('button')!)
fireEvent.click(screen.getByRole('button', { name: /download/i }))
await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'high', 'white'))
})
it('applies the background choice to SVG export too', async () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByText('SVG').closest('button')!)
fireEvent.click(screen.getByText('White').closest('button')!)
fireEvent.click(screen.getByRole('button', { name: /download/i }))
await waitFor(() => expect(mockExportToSvg).toHaveBeenCalledWith(el, 'white'))
})
it('closes after successful export', async () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByRole('button', { name: /download/i }))