feat(stats): add chart form pickers to dashboard and profile tiles

src/pages/StatsPage.test.jsx

@@ -292,10 +292,10 @@ describe('StatsPage', () => {
             await screen.findByText('STATS.PLATFORMS.TITLE');
 
             expect(slices('STATS.PLATFORMS.TITLE')).toHaveLength(0);
-            for (const title of ['PLATFORMS', 'TASTE', 'FINISHED', 'TREND']) {
+            for (const title of ['PLATFORMS', 'TASTE', 'FINISHED', 'TREND', 'TOP_GAMES']) {
                 expect(within(picker(`STATS.${title}.TITLE`)).getAllByRole('button').length).toBeGreaterThan(1);
             }
-            expect(within(section('STATS.TOP_GAMES.TITLE')).queryByRole('group', {name: 'STATS.CHART.LABEL'})).toBeNull();
+            expect(within(picker('STATS.TOP_GAMES.TITLE')).getByRole('button', {name: 'STATS.CHART.LIST'}).getAttribute('aria-pressed')).toBe('true');
             expect(within(picker('STATS.PLATFORMS.TITLE')).getByRole('button', {name: 'STATS.CHART.BARS'}).getAttribute('aria-pressed')).toBe('true');
         });
 
@@ -315,6 +315,48 @@ describe('StatsPage', () => {
             expect(putBodies().at(-1)).toEqual({group: 'PLATFORMS', chart: null});
         });
 
+        const twoGames = () => stats({topGames: {
+            mostPlayed: [{appid: 620, name: 'Portal 2', imageUrl: null, minutes: 900},
+                {appid: 220, name: 'Half-Life 2', imageUrl: null, minutes: 300}],
+            mostLoyal: {appid: 620, name: 'Portal 2', imageUrl: null, months: 3, minutes: 900}}});
+
+        it('topGamesPieLinksEachGameAndShowsTheShareNote', async () => {
+            answerStats(json(200, twoGames()));
+            renderPage();
+            await screen.findByText('STATS.TOP_GAMES.TITLE');
+
+            fireEvent.click(within(picker('STATS.TOP_GAMES.TITLE')).getByRole('button', {name: 'STATS.CHART.PIE'}));
+
+            await waitFor(() => expect(slices('STATS.TOP_GAMES.TITLE')).toHaveLength(2));
+            expect(putBodies()).toEqual([{group: 'TOP_GAMES', chart: 'PIE'}]);
+            const card = section('STATS.TOP_GAMES.TITLE');
+            expect(within(card).getByRole('link', {name: /Half-Life 2/}).getAttribute('href')).toBe('/library/220');
+            expect(within(card).getByRole('link', {name: /Half-Life 2/}).textContent).toContain('5.0h');
+            expect(within(card).getByText('STATS.TOP_GAMES.SHARE')).toBeTruthy();
+            expect(within(card).getByText('STATS.TOP_GAMES.LOYAL')).toBeTruthy();
+        });
+
+        it('topGamesPieWithOneGameDrawsTheList', async () => {
+            answerStats(json(200, stats()), {TOP_GAMES: 'PIE'});
+            renderPage();
+            await screen.findByText('STATS.TOP_GAMES.TITLE');
+
+            expect(slices('STATS.TOP_GAMES.TITLE')).toHaveLength(0);
+            expect(section('STATS.TOP_GAMES.TITLE').querySelectorAll('img').length).toBeGreaterThan(0);
+        });
+
+        it('topGamesBarsHaveNoCoversAndLinkTheGame', async () => {
+            answerStats(json(200, twoGames()), {TOP_GAMES: 'BARS'});
+            renderPage();
+            await screen.findByText('STATS.TOP_GAMES.TITLE');
+
+            const card = section('STATS.TOP_GAMES.TITLE');
+            const bars = within(card).getAllByRole('link', {name: /Half-Life 2/});
+            expect(bars[0].getAttribute('href')).toBe('/library/220');
+            expect(bars[0].querySelector('img')).toBeNull();
+            expect(bars[0].querySelectorAll('.bg-primary')).toHaveLength(1);
+        });
+
         it('showsTheStoredFormOfTheUser', async () => {
             answerStats(json(200, stats()), {PLATFORMS: 'DONUT', TREND: 'BARS'});
             renderPage();