chore(web): rename components to PascalCase (#28013)

chore: rename components to PascalCase
2026-05-18 03:10:24 +03:00 · 2026-04-21 17:29:42 +01:00
parent 837305da7e
commit b9ca68f6e4
299 changed files with 448 additions and 448 deletions
@@ -0,0 +1,89 @@
+import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+import { fireEvent, render } from '@testing-library/svelte';
+
+vi.mock('$lib/utils/sw-messaging', () => ({
+  cancelImageUrl: vi.fn(),
+}));
+
+describe('ImageThumbnail component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders an img element with correct attributes', () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+    });
+    const img = baseElement.querySelector('img');
+    expect(img).not.toBeNull();
+    expect(img!.getAttribute('src')).toBe('/test-thumbnail.jpg');
+    expect(img!.getAttribute('alt')).toBe('');
+  });
+
+  it('shows BrokenAsset on error', async () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+    });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.error(img);
+
+    expect(baseElement.querySelector('img')).toBeNull();
+    expect(baseElement.querySelector('span')?.textContent).toEqual('error_loading_image');
+  });
+
+  it('calls onComplete with false on successful load', async () => {
+    const onComplete = vi.fn();
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+      onComplete,
+    });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.load(img);
+    expect(onComplete).toHaveBeenCalledWith(false);
+  });
+
+  it('calls onComplete with true on error', async () => {
+    const onComplete = vi.fn();
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+      onComplete,
+    });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.error(img);
+    expect(onComplete).toHaveBeenCalledWith(true);
+  });
+
+  it('applies hidden styles when hidden is true', () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+      hidden: true,
+    });
+    const img = baseElement.querySelector('img')!;
+    const style = img.getAttribute('style') ?? '';
+    expect(style).toContain('grayscale');
+    expect(style).toContain('opacity');
+  });
+
+  it('sets alt text after loading', async () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+    });
+    const img = baseElement.querySelector('img')!;
+    expect(img.getAttribute('alt')).toBe('');
+
+    await fireEvent.load(img);
+    expect(img.getAttribute('alt')).toBe('Test image');
+  });
+});