🚨(frontend) fix CI probs

The CI highlighted some issues with the tests.
This commit fixes the issues.
This commit is contained in:
Anthony LC
2024-04-03 17:04:04 +02:00
committed by Anthony LC
parent 352d4f6d27
commit 6de828c049
7 changed files with 52 additions and 41 deletions

View File

@@ -11,7 +11,7 @@ describe('Page', () => {
expect( expect(
screen.getByRole('button', { screen.getByRole('button', {
name: /Create a new team/i, name: /Create a new pad/i,
}), }),
).toBeInTheDocument(); ).toBeInTheDocument();
}); });

View File

@@ -8,8 +8,8 @@ import { ApplicationsMenu } from '@/features/header/ApplicationsMenu';
import { LanguagePicker } from '../language/'; import { LanguagePicker } from '../language/';
import { default as IconImpress } from './assets/icon-impress.svg?url';
import { default as IconGouv } from './assets/icon-gouv.svg?url'; import { default as IconGouv } from './assets/icon-gouv.svg?url';
import { default as IconImpress } from './assets/icon-impress.svg?url';
import { default as IconMarianne } from './assets/icon-marianne.svg?url'; import { default as IconMarianne } from './assets/icon-marianne.svg?url';
import IconMyAccount from './assets/icon-my-account.png'; import IconMyAccount from './assets/icon-my-account.png';

View File

@@ -1,4 +1,17 @@
import { Access } from '@/features/members'; import { User } from '@/core/auth';
export interface Access {
id: string;
role: Role;
user: User;
abilities: {
delete: boolean;
get: boolean;
patch: boolean;
put: boolean;
set_role_to: Role[];
};
}
export enum Role { export enum Role {
MEMBER = 'member', MEMBER = 'member',

View File

@@ -3,10 +3,10 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock'; import fetchMock from 'fetch-mock';
import { Panel } from '@/features/teams';
import { AppWrapper } from '@/tests/utils'; import { AppWrapper } from '@/tests/utils';
import { TeamList } from '../components/PadList'; import { PadList } from '../components/PadList';
import { Panel } from '../components/Panel';
window.HTMLElement.prototype.scroll = function () {}; window.HTMLElement.prototype.scroll = function () {};
@@ -17,30 +17,30 @@ jest.mock('next/router', () => ({
}), }),
})); }));
describe('PanelTeams', () => { describe('PanelPads', () => {
afterEach(() => { afterEach(() => {
fetchMock.restore(); fetchMock.restore();
}); });
it('renders with no team to display', async () => { it('renders with no pad to display', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 0, count: 0,
results: [], results: [],
}); });
render(<TeamList />, { wrapper: AppWrapper }); render(<PadList />, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument(); expect(screen.getByRole('status')).toBeInTheDocument();
expect( expect(
await screen.findByText( await screen.findByText(
'Create your first team by clicking on the "Create a new team" button.', 'Create your first pad by clicking on the "Create a new pad" button.',
), ),
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
it('renders an empty team', async () => { it('renders an empty pad', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1, count: 1,
results: [ results: [
{ {
@@ -51,17 +51,15 @@ describe('PanelTeams', () => {
], ],
}); });
render(<TeamList />, { wrapper: AppWrapper }); render(<PadList />, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument(); expect(screen.getByRole('status')).toBeInTheDocument();
expect( expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
await screen.findByLabelText('Empty teams icon'),
).toBeInTheDocument();
}); });
it('renders a team with only 1 member', async () => { it('renders a pad with only 1 member', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1, count: 1,
results: [ results: [
{ {
@@ -77,22 +75,20 @@ describe('PanelTeams', () => {
], ],
}); });
render(<TeamList />, { wrapper: AppWrapper }); render(<PadList />, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument(); expect(screen.getByRole('status')).toBeInTheDocument();
expect( expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
await screen.findByLabelText('Empty teams icon'),
).toBeInTheDocument();
}); });
it('renders a non-empty team', async () => { it('renders a non-empty pad', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1, count: 1,
results: [ results: [
{ {
id: '1', id: '1',
name: 'Team 1', name: 'Pad 1',
accesses: [ accesses: [
{ {
id: '1', id: '1',
@@ -107,19 +103,19 @@ describe('PanelTeams', () => {
], ],
}); });
render(<TeamList />, { wrapper: AppWrapper }); render(<PadList />, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument(); expect(screen.getByRole('status')).toBeInTheDocument();
expect(await screen.findByLabelText('Teams icon')).toBeInTheDocument(); expect(await screen.findByLabelText('Pads icon')).toBeInTheDocument();
}); });
it('renders the error', async () => { it('renders the error', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
status: 500, status: 500,
}); });
render(<TeamList />, { wrapper: AppWrapper }); render(<PadList />, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument(); expect(screen.getByRole('status')).toBeInTheDocument();
@@ -130,8 +126,8 @@ describe('PanelTeams', () => {
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
it('renders with team panel open', async () => { it('renders with pad panel open', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1, count: 1,
results: [], results: [],
}); });
@@ -139,14 +135,14 @@ describe('PanelTeams', () => {
render(<Panel />, { wrapper: AppWrapper }); render(<Panel />, { wrapper: AppWrapper });
expect( expect(
screen.getByRole('button', { name: 'Close the teams panel' }), screen.getByRole('button', { name: 'Close the pads panel' }),
).toBeVisible(); ).toBeVisible();
expect(await screen.findByText('Recents')).toBeVisible(); expect(await screen.findByText('Recents')).toBeVisible();
}); });
it('closes and opens the team panel', async () => { it('closes and opens the pad panel', async () => {
fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, { fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1, count: 1,
results: [], results: [],
}); });
@@ -157,7 +153,7 @@ describe('PanelTeams', () => {
await userEvent.click( await userEvent.click(
screen.getByRole('button', { screen.getByRole('button', {
name: 'Close the teams panel', name: 'Close the pads panel',
}), }),
); );
@@ -165,7 +161,7 @@ describe('PanelTeams', () => {
await userEvent.click( await userEvent.click(
screen.getByRole('button', { screen.getByRole('button', {
name: 'Open the teams panel', name: 'Open the pads panel',
}), }),
); );

View File

@@ -67,7 +67,7 @@ export const PadItem = ({ pad }: PadItemProps) => {
<Box $align="center" $direction="row" $gap="0.5rem"> <Box $align="center" $direction="row" $gap="0.5rem">
{hasMembers ? ( {hasMembers ? (
<IconGroup <IconGroup
aria-label={t(`Teams icon`)} aria-label={t(`Pads icon`)}
color={colorsTokens()['primary-500']} color={colorsTokens()['primary-500']}
{...commonProps} {...commonProps}
style={{ style={{
@@ -77,7 +77,7 @@ export const PadItem = ({ pad }: PadItemProps) => {
/> />
) : ( ) : (
<IconNone <IconNone
aria-label={t(`Empty teams icon`)} aria-label={t(`Empty pads icon`)}
color={colorsTokens()['greyscale-500']} color={colorsTokens()['greyscale-500']}
{...commonProps} {...commonProps}
style={{ style={{

View File

@@ -34,12 +34,12 @@ export const Panel = () => {
transition: ${transition}; transition: ${transition};
`} `}
$height="inherit" $height="inherit"
aria-label="Teams panel" aria-label="Pads panel"
{...closedOverridingStyles} {...closedOverridingStyles}
> >
<BoxButton <BoxButton
aria-label={ aria-label={
isOpen ? t('Close the teams panel') : t('Open the teams panel') isOpen ? t('Close the pads panel') : t('Open the pads panel')
} }
$color={colorsTokens()['primary-600']} $color={colorsTokens()['primary-600']}
$css={` $css={`

View File

@@ -19,7 +19,9 @@ describe('checks all the frontend translation are made', () => {
Object.keys(jsonimpress) Object.keys(jsonimpress)
.filter((key) => key !== 'en') .filter((key) => key !== 'en')
.forEach((key) => { .forEach((key) => {
const listKeysimpress = Object.keys(jsonimpress[key].translation).sort(); const listKeysimpress = Object.keys(
jsonimpress[key].translation,
).sort();
const missingKeys = listKeysCrowdin.filter( const missingKeys = listKeysCrowdin.filter(
(element) => !listKeysimpress.includes(element), (element) => !listKeysimpress.includes(element),
); );