✨(frontend) one-click document creation

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to
 
 - ✨(ci) add security scan #291
 - ✨(frontend) Activate versions feature #240
+- ✨(frontend) one-click document creation #275
+- ✨(frontend) edit title inline #275
 
 ## Changed
 

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

@@ -29,32 +29,21 @@ export const createDoc = async (
   length: number,
   isPublic: boolean = false,
 ) => {
-  const buttonCreate = page.getByRole('button', {
-    name: 'Create the document',
-  });
-
   const randomDocs = randomName(docName, browserName, length);
 
   for (let i = 0; i < randomDocs.length; i++) {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new document',
-    });
-    await buttonCreateHomepage.click();
-
-    // Fill input
     await page
-      .getByRole('textbox', {
-        name: 'Document name',
+      .getByRole('button', {
+        name: 'Create a new document',
       })
-      .fill(randomDocs[i]);
-
-    await expect(buttonCreate).toBeEnabled();
-    await buttonCreate.click();
+      .click();
 
-    await expect(page.locator('h2').getByText(randomDocs[i])).toBeVisible();
+    await page.getByRole('heading', { name: 'Untitled document' }).click();
+    await page.keyboard.type(randomDocs[i]);
+    await page.getByText('Created at ').click();
 
     if (isPublic) {
       await page.getByRole('button', { name: 'Share' }).click();

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,
+    });
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -40,19 +40,18 @@ test.describe('Doc Editor', () => {
 
     await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
 
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page
-      .locator('.ProseMirror.bn-editor')
-      .fill('[test markdown](http://test-markdown.html)');
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('[test markdown](http://test-markdown.html)');
 
-    await expect(page.getByText('[test markdown]')).toBeVisible();
+    await expect(editor.getByText('[test markdown]')).toBeVisible();
 
-    await page.getByText('[test markdown]').dblclick();
+    await editor.getByText('[test markdown]').dblclick();
     await page.locator('button[data-test="convertMarkdown"]').click();
 
-    await expect(page.getByText('[test markdown]')).toBeHidden();
+    await expect(editor.getByText('[test markdown]')).toBeHidden();
     await expect(
-      page.getByRole('link', {
+      editor.getByRole('link', {
         name: 'test markdown',
       }),
     ).toHaveAttribute('href', 'http://test-markdown.html');
@@ -64,38 +63,40 @@ test.describe('Doc Editor', () => {
     // Check the first doc
     const firstDoc = await goToGridDoc(page);
     await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').fill('Hello World Doc 1');
-    await expect(page.getByText('Hello World Doc 1')).toBeVisible();
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('Hello World Doc 1');
+    await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
 
     // Check the second doc
     const secondDoc = await goToGridDoc(page, {
       nthRow: 2,
     });
     await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
-    await expect(page.getByText('Hello World Doc 1')).toBeHidden();
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').fill('Hello World Doc 2');
-    await expect(page.getByText('Hello World Doc 2')).toBeVisible();
+    await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
+    await editor.click();
+    await editor.fill('Hello World Doc 2');
+    await expect(editor.getByText('Hello World Doc 2')).toBeVisible();
 
     // Check the first doc again
     await goToGridDoc(page, {
       title: firstDoc,
     });
     await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
-    await expect(page.getByText('Hello World Doc 2')).toBeHidden();
-    await expect(page.getByText('Hello World Doc 1')).toBeVisible();
+    await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
+    await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
   });
 
   test('it saves the doc when we change pages', async ({ page }) => {
     // Check the first doc
     const doc = await goToGridDoc(page);
     await expect(page.locator('h2').getByText(doc)).toBeVisible();
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page
-      .locator('.ProseMirror.bn-editor')
-      .fill('Hello World Doc persisted 1');
-    await expect(page.getByText('Hello World Doc persisted 1')).toBeVisible();
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('Hello World Doc persisted 1');
+    await expect(editor.getByText('Hello World Doc persisted 1')).toBeVisible();
 
     const secondDoc = await goToGridDoc(page, {
       nthRow: 2,
@@ -107,7 +108,7 @@ test.describe('Doc Editor', () => {
       title: doc,
     });
 
-    await expect(page.getByText('Hello World Doc persisted 1')).toBeVisible();
+    await expect(editor.getByText('Hello World Doc persisted 1')).toBeVisible();
   });
 
   test('it saves the doc when we quit pages', async ({ page, browserName }) => {
@@ -117,19 +118,19 @@ test.describe('Doc Editor', () => {
     // Check the first doc
     const doc = await goToGridDoc(page);
     await expect(page.locator('h2').getByText(doc)).toBeVisible();
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page
-      .locator('.ProseMirror.bn-editor')
-      .fill('Hello World Doc persisted 2');
-    await expect(page.getByText('Hello World Doc persisted 2')).toBeVisible();
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('Hello World Doc persisted 2');
+    await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
 
     await page.goto('/');
 
     await goToGridDoc(page, {
       title: doc,
     });
 
-    await expect(page.getByText('Hello World Doc persisted 2')).toBeVisible();
+    await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
   });
 
   test('it cannot edit if viewer', async ({ page }) => {

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -212,26 +212,6 @@ test.describe('Documents Grid', () => {
     ).toHaveText(/.*/);
   });
 
-  test('it updates document', async ({ page }) => {
-    const datagrid = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table');
-
-    const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
-
-    const docName = await docRow.nth(1).textContent();
-
-    await docRow.getByLabel('Open the document options').click();
-
-    await page.getByText('Update document').click();
-
-    await page.getByLabel('Document name').fill(`${docName} updated`);
-
-    await page.getByText('Validate the modification').click();
-
-    await expect(datagrid.getByText(`${docName} updated`)).toBeVisible();
-  });
-
   test('it deletes the document', async ({ page }) => {
     const datagrid = page
       .getByLabel('Datagrid of the documents page 1')
@@ -241,11 +221,9 @@ test.describe('Documents Grid', () => {
 
     const docName = await docRow.nth(1).textContent();
 
-    await docRow.getByLabel('Open the document options').click();
-
-    await page
+    await docRow
       .getByRole('button', {
-        name: 'Delete document',
+        name: 'Delete the document',
       })
       .click();