From 2ccb04ed7f2853fcc47c277796379786ffbc3d48 Mon Sep 17 00:00:00 2001
From: Jono M <reason.koan@gmail.com>
Date: Tue, 8 Aug 2023 10:08:19 +0100
Subject: [PATCH] Added tests for code injection (#17623)

refs https://github.com/TryGhost/Product/issues/3688
---
 .../settings/advanced/CodeInjection.tsx       |  4 +-
 .../settings/advanced/code/CodeModal.tsx      |  2 +-
 .../test/e2e/advanced/codeInjection.test.ts   | 81 +++++++++++++++++++
 3 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts

diff --git a/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx b/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx
index c18a25f0d6..b09f179be2 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx
@@ -46,12 +46,12 @@ const CodeInjection: React.FC<{ keywords: string[] }> = ({keywords}) => {
         {
             id: 'header',
             title: 'Site header',
-            contents: (<CodeEditor {...headerProps} ref={headerEditorRef} autoFocus />)
+            contents: (<CodeEditor {...headerProps} ref={headerEditorRef} data-testid='header-code' autoFocus />)
         },
         {
             id: 'footer',
             title: 'Site footer',
-            contents: (<CodeEditor {...footerProps} ref={footerEditorRef} />)
+            contents: (<CodeEditor {...footerProps} ref={footerEditorRef} data-testid='footer-code' />)
         }
     ] as const;
 
diff --git a/apps/admin-x-settings/src/components/settings/advanced/code/CodeModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/code/CodeModal.tsx
index 6190fae19d..a7493f4ecf 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/code/CodeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/code/CodeModal.tsx
@@ -19,7 +19,7 @@ const CodeModal: React.FC<CodeModalProps> = ({hint, value, onChange, afterClose}
         afterClose?.();
     };
 
-    return <Modal afterClose={afterClose} cancelLabel='' okColor='grey' okLabel='Done' size='full' onOk={onOk}>
+    return <Modal afterClose={afterClose} cancelLabel='' okColor='grey' okLabel='Done' size='full' testId='modal-code' onOk={onOk}>
         <CodeEditor extensions={[html()]} height='full' hint={hint} value={value} autoFocus onChange={onChange} />
     </Modal>;
 };
diff --git a/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts b/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts
new file mode 100644
index 0000000000..53b2494d3b
--- /dev/null
+++ b/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts
@@ -0,0 +1,81 @@
+import {expect, test} from '@playwright/test';
+import {globalDataRequests, mockApi, updatedSettingsResponse} from '../../utils/e2e';
+
+test.describe('Code injection settings', async () => {
+    test('Supports adding injected code', async ({page}) => {
+        const {lastApiRequests} = await mockApi({page, requests: {
+            ...globalDataRequests,
+            editSettings: {method: 'PUT', path: '/settings/', response: updatedSettingsResponse([
+                {key: 'codeinjection_head', value: '<testhead />'},
+                {key: 'codeinjection_foot', value: '<testfoot />'}
+            ])}
+        }});
+
+        await page.goto('/');
+
+        const section = page.getByTestId('code-injection');
+
+        await section.getByRole('button', {name: 'Edit'}).click();
+
+        for (const character of '<testhead />'.split('')) {
+            await page.keyboard.press(character);
+        }
+
+        await section.getByRole('tab', {name: 'Site footer'}).click();
+        await section.getByTestId('footer-code').click();
+
+        for (const character of '<testfoot />'.split('')) {
+            await page.keyboard.press(character);
+        }
+
+        await section.getByRole('button', {name: 'Save'}).click();
+
+        expect(lastApiRequests.editSettings?.body).toEqual({
+            settings: [
+                {key: 'codeinjection_head', value: '<testhead />'},
+                {key: 'codeinjection_foot', value: '<testfoot />'}
+            ]
+        });
+    });
+
+    test('Supports continuing editing in fullscreen', async ({page}) => {
+        const {lastApiRequests} = await mockApi({page, requests: {
+            ...globalDataRequests,
+            editSettings: {method: 'PUT', path: '/settings/', response: updatedSettingsResponse([
+                {key: 'codeinjection_head', value: '<1 /><2 /><3 />'}
+            ])}
+        }});
+
+        await page.goto('/');
+
+        const section = page.getByTestId('code-injection');
+
+        await section.getByRole('button', {name: 'Edit'}).click();
+
+        for (const character of '<1 />'.split('')) {
+            await page.keyboard.press(character);
+        }
+
+        await section.getByRole('button', {name: 'Fullscreen'}).click();
+
+        await page.keyboard.press('End');
+        for (const character of '<2 />'.split('')) {
+            await page.keyboard.press(character);
+        }
+
+        await page.getByTestId('modal-code').getByRole('button', {name: 'Done'}).click();
+
+        await page.keyboard.press('End');
+        for (const character of '<3 />'.split('')) {
+            await page.keyboard.press(character);
+        }
+
+        await section.getByRole('button', {name: 'Save'}).click();
+
+        expect(lastApiRequests.editSettings?.body).toEqual({
+            settings: [
+                {key: 'codeinjection_head', value: '<1 /><2 /><3 />'}
+            ]
+        });
+    });
+});