(frontend) add EmojiPicker in DocumentTitle

We can now add emojis to the document title using
the EmojiPicker component.
This commit is contained in:
Olivier Laurendeau
2025-09-15 18:55:35 +02:00
committed by Anthony LC
parent b1d033edc9
commit 08f3ceaf3f
9 changed files with 205 additions and 58 deletions

View File

@@ -65,16 +65,36 @@ test.describe('Doc Header', () => {
page,
browserName,
}) => {
await createDoc(page, 'doc-update', browserName, 1);
await createDoc(page, 'doc-update-emoji', browserName, 1);
const emojiPicker = page.locator('.--docs--doc-title').getByRole('button');
// Top parent should not have emoji picker
await expect(emojiPicker).toBeHidden();
const { name: docChild } = await createRootSubPage(
page,
browserName,
'doc-update-emoji-child',
);
await verifyDocName(page, docChild);
await expect(emojiPicker).toBeVisible();
await emojiPicker.click({
delay: 100,
});
await page.getByRole('button', { name: '😀' }).first().click();
await expect(emojiPicker).toHaveText('😀');
const docTitle = page.getByRole('textbox', { name: 'Document title' });
await expect(docTitle).toBeVisible();
await docTitle.fill('👍 Hello Emoji World');
await docTitle.fill('Hello Emoji World');
await docTitle.blur();
await verifyDocName(page, '👍 Hello Emoji World');
await verifyDocName(page, 'Hello Emoji World');
// Check the tree
const row = await getTreeRow(page, 'Hello Emoji World');
await expect(row.getByText('👍')).toBeVisible();
await expect(row.getByText('😀')).toBeVisible();
});
test('it deletes the doc', async ({ page, browserName }) => {

View File

@@ -340,9 +340,11 @@ test.describe('Doc Tree', () => {
// Verify the emoji is updated in the tree and in the document title
await expect(row.getByText('😀')).toBeVisible();
await expect(
page.getByRole('textbox', { name: 'Document title' }),
).toContainText('😀');
const titleEmojiPicker = page
.locator('.--docs--doc-title')
.getByRole('button');
await expect(titleEmojiPicker).toHaveText('😀');
// Now remove the emoji using the new action
await row.hover();
@@ -350,9 +352,7 @@ test.describe('Doc Tree', () => {
await page.getByRole('menuitem', { name: 'Remove emoji' }).click();
await expect(row.getByText('😀')).toBeHidden();
await expect(
page.getByRole('textbox', { name: 'Document title' }),
).not.toContainText('😀');
await expect(titleEmojiPicker).not.toHaveText('😀');
});
});