feat(points): apply worn effects on covers, details and backgrounds

src/pages/GameLibrary.effects.test.jsx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, screen, waitFor} from '@testing-library/react';
+import GameLibrary from './GameLibrary.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+import WalletLoader from '../test/WalletLoader.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+vi.mock('../hooks/useLibrarySync.js', () => ({default: () => ({status: 'OK', lastSyncedAt: null, isRunning: false})}));
+vi.mock('../hooks/useForceSync.js', () => ({default: () => ({trigger: vi.fn(), busy: false})}));
+
+const games = [
+    {appid: 620, name: 'Portal 2', playtimeMinutes: 0, status: 'COMPLETED'},
+    {appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'FINISHED'},
+];
+
+beforeEach(() => {
+    localStorage.setItem('tbp_session', '1');
+    fetchRoutes({
+        'GET /api/users/me': json(200, {settings: {}}),
+        'GET /api/rewards/wallet': json(200, {balance: 0, catalog: [], owned: [], equipped: {COMPLETED_EFFECT: 'FX_GOLD_SHINE'}, history: []}),
+        'GET /api/library/games': json(200, {content: games, page: 0, size: 20, totalElements: 2, totalPages: 1}),
+        'GET /api/library/games-count': json(200, {count: 2, hasSteamId: true}),
+    });
+});
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+});
+
+describe('GameLibrary completed effect', () => {
+    it('puts the worn effect on the cover of a COMPLETED game only', async () => {
+        renderWithProviders(<><WalletLoader/><GameLibrary/></>, {entries: ['/library']});
+
+        const cover = async (name) => (await screen.findByText(name)).closest('li').querySelector('img').parentElement;
+        await waitFor(async () => expect((await cover('Portal 2')).classList.contains('fx-cover-gold-shine')).toBe(true));
+        expect((await cover('Half-Life 2')).classList.contains('fx-cover-gold-shine')).toBe(false);
+    });
+});