studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛(frontend) fix create team button

Browse Source 
The button to create a new team was not displayed properly anymore.
This commit is contained in:
Quentin BEY
2025-05-06 16:17:40 +02:00
parent aa3d90b686
commit f0c609ef0b
5 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx
View File

@@ -18,6 +18,11 @@ jest.mock('next/router', () => ({
}), }),
})); }));
jest.mock('next/navigation', () => ({
...jest.requireActual('next/navigation'),
useRouter: () => jest.fn(),
}));
describe('PanelTeams', () => { describe('PanelTeams', () => {
afterEach(() => { afterEach(() => {
fetchMock.restore(); fetchMock.restore();

23
src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
View File

@@ -1,9 +1,10 @@
import { useRouter as useNavigate } from 'next/navigation';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import IconAdd from '@/assets/icons/icon-add.svg'; import IconAdd from '@/assets/icons/icon-add.svg';
import IconSort from '@/assets/icons/icon-sort.svg'; import IconSort from '@/assets/icons/icon-sort.svg';
import { Box, BoxButton, StyledLink } from '@/components'; import { Box, BoxButton } from '@/components';
import { useAuthStore } from '@/core/auth'; import { useAuthStore } from '@/core/auth';
import { useCunninghamTheme } from '@/cunningham'; import { useCunninghamTheme } from '@/cunningham';
import { TeamsOrdering } from '@/features/teams/team-management/api'; import { TeamsOrdering } from '@/features/teams/team-management/api';
@@ -15,6 +16,7 @@ export const PanelActions = () => {
const { changeOrdering, ordering } = useTeamStore(); const { changeOrdering, ordering } = useTeamStore();
const { colorsTokens } = useCunninghamTheme(); const { colorsTokens } = useCunninghamTheme();
const { userData } = useAuthStore(); const { userData } = useAuthStore();
const navigate = useNavigate();
const can_create = userData?.abilities?.teams.can_create ?? false; const can_create = userData?.abilities?.teams.can_create ?? false;
@@ -48,17 +50,14 @@ export const PanelActions = () => {
<IconSort width={30} height={30} aria-hidden="true" /> <IconSort width={30} height={30} aria-hidden="true" />
</BoxButton> </BoxButton>
{can_create && ( {can_create && (
<StyledLink href="/teams/create"> <BoxButton
<BoxButton $margin={{ all: 'auto' }}
as="span" aria-label={t('Add a team')}
$margin={{ all: 'auto' }} $color={colorsTokens()['primary-600']}
aria-label={t('Add a team')} onClick={() => void navigate.push('/teams/create')}
$color={colorsTokens()['primary-600']} >
tabIndex={-1} <IconAdd width={27} height={27} aria-hidden="true" />
> </BoxButton>
<IconAdd width={27} height={27} aria-hidden="true" />
</BoxButton>
</StyledLink>
)} )}
</Box> </Box>
); );

2
src/frontend/apps/e2e/__tests__/app-desk/common.ts
View File

@@ -48,7 +48,7 @@ export const createTeam = async (
const randomTeams = randomName(teamName, browserName, length); const randomTeams = randomName(teamName, browserName, length);
for (let i = 0; i < randomTeams.length; i++) { for (let i = 0; i < randomTeams.length; i++) {
await panel.getByRole('link', { name: 'Add a team' }).click(); await panel.getByRole('button', { name: 'Add a team' }).click();
await page.getByText('Team name').fill(randomTeams[i]); await page.getByText('Team name').fill(randomTeams[i]);
await expect(buttonCreate).toBeEnabled(); await expect(buttonCreate).toBeEnabled();
await buttonCreate.click(); await buttonCreate.click();

4
src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
View File

@@ -63,7 +63,7 @@ test.describe('Teams Create', () => {
}) => { }) => {
const panel = page.getByLabel('Teams panel').first(); const panel = page.getByLabel('Teams panel').first();
await panel.getByRole('link', { name: 'Add a team' }).click(); await panel.getByRole('button', { name: 'Add a team' }).click();
const teamName = `My routing team ${browserName}-${Math.floor(Math.random() * 1000)}`; const teamName = `My routing team ${browserName}-${Math.floor(Math.random() * 1000)}`;
await page.getByText('Team name').fill(teamName); await page.getByText('Team name').fill(teamName);
@@ -72,7 +72,7 @@ test.describe('Teams Create', () => {
const elTeam = page.getByRole('heading', { name: teamName }); const elTeam = page.getByRole('heading', { name: teamName });
await expect(elTeam).toBeVisible(); await expect(elTeam).toBeVisible();
await panel.getByRole('link', { name: 'Add a team' }).click(); await panel.getByRole('button', { name: 'Add a team' }).click();
await expect(elTeam).toBeHidden(); await expect(elTeam).toBeHidden();
await panel.locator('li').getByText(teamName).click(); await panel.locator('li').getByText(teamName).click();

6
src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
View File

@@ -20,7 +20,7 @@ test.describe('Teams Panel', () => {
).toBeVisible(); ).toBeVisible();
await expect( await expect(
panel.getByRole('link', { panel.getByRole('button', {
name: 'Add a team', name: 'Add a team',
}), }),
).toBeVisible(); ).toBeVisible();
@@ -67,11 +67,11 @@ test.describe('Teams Panel', () => {
const selectedTeam = panel.locator('li').nth(0); const selectedTeam = panel.locator('li').nth(0);
await expect(selectedTeam).toHaveCSS( await expect(selectedTeam).toHaveCSS(
'background-color', 'background-color',
'rgb(202, 202, 251)', 'rgb(133, 133, 246)',
); );
const hoverTeam = panel.locator('li').nth(1); const hoverTeam = panel.locator('li').nth(1);
await hoverTeam.hover(); await hoverTeam.hover();
await expect(hoverTeam).toHaveCSS('background-color', 'rgb(227, 227, 253)'); await expect(hoverTeam).toHaveCSS('background-color', 'rgb(202, 202, 251)');
}); });
}); });