Feat: editable dom element (#39341)

* feat: __testEditable allows editable region tests

It's not entirely isolated, but it makes it possible to select only the
element with id 'editable-only' which is built solely from code inside
the editable region.

* fix(client): missing editableContents -> ''

Previously it was added as the string 'undefined'

* fix: more informative error messages

* fix: DRY, correct and test getLines

client/src/client/frame-runner.js

@@ -7,8 +7,20 @@ document.__initTestFrame = initTestFrame;
 
 async function initTestFrame(e = { code: {} }) {
   const code = (e.code.contents || '').slice();
-  // eslint-disable-next-line no-unused-vars
   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.
+  // eslint-disable-next-line no-unused-vars
+  const __testEditable = cb => {
+    const div = document.createElement('div');
+    div.id = 'editable-only';
+    div.innerHTML = editableContents;
+    document.body.appendChild(div);
+    const out = cb();
+    document.body.removeChild(div);
+    return out;
+  };
+
   if (!e.getUserInput) {
     e.getUserInput = () => code;
   }
@@ -85,12 +97,8 @@ async function initTestFrame(e = { code: {} }) {
       if (!(err instanceof chai.AssertionError)) {
         console.error(err);
       }
-      return {
-        err: {
-          message: err.message,
-          stack: err.stack
-        }
-      };
+      // return the error so that the curriculum tests are more informative
+      return err;
     }
   };
 }

client/src/templates/Challenges/redux/index.js

@@ -3,6 +3,7 @@ import { createAction, handleActions } from 'redux-actions';
 import { createTypes } from '../../../../utils/stateManagement';
 
 import { createPoly } from '../../../../../utils/polyvinyl';
+import { getLines } from '../../../../../utils/get-lines';
 import challengeModalEpic from './challenge-modal-epic';
 import completionEpic from './completion-epic';
 import codeLockEpic from './code-lock-epic';
@@ -131,18 +132,6 @@ export const createFiles = createAction(types.createFiles, challengeFiles =>
     )
 );
 
-// TODO: secure with tests
-function getLines(contents, range) {
-  if (isEmpty(range)) {
-    return '';
-  }
-  const lines = contents.split('\n');
-  const editableLines = isEmpty(lines)
-    ? []
-    : lines.slice(range[0], range[1] - 1);
-  return editableLines.join('\n');
-}
-
 export const createQuestion = createAction(types.createQuestion);
 export const initTests = createAction(types.initTests);
 export const updateTests = createAction(types.updateTests);

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

@@ -58,7 +58,7 @@ function buildSourceMap(files) {
   return files.reduce(
     (sources, file) => {
       sources[file.name] += file.source || file.contents;
-      sources.editableContents += file.editableContents;
+      sources.editableContents += file.editableContents || '';
       return sources;
     },
     { index: '', editableContents: '' }