From edf0e048b9ca3f4c2d6f70f3fac7c03626a98122 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 26 Dec 2025 18:01:32 +0100
Subject: [PATCH] test: add test IDs and improve icon customizer tests

- Add id="close-customizer" to close button for reliable test selection
- Add id="customized-svg-preview" to preview container for testing
- Update test to use reliable selectors instead of fragile locators
- Replace 'react' test icon with 'sonarr' for better test coverage
- Add test to verify SVG preview updates when colors change
- Remove redundant tests for color changes and action buttons
---
 web/src/components/icon-customizer-inline.tsx |  7 +-
 web/tests/icon-customizer.spec.ts             | 83 +++++--------------
 2 files changed, 28 insertions(+), 62 deletions(-)

diff --git a/web/src/components/icon-customizer-inline.tsx b/web/src/components/icon-customizer-inline.tsx
index 661f7be7..cb4e52ff 100644
--- a/web/src/components/icon-customizer-inline.tsx
+++ b/web/src/components/icon-customizer-inline.tsx
@@ -222,7 +222,7 @@ export function IconCustomizerInline({ svgUrl, iconName, onClose }: IconCustomiz
 						</PopoverContent>
 					</Popover>
 				</div>
-				<Button variant="ghost" size="sm" onClick={onClose} className="h-6 w-6 p-0">
+				<Button id="close-customizer" variant="ghost" size="sm" onClick={onClose} className="h-6 w-6 p-0">
 					<X className="h-4 w-4" />
 				</Button>
 			</div>
@@ -256,7 +256,10 @@ export function IconCustomizerInline({ svgUrl, iconName, onClose }: IconCustomiz
 
 			<Separator />
 
-			<div className="flex flex-col items-center justify-center p-4 bg-muted/30 rounded-lg border min-h-[120px]">
+			<div
+				id="customized-svg-preview"
+				className="flex flex-col items-center justify-center p-4 bg-muted/30 rounded-lg border min-h-[120px]"
+			>
 				{customizedSvg ? (
 					<div
 						className="w-full max-w-[120px] h-[120px] flex items-center justify-center overflow-hidden [&_svg]:w-full [&_svg]:h-full [&_svg]:max-w-full [&_svg]:max-h-full [&_svg]:object-contain [&_svg]:flex-shrink-0"
diff --git a/web/tests/icon-customizer.spec.ts b/web/tests/icon-customizer.spec.ts
index ad37fb30..9c726460 100644
--- a/web/tests/icon-customizer.spec.ts
+++ b/web/tests/icon-customizer.spec.ts
@@ -1,10 +1,10 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 // Test icons with different characteristics
 const TEST_ICONS = [
   'github', // Popular icon with multiple colors
   'docker', // Icon with blue color
-  'react', // Icon with distinct colors
+  'sonarr', // Icon with distinct colors
   'nextjs', // Icon with light/dark variants
   'typescript', // Icon with single primary color
 ];
@@ -78,63 +78,6 @@ test.describe('SVG Icon Customizer', () => {
     });
   });
 
-  test('should change icon color when adjusting color picker', async ({ page }) => {
-    await page.goto(`/icons/${TEST_ICONS[3]}`);
-    await page.waitForLoadState('networkidle');
-    
-    // Open customizer
-    const customizeButton = page.getByRole('button', { name: /customize icon/i });
-    await customizeButton.click();
-    await page.waitForTimeout(500);
-    
-    // Take screenshot before color change
-    await page.screenshot({ 
-      path: 'test-results/screenshots/04-before-color-change.png',
-      fullPage: true 
-    });
-    
-    // Find the first color slider and adjust it
-    const hueSlider = page.locator('input[type="range"]').first();
-    await hueSlider.fill('180'); // Change hue to cyan
-    
-    // Wait for the preview to update
-    await page.waitForTimeout(500);
-    
-    // Take screenshot after color change
-    await page.screenshot({ 
-      path: 'test-results/screenshots/05-after-color-change.png',
-      fullPage: true 
-    });
-    
-    // Verify the preview updated (check for the preview container)
-    const preview = page.locator('div[class*="bg-muted"]').filter({ hasText: /Preview|Loading/ }).first();
-    await expect(preview).toBeVisible();
-  });
-
-  test('should show copy and download buttons', async ({ page }) => {
-    await page.goto(`/icons/${TEST_ICONS[4]}`);
-    await page.waitForLoadState('networkidle');
-    
-    // Open customizer
-    const customizeButton = page.getByRole('button', { name: /customize icon/i });
-    await customizeButton.click();
-    await page.waitForTimeout(500);
-    
-    // Check for Copy button
-    const copyButton = page.getByRole('button', { name: /copy/i });
-    await expect(copyButton).toBeVisible();
-    
-    // Check for Download button
-    const downloadButton = page.getByRole('button', { name: /download/i });
-    await expect(downloadButton).toBeVisible();
-    
-    // Take screenshot showing action buttons
-    await page.screenshot({ 
-      path: 'test-results/screenshots/06-action-buttons.png',
-      fullPage: true 
-    });
-  });
-
   test('should close customizer when clicking close button', async ({ page }) => {
     await page.goto(`/icons/${TEST_ICONS[0]}`);
     await page.waitForLoadState('networkidle');
@@ -149,7 +92,7 @@ test.describe('SVG Icon Customizer', () => {
     await expect(customizerTitle).toBeVisible();
     
     // Click close button (X icon)
-    const closeButton = page.locator('button').filter({ has: page.locator('svg') }).last();
+    const closeButton = page.locator('#close-customizer');
     await closeButton.click();
     await page.waitForTimeout(500);
     
@@ -163,6 +106,26 @@ test.describe('SVG Icon Customizer', () => {
     });
   });
 
+  test('The customized SVG preview should update when the color is changed', async ({ page }) => {
+    await page.goto('http://localhost:3000/icons/locals');
+    await page.getByRole('button', { name: 'Customize Icon' }).click();
+    await page.waitForTimeout(300);
+    
+    // Take initial screenshot of the customized SVG preview
+    const initialScreenshot = await page.locator('#customized-svg-preview').screenshot();
+    
+    await page.getByRole('button', { name: 'hsl(353, 79%, 55%)' }).click();
+    await page.waitForTimeout(300);
+    await page.locator('.grid > button:nth-child(3)').click();
+    await page.waitForTimeout(300);
+    await page.getByRole('button', { name: 'hsl(48, 100%, 50%)' }).click();
+    await page.waitForTimeout(300);
+    
+    // Take final screenshot and compare
+    const finalScreenshot = await page.locator('#customized-svg-preview').screenshot();
+    expect(finalScreenshot).not.toEqual(initialScreenshot);
+  });
+
   test('should handle icons with no customizable colors gracefully', async ({ page }) => {
     // Try with a simple icon that might have no fill colors
     await page.goto('/icons/7zip');