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

🤡(app-impress) remove mock pad endpoints

Browse Source 
The backend was updated to include the
pad endpoints.
The mock pad endpoints were removed
in favor of the real ones.
We adapted the types as well to match
the real ones.
This commit is contained in:
Anthony LC
2024-04-16 09:15:10 +02:00
committed by Anthony LC
parent 3e0739cd0a
commit db9c9ecfe3
11 changed files with 73 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/frontend/apps/e2e/__tests__/app-impress/common.ts
View File

@@ -23,28 +23,26 @@ export const randomName = (name: string, browserName: string, length: number) =>
return `${browserName}-${Math.floor(Math.random() * 10000)}-${index}-${name}`;
});
export const createTeam = async (
export const createPad = async (
page: Page,
teamName: string,
padName: string,
browserName: string,
length: number,
) => {
const panel = page.getByLabel('Teams panel').first();
const buttonCreate = page.getByRole('button', { name: 'Create the team' });
const panel = page.getByLabel('Pads panel').first();
const buttonCreate = page.getByRole('button', { name: 'Create the pad' });
const randomTeams = randomName(teamName, browserName, length);
const randomPads = randomName(padName, browserName, length);
for (let i = 0; i < randomTeams.length; i++) {
await panel.getByRole('button', { name: 'Add a team' }).click();
await page.getByText('Team name').fill(randomTeams[i]);
for (let i = 0; i < randomPads.length; i++) {
await panel.getByRole('button', { name: 'Add a pad' }).click();
await page.getByText('Pad name').fill(randomPads[i]);
await expect(buttonCreate).toBeEnabled();
await buttonCreate.click();
await expect(
panel.locator('li').nth(0).getByText(randomTeams[i]),
).toBeVisible();
await expect(panel.locator('li').getByText(randomPads[i])).toBeVisible();
}
return randomTeams;
return randomPads;
};
export const addNewMember = async (

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

@@ -71,7 +71,7 @@ test.describe('Pad Create', () => {
await page.getByText('Pad name').fill(padName);
await page.getByRole('button', { name: 'Create the pad' }).click();
const elPad = page.getByText(`Members of “${padName}“`);
const elPad = page.locator('h2').getByText(padName);
await expect(elPad).toBeVisible();
await panel.getByRole('button', { name: 'Add a pad' }).click();
@@ -95,25 +95,6 @@ test.describe('Pad Create', () => {
await expect(page).toHaveURL(/\/pads$/);
});
test('checks error when duplicate pad', async ({ page, browserName }) => {
const panel = page.getByLabel('Pads panel').first();
await panel.getByRole('button', { name: 'Add a pad' }).click();
const padName = `My duplicate pad ${browserName}-${Math.floor(Math.random() * 1000)}`;
await page.getByText('Pad name').fill(padName);
await page.getByRole('button', { name: 'Create the pad' }).click();
await panel.getByRole('button', { name: 'Add a pad' }).click();
await page.getByText('Pad name').fill(padName);
await page.getByRole('button', { name: 'Create the pad' }).click();
await expect(
page.getByText('Pad with this Slug already exists.'),
).toBeVisible();
});
test('checks 404 on pads/[id] page', async ({ page }) => {
await page.goto('/pads/some-unknown-pad');
await expect(

25
src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
View File

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
import cs from 'convert-stream';
import pdf from 'pdf-parse';
import { keyCloakSignIn } from './common';
import { createPad, keyCloakSignIn } from './common';
test.beforeEach(async ({ page, browserName }) => {
await page.goto('/');
@@ -10,23 +10,29 @@ test.beforeEach(async ({ page, browserName }) => {
});
test.describe('Pad Editor', () => {
test('checks the Pad Editor interact correctly', async ({ page }) => {
await page.getByText('My mocked pad').first().click();
test('checks the Pad Editor interact correctly', async ({
page,
browserName,
}) => {
const randomPad = await createPad(page, 'pad-editor', browserName, 1);
await expect(page.locator('h2').getByText('My mocked pad')).toBeVisible();
await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').fill('Hello World');
await expect(page.getByText('Hello World')).toBeVisible();
});
test('checks the Pad is connected to the webrtc server', async ({ page }) => {
test('checks the Pad is connected to the webrtc server', async ({
page,
browserName,
}) => {
const webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
return webSocket.url().includes('ws://localhost:4444/');
});
await page.getByText('My mocked pad').first().click();
await expect(page.locator('h2').getByText('My mocked pad')).toBeVisible();
const randomPad = await createPad(page, 'pad-editor', browserName, 1);
await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
const webSocket = await webSocketPromise;
expect(webSocket.url()).toBe('ws://localhost:4444/');
@@ -47,13 +53,14 @@ test.describe('Pad Editor', () => {
test('it converts the pad to pdf with a template integrated', async ({
page,
browserName,
}) => {
const downloadPromise = page.waitForEvent('download', (download) => {
return download.suggestedFilename().includes('impress-document.pdf');
});
await page.getByText('My mocked pad').first().click();
await expect(page.locator('h2').getByText('My mocked pad')).toBeVisible();
const randomPad = await createPad(page, 'pad-editor', browserName, 1);
await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').fill('Hello World');

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

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
import { waitForElementCount } from '../helpers';
import { createTeam, keyCloakSignIn } from './common';
import { createPad, keyCloakSignIn } from './common';
test.beforeEach(async ({ page, browserName }) => {
await page.goto('/');
@@ -28,19 +28,16 @@ test.describe('Pads Panel', () => {
).toBeVisible();
});
/**
* TODO: remove the skip when we can create pads
*/
test.skip('checks the sort button', async ({ page }) => {
test('checks the sort button', async ({ page }) => {
const responsePromiseSortDesc = page.waitForResponse(
(response) =>
response.url().includes('/pads/?page=1&ordering=-created_at') &&
response.url().includes('/documents/?page=1&ordering=-created_at') &&
response.status() === 200,
);
const responsePromiseSortAsc = page.waitForResponse(
(response) =>
response.url().includes('/pads/?page=1&ordering=created_at') &&
response.url().includes('/documents/?page=1&ordering=created_at') &&
response.status() === 200,
);
@@ -65,40 +62,31 @@ test.describe('Pads Panel', () => {
expect(responseSortDesc.ok()).toBeTruthy();
});
/**
* TODO: remove the skip when we can create pads
*/
test.skip('checks the infinite scroll', async ({ page, browserName }) => {
test('checks the infinite scroll', async ({ page, browserName }) => {
test.setTimeout(90000);
const panel = page.getByLabel('Pads panel').first();
const randomTeams = await createTeam(page, 'pad-infinite', browserName, 40);
const randomPads = await createPad(page, 'pad-infinite', browserName, 40);
await expect(panel.locator('li')).toHaveCount(20);
await panel.getByText(randomTeams[24]).click();
await panel.getByText(randomPads[24]).click();
await waitForElementCount(panel.locator('li'), 21, 10000);
expect(await panel.locator('li').count()).toBeGreaterThan(20);
});
/**
* TODO: remove the skip when we can create pads
*/
test.skip('checks the hover and selected state', async ({
page,
browserName,
}) => {
test('checks the hover and selected state', async ({ page, browserName }) => {
const panel = page.getByLabel('Pads panel').first();
await createTeam(page, 'pad-hover', browserName, 2);
await createPad(page, 'pad-hover', browserName, 2);
const selectedTeam = panel.locator('li').nth(0);
await expect(selectedTeam).toHaveCSS(
const selectedPad = panel.locator('li').nth(0);
await expect(selectedPad).toHaveCSS(
'background-color',
'rgb(202, 202, 251)',
);
const hoverTeam = panel.locator('li').nth(1);
await hoverTeam.hover();
await expect(hoverTeam).toHaveCSS('background-color', 'rgb(227, 227, 253)');
const hoverPad = panel.locator('li').nth(1);
await hoverPad.hover();
await expect(hoverPad).toHaveCSS('background-color', 'rgb(227, 227, 253)');
});
});

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

@@ -2,55 +2,14 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Pad, Role } from '../types';
import { Pad } 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}`);
const response = await fetchAPI(`documents/${id}`);
if (!response.ok) {
throw new APIError('Failed to get the pad', await errorCauses(response));

2
src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx
View File

@@ -17,7 +17,7 @@ export const PadEditor = ({ pad }: PadEditorProps) => {
<PadToolBox pad={pad} />
<Card className="m-b p-b" $css="margin-top:0;flex:1;" $overflow="auto">
<Text as="h2" $align="center">
{pad.name}
{pad.title}
</Text>
<BlockNoteEditor pad={pad} />
</Card>

21
src/frontend/apps/impress/src/features/pads/pad/types.tsx
View File

@@ -1,15 +1,13 @@
import { User } from '@/core/auth';
export interface Access {
id: string;
role: Role;
user: User;
team: string;
user: string;
abilities: {
delete: boolean;
get: boolean;
patch: boolean;
put: boolean;
destroy: boolean;
retrieve: boolean;
set_role_to: Role[];
update: boolean;
};
}
@@ -21,15 +19,14 @@ export enum Role {
export interface Pad {
id: string;
name: string;
title: string;
accesses: Access[];
created_at: string;
updated_at: string;
abilities: {
delete: boolean;
get: boolean;
destroy: boolean;
retrieve: boolean;
manage_accesses: boolean;
patch: boolean;
put: boolean;
update: boolean;
};
}

8
src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx
View File

@@ -5,14 +5,14 @@ import { KEY_LIST_PAD } from '@/features/pads';
type CreatePadResponse = {
id: string;
name: string;
title: string;
};
export const createPad = async (name: string): Promise<CreatePadResponse> => {
const response = await fetchAPI(`pads/`, {
export const createPad = async (title: string): Promise<CreatePadResponse> => {
const response = await fetchAPI(`documents/`, {
method: 'POST',
body: JSON.stringify({
name,
title,
}),
});

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

@@ -22,11 +22,8 @@ describe('PanelPads', () => {
fetchMock.restore();
});
/**
* 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`, {
it('renders with no pad to display', async () => {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
count: 0,
results: [],
});
@@ -42,11 +39,8 @@ describe('PanelPads', () => {
).toBeInTheDocument();
});
/**
* 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`, {
it('renders an empty pad', async () => {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
count: 1,
results: [
{
@@ -64,11 +58,8 @@ describe('PanelPads', () => {
expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
});
/**
* 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`, {
it('renders a pad with only 1 member', async () => {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
count: 1,
results: [
{
@@ -91,11 +82,8 @@ describe('PanelPads', () => {
expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
});
/**
* 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`, {
it('renders a non-empty pad', async () => {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
count: 1,
results: [
{
@@ -122,11 +110,8 @@ describe('PanelPads', () => {
expect(await screen.findByLabelText('Pads icon')).toBeInTheDocument();
});
/**
* 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`, {
it('renders the error', async () => {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
status: 500,
});
@@ -142,7 +127,7 @@ describe('PanelPads', () => {
});
it('renders with pad panel open', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
count: 1,
results: [],
});
@@ -157,7 +142,7 @@ describe('PanelPads', () => {
});
it('closes and opens the pad panel', async () => {
fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
count: 1,
results: [],
});

85
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, Role } from '@/features/pads/pad';
import { Pad } from '@/features/pads/pad';
export enum PadsOrdering {
BY_CREATED_ON = 'created_at',
@@ -26,90 +26,11 @@ 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}`);
const response = await fetchAPI(`documents/?page=${page}${orderingQuery}`);
if (!response.ok) {
throw new APIError('Failed to get the teams', await errorCauses(response));
throw new APIError('Failed to get the pads', await errorCauses(response));
}
return response.json() as Promise<PadsResponse>;

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

@@ -93,7 +93,7 @@ export const PadItem = ({ pad }: PadItemProps) => {
min-width: 14rem;
`}
>
{pad.name}
{pad.title}
</Text>
</Box>
</StyledLink>