From 6e223529702d581d7381ea116ac8bd4f88333151 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 30 Jun 2023 21:46:57 +0200
Subject: [PATCH] fix(client): ensure __runTest is used (#50849)

---
 .../templates/Challenges/rechallenge/builders.ts | 15 ++++++++++++---
 client/src/templates/Challenges/utils/build.ts   | 16 +++++-----------
 .../62b46e3a8d4be31be5af793d.md                  |  5 ++++-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/src/templates/Challenges/rechallenge/builders.ts b/client/src/templates/Challenges/rechallenge/builders.ts
index f174c79acb9..cc2a5a97067 100644
--- a/client/src/templates/Challenges/rechallenge/builders.ts
+++ b/client/src/templates/Challenges/rechallenge/builders.ts
@@ -1,15 +1,17 @@
 import { template as _template } from 'lodash-es';
 
 interface ConcatHTMLOptions {
-  required: { src: string; link?: string }[];
+  required?: { src: string; link?: string }[];
   template?: string;
   contents?: string;
+  testRunner?: string;
 }
 
 export function concatHtml({
   required = [],
   template,
-  contents
+  contents,
+  testRunner
 }: ConcatHTMLOptions): string {
   const embedSource = template
     ? _template(template)
@@ -31,5 +33,12 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
     })
     .join('\n');
 
-  return `<head>${head}</head>${embedSource({ source: contents }) || ''}`;
+  // The script has an id so that tests can look for it, if needed.
+  const testRunnerScript = testRunner
+    ? `<script id="fcc-test-runner" src='${testRunner}' type='text/javascript'></script>`
+    : '';
+
+  return `<head>${head}</head>${
+    embedSource({ source: contents }) || ''
+  }${testRunnerScript}`;
 }
diff --git a/client/src/templates/Challenges/utils/build.ts b/client/src/templates/Challenges/utils/build.ts
index 3e1a70091c1..c0506438627 100644
--- a/client/src/templates/Challenges/utils/build.ts
+++ b/client/src/templates/Challenges/utils/build.ts
@@ -44,11 +44,7 @@ interface BuildOptions {
 const { filename: runner } = frameRunnerData;
 const { filename: testEvaluator } = testEvaluatorData;
 
-const frameRunner = [
-  {
-    src: `/js/${runner}.js`
-  }
-];
+const frameRunnerSrc = `/js/${runner}.js`;
 
 type ApplyFunctionProps = (file: ChallengeFile) => Promise<ChallengeFile>;
 
@@ -200,9 +196,6 @@ export function buildDOMChallenge(
   { challengeFiles, required = [], template = '' }: BuildChallengeData,
   { usesTestRunner } = { usesTestRunner: false }
 ): Promise<BuildResult> | undefined {
-  const finalRequires = [...required];
-  if (usesTestRunner) finalRequires.push(...frameRunner);
-
   const loadEnzyme = challengeFiles?.some(
     challengeFile => challengeFile.ext === 'jsx'
   );
@@ -222,9 +215,10 @@ export function buildDOMChallenge(
           challengeType:
             challengeTypes.html || challengeTypes.multifileCertProject,
           build: concatHtml({
-            required: finalRequires,
+            required,
             template,
-            contents
+            contents,
+            ...(usesTestRunner && { testRunner: frameRunnerSrc })
           }),
           sources: buildSourceMap(challengeFiles),
           loadEnzyme
@@ -264,7 +258,7 @@ export function buildJSChallenge(
 function buildBackendChallenge({ url }: BuildChallengeData) {
   return {
     challengeType: challengeTypes.backend,
-    build: concatHtml({ required: frameRunner }),
+    build: concatHtml({ testRunner: frameRunnerSrc }),
     sources: { url }
   };
 }
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md
index d98f9e81298..4e8f3312801 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md
@@ -25,7 +25,10 @@ Your `script` element should come at the end of your `body` element.
 ```js
 const script = document.querySelector('script[data-src$="script.js"]');
 assert.equal(script.previousElementSibling.tagName, "DIV");
-assert.isNull(script.nextElementSibling);
+// When building the test frame, the runner script is always inserted after user
+// code. This means the learner's script should be the penultimate element in 
+// the body.
+assert.equal(script.nextElementSibling.id, "fcc-test-runner");
 assert.equal(script.parentElement.tagName, "BODY");
 ```