feat(points): equipped looks on dashboard and public profile
Build, Test & Push Frontend / quality-check (push) Successful in 23s
Build, Test & Push Frontend / docker (push) Successful in 23s

Avatar borders frame the avatar on the dashboard, badges show next to the
heading, banner frames wrap the hero image, and equipped accents set the
color on both pages.
This commit is contained in:
lobo committed 2026-10-01 13:17:23 +02:00
1 parent ca3d34bad0
commit 0154202ddc
6 files changed
+112 -7

No files matched your search

+29 -1
View File
@@ -15,11 +15,12 @@ const library = {
};
// `me` only for a test with a session: without one the page asks nothing about the viewer.
function mockBackends({name = 'Lobo', profileStatus = 200, libraryStatus = 200, style, answer = library, me} = {}) {
function mockBackends({name = 'Lobo', profileStatus = 200, libraryStatus = 200, style, answer = library, me, equipped = {}, rewardsStatus = 200} = {}) {
fetchRoutes({
[`GET /api/public/profiles/${encodeURIComponent(name)}`]:
json(profileStatus, {displayName: 'Lobo', memberSince: '2026-03-02', ticket: 'the-ticket', style}),
'GET /api/public/profiles/library': json(libraryStatus, answer),
'GET /api/public/profiles/rewards': json(rewardsStatus, {equipped}),
...(me && {
'GET /api/users/me': json(200, me),
'PUT /api/users/settings/profile-tiles': json(204, {}),
@@ -32,6 +33,33 @@ const renderPage = (name = 'Lobo') => renderWithProviders(<PublicProfilePage/>,
describe('PublicProfilePage', () => {
afterEach(cleanup);
it('wears the premium accent and the badge of the owner', async () => {
mockBackends({style: {accent: 'red'}, equipped: {ACCENT: 'ACCENT_GOLD', BADGE: 'BADGE_PILE_SLAYER', BANNER_FRAME: 'FRAME_GOLD'}});
renderPage();
expect(await screen.findByText('POINTS.ITEMS.BADGE_PILE_SLAYER')).toBeTruthy();
const wrapper = screen.getByText('Lobo').closest('[data-accent]');
expect(wrapper.dataset.accent).toBe('gold');
expect(wrapper.querySelector('[data-slot="card"]').className).toContain('ring-amber-400');
expect(fetch.mock.calls[2][1].headers['X-Profile-Ticket']).toBe('the-ticket');
});
it('still shows the profile when the looks call fails', async () => {
mockBackends({style: {accent: 'red'}, rewardsStatus: 500});
renderPage();
expect(await screen.findByText('Portal 2')).toBeTruthy();
expect(screen.getByText('Lobo').closest('[data-accent]').dataset.accent).toBe('red');
});
it('ignores a code the app does not know', async () => {
mockBackends({style: {accent: 'red'}, equipped: {ACCENT: 'ACCENT_X', BADGE: 'BADGE_X'}});
renderPage();
expect(await screen.findByText('Portal 2')).toBeTruthy();
expect(screen.getByText('Lobo').closest('[data-accent]').dataset.accent).toBe('red');
});
it('asks Auth for the ticket, then Core for the library with it', async () => {
mockBackends({name: 'Lo bo'});
renderPage('Lo bo');