feat(appearance): accent color, corners, wide layout and game art background

src/pages/SettingsPage.test.jsx

@@ -74,3 +74,39 @@ describe('SettingsPage public profile', () => {
         await waitFor(() => expect(screen.getByRole('switch', {name: 'SETTINGS.PUBLIC_PROFILE'}).getAttribute('aria-checked')).toBe('false'));
     });
 });
+
+describe('SettingsPage appearance', () => {
+    beforeEach(() => localStorage.setItem('tbp_jwt', 'token'));
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+    });
+
+    const appearancePuts = () => fetch.mock.calls
+        .filter(([url, init]) => init?.method === 'PUT' && url.endsWith('/api/users/settings/appearance'))
+        .map(([, init]) => JSON.parse(init.body));
+
+    it('saves a picked accent and corner style and marks them as picked', async () => {
+        renderPage(profile());
+
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}));
+        fireEvent.click(screen.getByRole('button', {name: 'SETTINGS.CORNER_OPTIONS.ROUND'}));
+
+        await waitFor(() => expect(appearancePuts()).toHaveLength(2));
+        expect(appearancePuts()[1]).toEqual({accent: 'green', corners: 'round', wideLayout: false, backgroundAppid: null});
+        expect(screen.getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}).getAttribute('aria-pressed')).toBe('true');
+        expect(screen.getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.VIOLET'}).getAttribute('aria-pressed')).toBe('false');
+    });
+
+    it('removes the background', async () => {
+        localStorage.setItem('tbp_appearance', JSON.stringify({backgroundAppid: 620}));
+        renderPage(profile());
+
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.BACKGROUND_REMOVE'}));
+
+        await waitFor(() => expect(appearancePuts()).toHaveLength(1));
+        expect(appearancePuts()[0].backgroundAppid).toBeNull();
+        expect(screen.getByText('SETTINGS.BACKGROUND_HINT')).toBeTruthy();
+    });
+});