From 9771e0ad702cfe9ad06a575828fe6701dcec5fb2 Mon Sep 17 00:00:00 2001
From: Shaun Hamilton <shauhami020@gmail.com>
Date: Thu, 2 Feb 2023 17:46:13 +0000
Subject: [PATCH] fix(client): cert project help post sans editable region
 (#49157)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .../Challenges/redux/create-question-epic.js  | 49 ++++++++-------
 .../redux/create-question-epic.test.js        | 62 +++++++++++++++++++
 2 files changed, 89 insertions(+), 22 deletions(-)

diff --git a/client/src/templates/Challenges/redux/create-question-epic.js b/client/src/templates/Challenges/redux/create-question-epic.js
index 93ff05697b2..b037e4301f4 100644
--- a/client/src/templates/Challenges/redux/create-question-epic.js
+++ b/client/src/templates/Challenges/redux/create-question-epic.js
@@ -38,6 +38,31 @@ function filesToMarkdown(challengeFiles = {}) {
   }, '\n');
 }
 
+export function insertEditableRegions(challengeFiles = []) {
+  if (challengeFiles?.some(file => file.editableRegionBoundaries?.length > 0)) {
+    const editableRegionStrings = fileExtension => {
+      const startComment = fileExtension === 'html' ? '<!--' : '/*';
+      const endComment = fileExtension === 'html' ? '-->' : '*/';
+      return `\n${startComment} User Editable Region ${endComment}\n`;
+    };
+
+    const filesWithEditableRegions = challengeFiles.map(file => {
+      const { contents, editableRegionBoundaries, ext } = file;
+      if (editableRegionBoundaries.length > 0) {
+        const comment = editableRegionStrings(ext);
+        const [start, end] = editableRegionBoundaries;
+        const lines = contents.split('\n');
+        lines.splice(start, 0, comment);
+        lines.splice(end, 0, comment);
+        return { ...file, contents: lines.join('\n') };
+      }
+      return file;
+    });
+    return filesWithEditableRegions;
+  }
+  return challengeFiles;
+}
+
 function createQuestionEpic(action$, state$, { window }) {
   return action$.pipe(
     ofType(actionTypes.createQuestion),
@@ -50,29 +75,9 @@ function createQuestionEpic(action$, state$, { window }) {
         block,
         helpCategory
       } = challengeMetaSelector(state);
-      if (
-        challengeFiles?.some(file => file.editableRegionBoundaries.length > 0)
-      ) {
-        const editableRegionStrings = fileExtension => {
-          const startComment = fileExtension === 'html' ? '<!--' : '/*';
-          const endComment = fileExtension === 'html' ? '-->' : '*/';
-          return `\n${startComment} User Editable Region ${endComment}\n`;
-        };
 
-        const filesWithEditableRegions = challengeFiles.map(file => {
-          const { contents, editableRegionBoundaries, ext } = file;
-          if (editableRegionBoundaries.length > 0) {
-            const comment = editableRegionStrings(ext);
-            const [start, end] = editableRegionBoundaries;
-            const lines = contents.split('\n');
-            lines.splice(start, 0, comment);
-            lines.splice(end, 0, comment);
-            return { ...file, contents: lines.join('\n') };
-          }
-          return file;
-        });
-        challengeFiles = filesWithEditableRegions;
-      }
+      challengeFiles = insertEditableRegions(challengeFiles);
+
       const {
         navigator: { userAgent },
         location: { pathname, origin }
diff --git a/client/src/templates/Challenges/redux/create-question-epic.test.js b/client/src/templates/Challenges/redux/create-question-epic.test.js
index 3e211b0fce8..6572b0f1b7c 100644
--- a/client/src/templates/Challenges/redux/create-question-epic.test.js
+++ b/client/src/templates/Challenges/redux/create-question-epic.test.js
@@ -1,4 +1,5 @@
 import { transformEditorLink } from '../utils';
+import { insertEditableRegions } from './create-question-epic';
 
 describe('create-question-epic', () => {
   describe('transformEditorLink', () => {
@@ -27,4 +28,65 @@ describe('create-question-epic', () => {
       });
     });
   });
+  describe('insertEditableRegions', () => {
+    const multiCertChallengeFiles = [
+      {
+        contents: '<h1>Hello World</h1>',
+        ext: 'html',
+        fileKey: 'indexhtml',
+        history: ['index.html'],
+        head: '',
+        id: '',
+        name: 'index',
+        path: 'index.html',
+        seed: '',
+        tail: ''
+      },
+      {
+        contents: '',
+        ext: 'css',
+        fileKey: 'stylescss',
+        history: ['styles.css'],
+        head: '',
+        id: '',
+        name: 'styles',
+        path: 'styles.css',
+        seed: '',
+        tail: ''
+      }
+    ];
+    const multiPracticeChallengeFiles = [
+      {
+        contents:
+          '<html>\n  <body>\n    <h1>Hello World</h1>\n  </body>\n</html>',
+        editableRegionBoundaries: [2, 4],
+        ext: 'html',
+        fileKey: 'indexhtml',
+        history: ['index.html'],
+        head: '',
+        id: '',
+        name: 'index',
+        path: 'index.html',
+        seed: '<html>\n  <body>\n    <h1>Hello World</h1>\n  </body>\n</html>',
+        tail: ''
+      }
+    ];
+    it('should not insert editable regions for certification projects', () => {
+      const challengeFiles = insertEditableRegions(multiCertChallengeFiles);
+      challengeFiles.forEach(({ contents }) => {
+        expect(contents).not.toContain('User Editable Region');
+      });
+    });
+    it('should insert editable regions for multifile practice projects', () => {
+      const challengeFiles = insertEditableRegions(multiPracticeChallengeFiles);
+      challengeFiles.forEach(({ contents }) => {
+        expect(contents).toContain('User Editable Region');
+      });
+    });
+    it('should not throw if editableRegionBoundaries is undefined', () => {
+      expect(() =>
+        insertEditableRegions(multiCertChallengeFiles)
+      ).not.toThrow();
+    });
+  });
 });