diff --git a/CHANGELOG.md b/CHANGELOG.md index b1961069..0f771d60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to - ✨(ci) add security scan #291 - ✨(frontend) Activate versions feature #240 +- ✨(frontend) one-click document creation #275 ## Changed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts index 6fab7777..f0fcd335 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts @@ -7,48 +7,12 @@ test.beforeEach(async ({ page }) => { }); test.describe('Doc Create', () => { - test('checks all the create doc elements are visible', async ({ page }) => { - const buttonCreateHomepage = page.getByRole('button', { - name: 'Create a new document', - }); - await buttonCreateHomepage.click(); - await expect(buttonCreateHomepage).toBeHidden(); - - const card = page.getByRole('dialog').first(); - - await expect( - card.locator('h2').getByText('Create a new document'), - ).toBeVisible(); - await expect(card.getByLabel('Document name')).toBeVisible(); - - await expect( - card.getByRole('button', { - name: 'Create the document', - }), - ).toBeVisible(); - - await expect(card.getByLabel('Close the modal')).toBeVisible(); - }); - - test('checks the cancel button interaction', async ({ page }) => { - const buttonCreateHomepage = page.getByRole('button', { - name: 'Create a new document', - }); - await buttonCreateHomepage.click(); - await expect(buttonCreateHomepage).toBeHidden(); - - const card = page.getByRole('dialog').first(); - - await card.getByLabel('Close the modal').click(); - - await expect(buttonCreateHomepage).toBeVisible(); - }); - test('it creates a doc', async ({ page, browserName }) => { const [docTitle] = await createDoc(page, 'My new doc', browserName, 1); - expect(await page.locator('title').textContent()).toMatch( - /My new doc - Docs/, + await page.waitForFunction( + () => document.title.match(/My new doc - Docs/), + { timeout: 5000 }, ); const header = page.locator('header').first(); @@ -59,7 +23,8 @@ test.describe('Doc Create', () => { .getByRole('table'); await expect(datagrid.getByLabel('Loading data')).toBeHidden(); - - await expect(datagrid.getByText(docTitle)).toBeVisible(); + await expect(datagrid.getByText(docTitle)).toBeVisible({ + timeout: 5000, + }); }); }); diff --git a/src/frontend/apps/impress/src/__tests__/pages.test.tsx b/src/frontend/apps/impress/src/__tests__/pages.test.tsx index 140932bc..60d1e1ea 100644 --- a/src/frontend/apps/impress/src/__tests__/pages.test.tsx +++ b/src/frontend/apps/impress/src/__tests__/pages.test.tsx @@ -5,6 +5,14 @@ import { AppWrapper } from '@/tests/utils'; import Page from '../pages'; +jest.mock('next/navigation', () => ({ + useRouter() { + return { + push: jest.fn(), + }; + }, +})); + describe('Page', () => { it('checks Page rendering', () => { render(, { wrapper: AppWrapper }); diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts b/src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts index 8860f7da..5cf42cd7 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts @@ -1,3 +1,4 @@ +export * from './useCreateDoc'; export * from './useDoc'; export * from './useDocs'; export * from './useUpdateDoc'; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx index 880f5652..a3534dc2 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx @@ -1,33 +1,34 @@ import { Button } from '@openfun/cunningham-react'; -import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Box, Card } from '@/components'; -import { ModalCreateDoc } from '@/features/docs/doc-management'; +import { Box } from '@/components'; +import { useCreateDoc, useTrans } from '@/features/docs/doc-management/'; import { DocsGrid } from './DocsGrid'; export const DocsGridContainer = () => { const { t } = useTranslation(); - const [isModalCreateOpen, setIsModalCreateOpen] = useState(false); + const { untitledDocument } = useTrans(); + const router = useRouter(); + + const { mutate: createDoc } = useCreateDoc({ + onSuccess: (doc) => { + router.push(`/docs/${doc.id}`); + }, + }); + + const handleCreateDoc = () => { + createDoc({ title: untitledDocument }); + }; return ( - - - - - + + + - {isModalCreateOpen && ( - setIsModalCreateOpen(false)} /> - )} ); };