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}