feat(variant): image preview on variant creation with a real sample image

web/src/views/__tests__/VariantsForm.spec.ts

@@ -59,7 +59,7 @@ const QUALITY_ERROR = 'Enter a value from 1 to 100.'
 const DIMENSION_ERROR = 'Set a width, a height, or both.'
 const DIMENSION_HELP = 'Set a width, a height, or both. 1–8000 px. Images are never enlarged.'
 const SAVE_ERROR_TITLE = "Couldn't save the variant"
-const URL_PREFIX = '/static/uploadedImages/north-wall.jpg?v='
+const URL_PREFIX = '/static/uploadedImages/variant-sample.jpg?v='
 const WARNING_ALERT =
 	'Changing dimensions, fit, format or quality purges 244 generated files; they will be regenerated on next request.'
 
@@ -438,7 +438,7 @@ describe('Rule: Form states', () => {
 			'i-lucide-circle-dot',
 		)
 		expect(previewText()).toContain('hero')
-		expect(previewText()).toContain('1200×630 · about 96 KB')
+		expect(previewText()).toContain('1200×630 · about 30 KB')
 	})
 
 	it.each([
@@ -853,14 +853,14 @@ describe('Rule: Saving an edit', () => {
 	it('Edit: dirty', async () => {
 		await mountPage()
 		await openEditForm('hero')
-		expect(previewText()).toContain('1200×630 · about 96 KB')
+		expect(previewText()).toContain('1200×630 · about 30 KB')
 
 		await typeInto(qualityInput(), '70')
 
 		expect(saveButton('Save changes').disabled).toBe(false)
 		expect(footerStatus()).toBe('Unsaved changes')
 		expect(qualityInput()!.value).toBe('70')
-		expect(previewText()).toContain('1200×630 · about 71 KB')
+		expect(previewText()).toContain('1200×630 · about 22 KB')
 		expect(form().querySelector('[data-testid="edit-warning"]')).not.toBeNull()
 	})
 
@@ -954,13 +954,13 @@ describe('Rule: Preview and ImageCompare', () => {
 
 		const panel = form()
 		expect(panel.querySelector('h3')?.textContent).toBe('Preview')
-		expect(panel.textContent).toContain('Sample: north-wall.jpg')
+		expect(panel.textContent).toContain('Sample: variant-sample.jpg')
 		const box = panel.querySelector('[data-testid="image-compare"]')!
 		expect(box.className).toContain('aspect-3/2')
 		expect(box.className).toContain('border')
 		expect(box.className).toContain('overflow-hidden')
 		const labels = box.nextElementSibling!
-		expect(textOf(labels)).toBe('Original 4032 × 3024 · 3.9 MB hero 1200×630 · about 96 KB')
+		expect(textOf(labels)).toBe('Original 1500 × 1000 · 84 KB hero 1200×630 · about 30 KB')
 		expect(panel.textContent).toContain(
 			'Drag the divider, or focus it and use the arrow keys. The estimate comes from a sample; output is never larger than the source.',
 		)
@@ -1078,7 +1078,7 @@ describe('Rule: Preview and ImageCompare', () => {
 		expect(overlay.className).toContain('bottom-3')
 		expect(overlay.className).toContain('left-3')
 		expect(textOf(box.nextElementSibling!)).toBe(
-			'Original 4032 × 3024 · 3.9 MB name No output yet',
+			'Original 1500 × 1000 · 84 KB name No output yet',
 		)
 	})
 
@@ -1089,7 +1089,7 @@ describe('Rule: Preview and ImageCompare', () => {
 		await typeInto(field('width'), '800')
 
 		expect(compareInput().getAttribute('aria-label')).toBe('Compare original and name')
-		expect(previewText()).toContain('name 800×600 · about')
+		expect(previewText()).toContain('name 800×533 · about')
 		expect(
 			Array.from(form().querySelectorAll('span.absolute.top-2')).map(
 				(chip) => chip.textContent,
@@ -1107,7 +1107,7 @@ describe('Rule: Preview and ImageCompare', () => {
 
 		expect(labels.map(Number)).toEqual([...labels.map(Number)].sort((a, b) => a - b))
 		await setFormat('png')
-		expect(previewText()).toContain('1200×630 · about 310 KB')
+		expect(previewText()).toContain('1200×630 · about 84 KB')
 	})
 })