fix: insert user html more consistently (#42195)

* fix: use an iframe to preserve head and body

* fix: remove unnecessary parsing of html

The contents gets inserted into the DOM during transformHtml, which
is always part of the build pipeline

* fix: pipe contents through iframe

* refactor: use the same code for both transforms

* fix: try to handle test errors better

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-002.md

@@ -19,13 +19,13 @@ You should create a `meta` element within the `head` element.
 
 ```js
 // TODO: Once builder is fixed so head info is not in body
-assert.exists(document.querySelector('body > meta'));
+assert.exists(document.querySelector('head > meta'));
 ```
 
 You should give the `meta` tag a `charset` of `UTF-8`.
 
 ```js
-assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8');
+assert.equal(document.querySelector('head > meta')?.getAttribute('charset'), 'UTF-8');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-003.md

@@ -16,20 +16,20 @@ Add a `viewport` definition with a `content` attribute detailing the `width` and
 You should create another `meta` element in the `head`.
 
 ```js
-assert.equal(document.querySelectorAll('body > meta')?.length, 2);
+assert.equal(document.querySelectorAll('head > meta')?.length, 2);
 ```
 
 You should give the `meta` a `name` attribute of `viewport`.
 
 ```js
-assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
+assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1);
 ```
 
 You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
 
 ```js
 // TODO: Double-check this is the only correct answer
-assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
+assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-005.md

@@ -17,19 +17,19 @@ You should add a `title` element to the `head`.
 
 ```js
 // TODO: Fix once builder puts head in the right place
-assert.exists(document.querySelector('body > title'));
+assert.exists(document.querySelector('head > title'));
 ```
 
 You should not make the `title` longer than 60 characters.
 
 ```js
-assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60);
+assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
 ```
 
 Try being more descriptive with your `title` element. _Hint: At least 20 characters_
 
 ```js
-assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20);
+assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 20);
 ```
 
 # --seed--

curriculum/package.json

@@ -25,7 +25,7 @@
     "delete-step": "cross-env CALLING_DIR=$INIT_CWD node ../tools/challenge-helper-scripts/delete-step",
     "lint": "gulp lint",
     "reorder-steps": "cross-env CALLING_DIR=$INIT_CWD node ../tools/challenge-helper-scripts/reorder-steps",
-    "test": "mocha --delay --exit  --reporter progress --bail",
+    "test": "mocha --delay --exit --reporter progress --bail",
     "test:full-output": "cross-env FULL_OUTPUT=true mocha --delay --reporter progress"
   },
   "devDependencies": {

curriculum/test/test-challenges.js

@@ -73,6 +73,14 @@ const { flatten, isEmpty, cloneDeep, isEqual } = lodash;
 
 // rethrow unhandled rejections to make sure the tests exit with -1
 process.on('unhandledRejection', err => handleRejection(err));
+// If an uncaught exception gets here, then mocha is in an unexpected state. All
+// we can do is log the exception and exit with a non-zero code.
+process.on('uncaughtException', err => {
+  console.error('Uncaught exception:', err.message);
+  console.error(err.stack);
+  // eslint-disable-next-line no-process-exit
+  process.exit(1);
+});
 
 const handleRejection = err => {
   // setting the error code because node does not (yet) exit with a non-zero