diff --git a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts index 041ed437..da0fed69 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts @@ -31,6 +31,12 @@ test.describe('Template Editor', () => { page, browserName, }) => { + // eslint-disable-next-line playwright/no-skipped-test + test.skip( + browserName !== 'chromium', + 'This test failed with safary because of the dragNdrop', + ); + const randomTemplate = await createTemplate( page, 'template-editor', @@ -64,6 +70,12 @@ test.describe('Template Editor', () => { page, browserName, }) => { + // eslint-disable-next-line playwright/no-skipped-test + test.skip( + browserName !== 'chromium', + 'This test failed with safary because of the dragNdrop', + ); + const randomTemplate = await createTemplate( page, 'template-html', @@ -86,4 +98,42 @@ test.describe('Template Editor', () => { await page.getByText('Save template').click(); await expect(page.getByText('Template save successfully')).toBeVisible(); }); + + test('it shows a warning if body tag not present', async ({ + page, + browserName, + }) => { + // eslint-disable-next-line playwright/no-skipped-test + test.skip( + browserName !== 'chromium', + 'This test failed with safary because of the dragNdrop', + ); + + const randomTemplate = await createTemplate( + page, + 'template-html', + browserName, + 1, + ); + + await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible(); + + await expect( + page.getByText('The {{body}} tag is necessary to works with the pads.'), + ).toBeVisible(); + + const iframe = page.frameLocator('iFrame.gjs-frame'); + + await page.getByTitle('Open Blocks').click(); + await page + .locator('.gjs-editor .gjs-block[title="Text"]') + .dragTo(iframe.locator('body.gjs-dashed')); + + await iframe.getByText('Insert your text here').fill('{{body}}'); + await iframe.locator('body.gjs-dashed').click(); + + await expect( + page.getByText('The {{body}} tag is necessary to works with the pads.'), + ).toBeHidden(); + }); }); diff --git a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx index 3bbadfec..13fe9f6d 100644 --- a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx +++ b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx @@ -1,5 +1,6 @@ import GjsEditor from '@grapesjs/react'; import { + Alert, Button, VariantType, useToastProvider, @@ -30,6 +31,17 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => { }, }); const [editor, setEditor] = useState(); + const [showWarning, setShowWarning] = useState(false); + + const html = editor?.getHtml(); + + useEffect(() => { + if (showWarning || !html) { + return; + } + + setShowWarning(html.includes('{{body}}') === false); + }, [html, showWarning]); useEffect(() => { if (!editor?.loadProjectData) { @@ -84,7 +96,7 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => { updateTemplate({ id: template.id, css: editor.getCss(), - html: editor.getHtml(), + html, }); } }} @@ -92,6 +104,18 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => { {t('Save template')} + {showWarning && html && ( + + {`The {{body}} tag is necessary to works with the pads.`} + + )} +