From 9e89c88489b224f44cda1f24d26624f4e968882a Mon Sep 17 00:00:00 2001
From: Jono M <reason.koan@gmail.com>
Date: Thu, 31 Aug 2023 19:54:39 +0100
Subject: [PATCH] Added workaround for flaky codemirror test (#17884)

refs https://github.com/TryGhost/Product/issues/3349

---

This pull request improves the end-to-end tests for the code injection
settings in the admin-x-settings app. It fixes some typing and saving
issues with the `CodeMirror` editor.
---
 .../test/e2e/advanced/codeInjection.test.ts   | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts b/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts
index 53b2494d3b..b95679e056 100644
--- a/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts
+++ b/apps/admin-x-settings/test/e2e/advanced/codeInjection.test.ts
@@ -1,6 +1,11 @@
 import {expect, test} from '@playwright/test';
 import {globalDataRequests, mockApi, updatedSettingsResponse} from '../../utils/e2e';
 
+// CodeMirror takes some time to load in Playwright meaning the first few characters typed don't always
+// show up in the input. Since that lag is not consistent, this workaround ensures we type enough
+// characters to consistently include the full string we want
+const PADDING = 'xxxxx ';
+
 test.describe('Code injection settings', async () => {
     test('Supports adding injected code', async ({page}) => {
         const {lastApiRequests} = await mockApi({page, requests: {
@@ -17,23 +22,23 @@ test.describe('Code injection settings', async () => {
 
         await section.getByRole('button', {name: 'Edit'}).click();
 
-        for (const character of '<testhead />'.split('')) {
+        for (const character of PADDING + '<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('')) {
+        for (const character of PADDING + '<testfoot>'.split('')) {
             await page.keyboard.press(character);
         }
 
         await section.getByRole('button', {name: 'Save'}).click();
 
-        expect(lastApiRequests.editSettings?.body).toEqual({
+        expect(lastApiRequests.editSettings?.body).toMatchObject({
             settings: [
-                {key: 'codeinjection_head', value: '<testhead />'},
-                {key: 'codeinjection_foot', value: '<testfoot />'}
+                {key: 'codeinjection_head', value: /<testhead>$/},
+                {key: 'codeinjection_foot', value: /<testfoot>$/}
             ]
         });
     });
@@ -52,29 +57,33 @@ test.describe('Code injection settings', async () => {
 
         await section.getByRole('button', {name: 'Edit'}).click();
 
-        for (const character of '<1 />'.split('')) {
+        for (const character of PADDING.split('')) {
+            await page.keyboard.press(character);
+        }
+
+        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('')) {
+        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('')) {
+        for (const character of '<3>'.split('')) {
             await page.keyboard.press(character);
         }
 
         await section.getByRole('button', {name: 'Save'}).click();
 
-        expect(lastApiRequests.editSettings?.body).toEqual({
+        expect(lastApiRequests.editSettings?.body).toMatchObject({
             settings: [
-                {key: 'codeinjection_head', value: '<1 /><2 /><3 />'}
+                {key: 'codeinjection_head', value: /<1><2><3>$/}
             ]
         });
     });