diff --git a/client/src/components/Collab/CollabPollOption.tsx b/client/src/components/Collab/CollabPollOption.tsx index a7e17a207..1bce48c7a 100644 --- a/client/src/components/Collab/CollabPollOption.tsx +++ b/client/src/components/Collab/CollabPollOption.tsx @@ -38,6 +38,20 @@ function VoterChip({ name, src, offset }: { name: string; src: string | null; of ); } +/** The voters past the third, as a count on the end of the stack; their names on hover. */ +function MoreVoters({ names }: { names: string[] }) { + return ( + name || '?').join(', ')}> + + +{names.length} + + + ); +} + /** A fact about the poll on its head band, set like the type chip on a booking card. */ export function PollChip({ icon, @@ -138,6 +152,7 @@ export function PollOptionRow({ {voters.slice(0, 3).map((voter, index) => ( 0} /> ))} + {voters.length > 3 && voter.name)} />} )} {pending && {pending.label}} diff --git a/client/src/components/Collab/CollabPolls.test.tsx b/client/src/components/Collab/CollabPolls.test.tsx index 537ca4e4f..03cc4e962 100644 --- a/client/src/components/Collab/CollabPolls.test.tsx +++ b/client/src/components/Collab/CollabPolls.test.tsx @@ -191,6 +191,18 @@ describe('CollabPolls', () => { expect(await screen.findByText(/closed/i)).toBeInTheDocument(); }); + it('FE-COMP-POLLS-025: past three voters the stack ends in a count of the rest', async () => { + const voters = ['anna', 'ben', 'cleo', 'dana', 'emil'].map((username, i) => ({ user_id: 10 + i, username, avatar_url: null })); + server.use( + http.get('/api/trips/1/collab/polls', () => + HttpResponse.json({ polls: [buildPoll({ is_closed: true, options: [{ id: 1, text: 'Paris', label: 'Paris', voters }, { id: 2, text: 'Rome', label: 'Rome', voters: [] }] })] }), + ), + ); + render(); + expect(await screen.findByText('+2')).toBeInTheDocument(); + expect(screen.queryByText('D')).not.toBeInTheDocument(); + }); + it('FE-COMP-POLLS-011: closed poll options are disabled (cannot vote)', async () => { server.use( http.get('/api/trips/1/collab/polls', () =>