🚀(app-impress) add template builder editor

We add the template builder editor to
the template feature.
It will be used to create and edit templates.

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

@@ -45,6 +45,35 @@ export const createPad = async (
   return randomPads;
 };
 
+export const createTemplate = async (
+  page: Page,
+  templateName: string,
+  browserName: string,
+  length: number,
+) => {
+  const menu = page.locator('menu').first();
+  await menu.getByLabel(`Template button`).click();
+
+  const panel = page.getByLabel('Templates panel').first();
+  const buttonCreate = page.getByRole('button', {
+    name: 'Create the template',
+  });
+
+  const randomTemplates = randomName(templateName, browserName, length);
+
+  for (let i = 0; i < randomTemplates.length; i++) {
+    await panel.getByRole('button', { name: 'Add a template' }).click();
+    await page.getByText('Template name').fill(randomTemplates[i]);
+    await expect(buttonCreate).toBeEnabled();
+    await buttonCreate.click();
+    await expect(
+      panel.locator('li').getByText(randomTemplates[i]),
+    ).toBeVisible();
+  }
+
+  return randomTemplates;
+};
+
 export const addNewMember = async (
   page: Page,
   index: number,

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

@@ -10,6 +10,7 @@ test.beforeEach(async ({ page, browserName }) => {
 test.describe('Menu', () => {
   const menuItems = [
     { name: 'Search', isDefault: true },
+    { name: 'Template', isDefault: false },
     { name: 'Favorite', isDefault: false },
     { name: 'Recent', isDefault: false },
     { name: 'Contacts', isDefault: false },

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

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+import { createTemplate, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Template Editor', () => {
+  test('checks the template editor interact correctly', async ({
+    page,
+    browserName,
+  }) => {
+    const randomTemplate = await createTemplate(
+      page,
+      'template-editor',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    await page.getByTitle('Open Blocks').click();
+    await expect(
+      page.locator('.gjs-editor .gjs-block[title="Text"]'),
+    ).toBeVisible();
+  });
+});