diff --git a/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx b/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx index ff715b6..f4ea581 100644 --- a/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx +++ b/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx @@ -30,7 +30,7 @@ describe('PanelTeams', () => { ).toBeInTheDocument(); }); - it('renders with empty team to display', async () => { + it('renders an empty team', async () => { fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { count: 1, results: [ @@ -51,7 +51,33 @@ describe('PanelTeams', () => { ).toBeInTheDocument(); }); - it('renders with not team to display', async () => { + it('renders a team with only 1 member', async () => { + fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { + count: 1, + results: [ + { + id: '1', + name: 'Team 1', + accesses: [ + { + id: '1', + role: 'owner', + }, + ], + }, + ], + }); + + render(, { wrapper: AppWrapper }); + + expect(screen.getByRole('status')).toBeInTheDocument(); + + expect( + await screen.findByLabelText('Empty teams icon'), + ).toBeInTheDocument(); + }); + + it('renders a non-empty team', async () => { fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { count: 1, results: [ @@ -63,6 +89,10 @@ describe('PanelTeams', () => { id: '1', role: 'admin', }, + { + id: '2', + role: 'member', + }, ], }, ], diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx index 13dc29d..6fb239f 100644 --- a/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx +++ b/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx @@ -16,6 +16,9 @@ export const PanelTeam = ({ team }: TeamProps) => { const { t } = useTranslation(); const { colorsTokens } = useCunninghamTheme(); + // There is at least 1 owner in the team + const hasMembers = team.accesses.length > 1; + const commonProps = { className: 'p-t', width: 52, @@ -27,7 +30,7 @@ export const PanelTeam = ({ team }: TeamProps) => { return ( - {team.accesses.length ? ( + {hasMembers ? (