fix: Decode HTML entities in the test output (#111)

packages/learn/src/templates/Challenges/classic/Show.js

@@ -32,6 +32,8 @@ import {
 
 import './classic.css';
 
+import decodeHTMLEntities from '../../../../utils/decodeHTMLEntities';
+
 const mapStateToProps = createSelector(
   challengeFilesSelector,
   challengeTestsSelector,
@@ -200,7 +202,7 @@ class ShowClassic extends PureComponent {
 * Your test output will go here.
 */
 `}
-                output={output}
+                output={decodeHTMLEntities(output)}
               />
             </ReflexElement>
           ) : null}

packages/learn/utils/decodeHTMLEntities.js

@@ -0,0 +1,27 @@
+/*
+ * Converts HTML entity codes in a string to the characters they represent.
+ *
+ * Example:
+ * `decodeHTMLEntities('Beets & carrots');`
+ * will return "Beets & carrots".
+ *
+ * The regex makes sure we only replace the HTML entities in the string.
+ * For example, the regex would match "<" as well as ":".
+ * The decoding works by setting the innerHTML of a dummy element and then
+ * retrieving the innerText. Per the spec, innerText is a property that
+ * represents the "rendered" text content of an element.
+ *
+ * See:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText
+ * https://developer.mozilla.org/en-US/docs/Glossary/Entity
+ *
+ */
+const decodeHTMLEntities = str => {
+  const el = document.createElement('div');
+  return str.replace(/\&[#0-9a-z]+;/gi, enc => {
+    el.innerHTML = enc;
+    return el.innerText;
+  });
+};
+
+export default decodeHTMLEntities;