feat(dashboard): Steam avatar and a banner from the most played game

src/components/HeroArt.test.jsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it} from 'vitest';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import HeroArt from './HeroArt.jsx';
+import PageBackground from './PageBackground.jsx';
+
+afterEach(cleanup);
+
+describe('HeroArt', () => {
+    it('shows the library art, then the store header, then nothing', () => {
+        const {container} = render(<HeroArt appid={620}/>);
+        const img = () => container.querySelector('img');
+        expect(img().getAttribute('src')).toContain('/620/library_hero.jpg');
+
+        fireEvent.error(img());
+        expect(img().getAttribute('src')).toContain('/620/header.jpg');
+
+        fireEvent.error(img());
+        expect(img()).toBeNull();
+    });
+});
+
+describe('PageBackground', () => {
+    it('shows nothing without a game', () => {
+        const {container} = render(<PageBackground appid={null}/>);
+
+        expect(container.innerHTML).toBe('');
+    });
+
+    it('starts with the library art again for another game', () => {
+        const {container, rerender} = render(<PageBackground appid={620}/>);
+        fireEvent.error(container.querySelector('img'));
+
+        rerender(<PageBackground appid={220}/>);
+
+        expect(container.querySelector('img').getAttribute('src')).toContain('/220/library_hero.jpg');
+    });
+});