feat(images): report broken covers and achievement icons

src/components/GameCover.test.jsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import GameCover from './GameCover.jsx';
+import {reportBrokenImage} from '../utils/brokenImages.js';
+
+vi.mock('../utils/brokenImages.js', () => ({COVER: 'COVER', reportBrokenImage: vi.fn()}));
+
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+
+describe('GameCover', () => {
+    it('prefers the stored picture over the Steam header', () => {
+        const {container} = render(<GameCover appid={620} imageUrl="https://shared.akamai.steamstatic.com/x/header.jpg"/>);
+
+        expect(container.querySelector('img').getAttribute('src')).toBe('https://shared.akamai.steamstatic.com/x/header.jpg');
+    });
+
+    it('reports a picture that does not load and shows the placeholder', () => {
+        const {container} = render(<GameCover appid={620}/>);
+
+        fireEvent.error(container.querySelector('img'));
+
+        expect(reportBrokenImage).toHaveBeenCalledWith(620, 'COVER');
+        expect(container.querySelector('img')).toBeNull();
+        expect(container.querySelector('svg')).toBeTruthy();
+    });
+
+    it('loads the picture of the next game after a failed one', () => {
+        const {container, rerender} = render(<GameCover appid={620}/>);
+        fireEvent.error(container.querySelector('img'));
+
+        rerender(<GameCover appid={220}/>);
+
+        expect(container.querySelector('img').getAttribute('src')).toContain('/220/header.jpg');
+        fireEvent.error(container.querySelector('img'));
+        expect(reportBrokenImage).toHaveBeenCalledWith(220, 'COVER');
+    });
+});