feat(profile): let users design their public profile

src/pages/SettingsPage.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen, waitFor, within} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import SettingsPage from './SettingsPage.jsx';
 import {PreferencesProvider} from '../context/PreferencesContext.jsx';
@@ -17,6 +17,8 @@ const profile = (overrides = {}) => ({
     settings: {useDarkTheme: true, language: 'de', publicProfile: true}, ...overrides,
 });
 
+const appearanceCard = () => within(screen.getByText('SETTINGS.APPEARANCE').closest('[data-slot="card"]'));
+
 const puts = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT').map(([, init]) => JSON.parse(init.body));
 
 function renderPage(me) {
@@ -99,6 +101,54 @@ describe('SettingsPage public profile', () => {
             .toBe('false'));
     });
 
+    const styled = (profileStyle) => profile({settings: {useDarkTheme: true, language: 'de', publicProfile: true, profileStyle}});
+    const styleGroup = (label) => within(screen.getAllByRole('group', {name: label})[1]);
+    const stylePuts = () => fetch.mock.calls.filter(([url, init]) => init?.method === 'PUT' && url.endsWith('/profile-style'))
+        .map(([, init]) => JSON.parse(init.body));
+
+    it('saves the profile accent apart from the app accent', async () => {
+        renderPage(styled({accent: 'blue', corners: 'sharp', bannerAppid: 620, backgroundAppid: null,
+            sections: ['PLAYING', 'SUMMARY']}));
+
+        await screen.findByText('SETTINGS.PROFILE_STYLE');
+        fireEvent.click(styleGroup('SETTINGS.ACCENT').getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.RED'}));
+
+        await waitFor(() => expect(stylePuts()).toEqual([{accent: 'red', corners: 'sharp', bannerAppid: 620,
+            backgroundAppid: null, sections: ['PLAYING', 'SUMMARY']}]));
+        expect(styleGroup('SETTINGS.ACCENT').getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.RED'})
+            .getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('moves, hides and shows profile sections', async () => {
+        renderPage(styled({sections: ['PLAYING', 'SUMMARY']}));
+
+        await screen.findByText('SETTINGS.PROFILE_STYLE');
+        // The first row is the first shown section, PLAYING.
+        fireEvent.click(screen.getAllByRole('button', {name: 'SETTINGS.PROFILE_SECTION_DOWN'})[0]);
+        await waitFor(() => expect(stylePuts()).toHaveLength(1));
+        expect(stylePuts()[0].sections).toEqual(['SUMMARY', 'PLAYING']);
+
+        fireEvent.click(screen.getByRole('switch', {name: 'SETTINGS.PROFILE_SECTION.STATS'}));
+        await waitFor(() => expect(stylePuts()).toHaveLength(2));
+        expect(stylePuts()[1].sections).toEqual(['SUMMARY', 'PLAYING', 'STATS']);
+    });
+
+    it('removes the profile banner', async () => {
+        renderPage(styled({bannerAppid: 620}));
+
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.PROFILE_ART_REMOVE'}));
+
+        await waitFor(() => expect(stylePuts()).toHaveLength(1));
+        expect(stylePuts()[0].bannerAppid).toBeNull();
+    });
+
+    it('offers the profile look only while the profile is public', async () => {
+        renderPage(profile({settings: {useDarkTheme: true, language: 'de', publicProfile: false}}));
+
+        expect((await screen.findByRole('switch', {name: 'SETTINGS.PROFILE_SECTION.STATS'})).disabled).toBe(true);
+        expect(styleGroup('SETTINGS.ACCENT').getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.RED'}).disabled).toBe(true);
+    });
+
     it('offers the stat groups only while the profile is public', async () => {
         renderPage(profile({settings: {useDarkTheme: true, language: 'de', publicProfile: false}}));
 
@@ -142,13 +192,14 @@ describe('SettingsPage appearance', () => {
     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 screen.findByText('SETTINGS.APPEARANCE');
+        fireEvent.click(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}));
+        fireEvent.click(appearanceCard().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, bannerAppid: null, showBanner: true});
-        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');
+        expect(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}).getAttribute('aria-pressed')).toBe('true');
+        expect(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.VIOLET'}).getAttribute('aria-pressed')).toBe('false');
     });
 
     it('removes the background', async () => {