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

🤡(app-desk) mock pad and pads panel

Browse Source 
In order to access to the pad page we mocked
the api calls of the pad and pads panel.
This commit is contained in:
Anthony LC
2024-04-04 14:55:24 +02:00
committed by Anthony LC
parent b7663cca2d
commit 5ce77c2138
9 changed files with 163 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/frontend/apps/e2e/__tests__/app-impress/pad-panel.specWI.ts → src/frontend/apps/e2e/__tests__/app-impress/pad-panel.spec.ts
View File

@@ -28,7 +28,10 @@ test.describe('Pads Panel', () => {
).toBeVisible();
});
test('checks the sort button', async ({ page }) => {
/**
* TODO: remove the skip when we can create pads
*/
test.skip('checks the sort button', async ({ page }) => {
const responsePromiseSortDesc = page.waitForResponse(
(response) =>
response.url().includes('/pads/?page=1&ordering=-created_at') &&
@@ -62,7 +65,10 @@ test.describe('Pads Panel', () => {
expect(responseSortDesc.ok()).toBeTruthy();
});
test('checks the infinite scroll', async ({ page, browserName }) => {
/**
* TODO: remove the skip when we can create pads
*/
test.skip('checks the infinite scroll', async ({ page, browserName }) => {
test.setTimeout(90000);
const panel = page.getByLabel('Pads panel').first();
@@ -75,7 +81,13 @@ test.describe('Pads Panel', () => {
expect(await panel.locator('li').count()).toBeGreaterThan(20);
});
test('checks the hover and selected state', async ({ page, browserName }) => {
/**
* TODO: remove the skip when we can create pads
*/
test.skip('checks the hover and selected state', async ({
page,
browserName,
}) => {
const panel = page.getByLabel('Pads panel').first();
await createTeam(page, 'pad-hover', browserName, 2);

43
src/frontend/apps/impress/src/features/pads/pad/api/usePad.tsx
View File

@@ -2,13 +2,54 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Pad } from '../types';
import { Pad, Role } from '../types';
export type PadParams = {
id: string;
};
export const getPad = async ({ id }: PadParams): Promise<Pad> => {
/**
* TODO: Remove this block when the API endpoint is ready
*/
return await new Promise((resolve) => {
const pad: Pad = {
id: '1',
name: 'My mocked pad',
created_at: '2021-10-01T00:00:00Z',
updated_at: '2021-10-01T00:00:00Z',
accesses: [
{
id: '1',
role: Role.MEMBER,
user: {
id: '1',
name: 'user1',
email: 'john@doe.com',
},
abilities: {
delete: true,
get: true,
patch: true,
put: true,
set_role_to: [Role.MEMBER, Role.ADMIN],
},
},
],
abilities: {
delete: true,
get: true,
manage_accesses: true,
patch: true,
put: true,
},
};
setTimeout(() => {
resolve(pad);
}, 500);
});
const response = await fetchAPI(`pads/${id}`);
if (!response.ok) {

3
src/frontend/apps/impress/src/features/pads/pad/components/PadInfo.tsx
View File

@@ -6,7 +6,7 @@ import IconGroup from '@/assets/icons/icon-group2.svg';
import { Box, Card, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Pad, Role } from '../types';
import { Pad } from '../types';
const format: DateTimeFormatOptions = {
month: '2-digit',
@@ -16,7 +16,6 @@ const format: DateTimeFormatOptions = {
interface PadInfoProps {
pad: Pad;
currentRole: Role;
}
export const PadInfo = ({ pad }: PadInfoProps) => {

25
src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelTeams.test.tsx → src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelPads.test.tsx
View File

@@ -22,7 +22,10 @@ describe('PanelPads', () => {
fetchMock.restore();
});
it('renders with no pad to display', async () => {
/**
* TODO: When the backend endpoint `pads` is ready, unskip this test
*/
it.skip('renders with no pad to display', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 0,
results: [],
@@ -39,7 +42,10 @@ describe('PanelPads', () => {
).toBeInTheDocument();
});
it('renders an empty pad', async () => {
/**
* TODO: When the backend endpoint `pads` is ready, unskip this test
*/
it.skip('renders an empty pad', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1,
results: [
@@ -58,7 +64,10 @@ describe('PanelPads', () => {
expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
});
it('renders a pad with only 1 member', async () => {
/**
* TODO: When the backend endpoint `pads` is ready, unskip this test
*/
it.skip('renders a pad with only 1 member', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1,
results: [
@@ -82,7 +91,10 @@ describe('PanelPads', () => {
expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
});
it('renders a non-empty pad', async () => {
/**
* TODO: When the backend endpoint `pads` is ready, unskip this test
*/
it.skip('renders a non-empty pad', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
count: 1,
results: [
@@ -110,7 +122,10 @@ describe('PanelPads', () => {
expect(await screen.findByLabelText('Pads icon')).toBeInTheDocument();
});
it('renders the error', async () => {
/**
* TODO: When the backend endpoint `pads` is ready, unskip this test
*/
it.skip('renders the error', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
status: 500,
});

81
src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx
View File

@@ -6,7 +6,7 @@ import {
} from '@tanstack/react-query';
import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
import { Pad } from '@/features/pads';
import { Pad, Role } from '@/features/pads/pad';
export enum PadsOrdering {
BY_CREATED_ON = 'created_at',
@@ -26,6 +26,85 @@ export const getPads = async ({
ordering,
page,
}: PadsAPIParams): Promise<PadsResponse> => {
/**
* TODO: Remove this block when the API endpoint is ready
*/
return await new Promise((resolve) => {
const pads: PadsResponse = {
count: 1,
next: null,
previous: null,
results: [
{
id: '1',
name: 'My mocked pad',
created_at: '2021-10-01T00:00:00Z',
updated_at: '2021-10-01T00:00:00Z',
accesses: [
{
id: '1',
role: Role.MEMBER,
user: {
id: '1',
name: 'user1',
email: 'john@doe.com',
},
abilities: {
delete: true,
get: true,
patch: true,
put: true,
set_role_to: [Role.MEMBER, Role.ADMIN],
},
},
],
abilities: {
delete: true,
get: true,
manage_accesses: true,
patch: true,
put: true,
},
},
{
id: '2',
name: 'My mocked pad number 2',
created_at: '2021-10-01T00:00:00Z',
updated_at: '2021-10-01T00:00:00Z',
accesses: [
{
id: '1',
role: Role.MEMBER,
user: {
id: '1',
name: 'user1',
email: 'john@doe.com',
},
abilities: {
delete: true,
get: true,
patch: true,
put: true,
set_role_to: [Role.MEMBER, Role.ADMIN],
},
},
],
abilities: {
delete: true,
get: true,
manage_accesses: true,
patch: true,
put: true,
},
},
],
};
setTimeout(() => {
resolve(pads);
}, 500);
});
const orderingQuery = ordering ? `&ordering=${ordering}` : '';
const response = await fetchAPI(`pads/?page=${page}${orderingQuery}`);

2
src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx
View File

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
import IconGroup from '@/assets/icons/icon-group.svg';
import { Box, StyledLink, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Pad } from '@/features/pads';
import { Pad } from '@/features/pads/pad';
import IconNone from '../assets/icon-none.svg';

2
src/frontend/apps/impress/src/features/pads/pads-panel/components/PadList.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { Box, Text } from '@/components';
import { InfiniteScroll } from '@/components/InfiniteScroll';
import { Pad } from '@/features/pads';
import { Pad } from '@/features/pads/pad';
import { usePads } from '../api';
import { usePadStore } from '../store';

2
src/frontend/apps/impress/src/layouts/PadLayout.tsx
View File

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
import { Box } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Panel } from '@/features/pads';
import { Panel } from '@/features/pads/pads-panel';
import { MainLayout } from './MainLayout';

4
src/frontend/apps/impress/src/pages/pads/[id].tsx
View File

@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
import { Box } from '@/components';
import { TextErrors } from '@/components/TextErrors';
import { usePad } from '@/features/pads';
import { PadInfo, usePad } from '@/features/pads/pad';
import { PadLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -46,7 +46,7 @@ const Pad = ({ id }: PadProps) => {
);
}
return <>Toto</>;
return <PadInfo pad={pad} />;
};
Page.getLayout = function getLayout(page: ReactElement) {