feat(client): make all sources available in tests (#44725)

* feat: make all sources available in tests

The original contents of all files (index.html, script.js etc.) will be
accessible in tests.  For example __sources['index.html'] gets the
original html file and nothing else.

* feat: use __file to get user code

client/src/client/frame-runner.ts

@@ -26,6 +26,7 @@ export interface InitTestFrameArg {
   code: {
     contents?: string;
     editableContents?: string;
+    original?: { [id: string]: string };
   };
   getUserInput?: (fileName: string) => string;
   loadEnzyme?: () => void;
@@ -33,6 +34,14 @@ export interface InitTestFrameArg {
 
 async function initTestFrame(e: InitTestFrameArg = { code: {} }) {
   const code = (e.code.contents || '').slice();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const __file = (id?: string) => {
+    if (id && e.code.original) {
+      return e.code.original[id];
+    } else {
+      return code;
+    }
+  };
   const editableContents = (e.code.editableContents || '').slice();
   // __testEditable allows test authors to run tests against a transitory dom
   // element built using only the code in the editable region.

client/src/client/workers/test-evaluator.ts

@@ -63,6 +63,7 @@ interface TestEvaluatorEvent extends MessageEvent {
     code: {
       contents: string;
       editableContents: string;
+      original: { [id: string]: string };
     };
     removeComments: boolean;
     firstTest: unknown;

client/src/templates/Challenges/utils/build.js

@@ -47,10 +47,12 @@ function buildSourceMap(challengeFiles) {
   const source = challengeFiles.reduce(
     (sources, challengeFile) => {
       sources.index += challengeFile.source || challengeFile.contents;
+      sources.contents = sources.index;
+      sources.original[challengeFile.history[0]] = challengeFile.source;
       sources.editableContents += challengeFile.editableContents || '';
       return sources;
     },
-    { index: '', editableContents: '' }
+    { index: '', editableContents: '', original: {} }
   );
   return source;
 }

client/src/templates/Challenges/utils/frame.js

@@ -111,15 +111,13 @@ const initTestFrame = frameReady => ctx => {
   waitForFrame(ctx)
     .then(async () => {
       const { sources, loadEnzyme } = ctx;
-      // default for classic challenges
-      // should not be used for modern
-      const code = {
-        contents: sources.index,
-        editableContents: sources.editableContents
-      };
       // provide the file name and get the original source
       const getUserInput = fileName => toString(sources[fileName]);
-      await ctx.document.__initTestFrame({ code, getUserInput, loadEnzyme });
+      await ctx.document.__initTestFrame({
+        code: sources,
+        getUserInput,
+        loadEnzyme
+      });
       frameReady();
     })
     .catch(handleDocumentNotFound);

curriculum/test/test-challenges.js

@@ -675,7 +675,11 @@ async function initializeTestRunner(build, sources, code, loadEnzyme) {
   await page.evaluate(
     async (code, sources, loadEnzyme) => {
       const getUserInput = fileName => sources[fileName];
-      await document.__initTestFrame({ code, getUserInput, loadEnzyme });
+      await document.__initTestFrame({
+        code: sources,
+        getUserInput,
+        loadEnzyme
+      });
     },
     code,
     sources,