yuxing/dashboard-icons
1
0
Fork 0
mirror of https://github.com/homarr-labs/dashboard-icons.git synced 2026-01-12 16:25:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

test: add test IDs and improve icon customizer tests

Browse Source 
- 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
This commit is contained in:
Thomas Camlong
2025-12-26 18:01:32 +01:00
parent b363967344
commit edf0e048b9
2 changed files with 28 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/icon-customizer-inline.tsx
View File

@@ -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"

83
web/tests/icon-customizer.spec.ts
View File

@@ -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');