feat: allow for dynamic hints (#44279)

client/src/client/frame-runner.js

@@ -98,9 +98,15 @@ async function initTestFrame(e = { code: {} }) {
         console.error(err);
       }
       // to provide useful debugging information when debugging the tests, we
-      // have to extract the message and stack before returning
+      // have to extract the message, stack and, if they exist, expected and
+      // actual before returning
       return {
-        err: { message: err.message, stack: err.stack }
+        err: {
+          message: err.message,
+          stack: err.stack,
+          expected: err.expected,
+          actual: err.actual
+        }
       };
     }
   };

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -167,7 +167,11 @@ function* executeTests(testRunner, tests, testTimeout = 5000) {
         throw err;
       }
     } catch (err) {
-      newTest.message = text;
+      const { actual, expected } = err;
+
+      newTest.message = text
+        .replace('--fcc-expected--', expected)
+        .replace('--fcc-actual--', actual);
       if (err === 'timeout') {
         newTest.err = 'Test timed out';
         newTest.message = `${newTest.message} (${newTest.err})`;

docs/how-to-work-on-coding-challenges.md

@@ -64,10 +64,13 @@ Tests to run against user code, in pairs of markdown text and code block test co
 Code for test one
 ```
 
-More instructions in markdown syntax
+If you want dynamic output based on the user's code, --fcc-expected-- and --fcc-actual-- will be replaced with the expected and actual values of the test's assertion:
 
 ```js
-More code
+assert.equal(
+  'this will replace --fcc-actual--',
+  'this will replace --fcc-expected--'
+);
 ```
 
 # --seed--