From db9c9ecfe3f27829f96a5e31e621a03c39ae1b8d Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 16 Apr 2024 09:15:10 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=A1(app-impress)=20remove=20mock=20pad?= =?UTF-8?q?=20endpoints?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../apps/e2e/__tests__/app-impress/common.ts | 22 +++-- ...ad-create.specWI.ts => pad-create.spec.ts} | 21 +---- .../__tests__/app-impress/pad-editor.spec.ts | 25 ++++-- .../__tests__/app-impress/pad-panel.spec.ts | 40 +++------ .../src/features/pads/pad/api/usePad.tsx | 45 +--------- .../pads/pad/components/PadEditor.tsx | 2 +- .../impress/src/features/pads/pad/types.tsx | 21 ++--- .../pads/pads-create/api/useCreatePad.tsx | 8 +- .../pads-panel/__tests__/PanelPads.test.tsx | 39 +++------ .../features/pads/pads-panel/api/usePads.tsx | 85 +------------------ .../pads/pads-panel/components/PadItem.tsx | 2 +- 11 files changed, 73 insertions(+), 237 deletions(-) rename src/frontend/apps/e2e/__tests__/app-impress/{pad-create.specWI.ts => pad-create.spec.ts} (79%) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts index ae77bcbc..542638cc 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/common.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/common.ts @@ -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 ( diff --git a/src/frontend/apps/e2e/__tests__/app-impress/pad-create.specWI.ts b/src/frontend/apps/e2e/__tests__/app-impress/pad-create.spec.ts similarity index 79% rename from src/frontend/apps/e2e/__tests__/app-impress/pad-create.specWI.ts rename to src/frontend/apps/e2e/__tests__/app-impress/pad-create.spec.ts index 0a276da9..4bc6aa87 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/pad-create.specWI.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/pad-create.spec.ts @@ -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( diff --git a/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts index a31c054a..7ad22de4 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts @@ -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'); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/pad-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/pad-panel.spec.ts index 68c7d064..ed86d8eb 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/pad-panel.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/pad-panel.spec.ts @@ -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)'); }); }); diff --git a/src/frontend/apps/impress/src/features/pads/pad/api/usePad.tsx b/src/frontend/apps/impress/src/features/pads/pad/api/usePad.tsx index b2ae57b3..9bf859f0 100644 --- a/src/frontend/apps/impress/src/features/pads/pad/api/usePad.tsx +++ b/src/frontend/apps/impress/src/features/pads/pad/api/usePad.tsx @@ -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 => { - /** - * 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)); diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx index bfd1b923..6880a851 100644 --- a/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx +++ b/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx @@ -17,7 +17,7 @@ export const PadEditor = ({ pad }: PadEditorProps) => { - {pad.name} + {pad.title} diff --git a/src/frontend/apps/impress/src/features/pads/pad/types.tsx b/src/frontend/apps/impress/src/features/pads/pad/types.tsx index e35b7cc5..97343beb 100644 --- a/src/frontend/apps/impress/src/features/pads/pad/types.tsx +++ b/src/frontend/apps/impress/src/features/pads/pad/types.tsx @@ -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; }; } diff --git a/src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx b/src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx index 067dfeb9..f22550f7 100644 --- a/src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx +++ b/src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx @@ -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 => { - const response = await fetchAPI(`pads/`, { +export const createPad = async (title: string): Promise => { + const response = await fetchAPI(`documents/`, { method: 'POST', body: JSON.stringify({ - name, + title, }), }); diff --git a/src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelPads.test.tsx b/src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelPads.test.tsx index cc5a2d93..7899b885 100644 --- a/src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelPads.test.tsx +++ b/src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelPads.test.tsx @@ -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: [], }); diff --git a/src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx b/src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx index d1ed91b5..bec57309 100644 --- a/src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx +++ b/src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx @@ -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 => { - /** - * 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; diff --git a/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx b/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx index ad1d3605..7c004331 100644 --- a/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx +++ b/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx @@ -93,7 +93,7 @@ export const PadItem = ({ pad }: PadItemProps) => { min-width: 14rem; `} > - {pad.name} + {pad.title}