fix: add syntax highlighted markdown tests

Author: shanejonas

src/MarkdownDescription/MarkdownDescription.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import MarkdownDescription from "./MarkdownDescription";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<MarkdownDescription uiSchema={{}} />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders a description", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<MarkdownDescription uiSchema={{}} source={"foo"}/>, div);
+  expect(div.innerHTML).toContain("foo");
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders a description with syntax highlighting", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<MarkdownDescription uiSchema={{}} source={"```javascript\n\nconst foo = 'bar';\n\n```"}/>, div);
+  expect(div.innerHTML).toContain("language-javascript");
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders a description with darkmode syntax highlighting", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<MarkdownDescription uiSchema={{appBar: {"ui:darkMode": true}}} source={"```javascript\n\nconst foo = 'bar';\n\n```"}/>, div);
+  expect(div.innerHTML).toContain("language-javascript");
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders a description that errors", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<MarkdownDescription uiSchema={{}} source={"```"}/>, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/MarkdownDescription/MarkdownDescription.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialDark, materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import ReactMarkdown from "react-markdown";
-import { Container } from "@material-ui/core";
 
 interface IProps {
   className?: string;
@@ -11,25 +10,24 @@ interface IProps {
 }
 
 const MarkdownDescription: React.FC<IProps> = ({ source, className, uiSchema }) => {
-  try {
-    return (
-      <ReactMarkdown
-        renderers={{
-          code: ({ language, value }) => {
-            return <SyntaxHighlighter
-              style={uiSchema && uiSchema.appBar["ui:darkMode"] ? materialDark : materialLight}
-              language={language}
-              children={value}
-            />;
-          },
-        }}
-        source={source}
-        className={className}
-      />
-    );
-  } catch (e) {
-    return <ReactMarkdown source={source} className={className} />;
-  }
+  return (
+    <ReactMarkdown
+      renderers={{
+        code: ({ language, value }) => {
+          if (!value) {
+            return <pre><code></code></pre>;
+          }
+          return <SyntaxHighlighter
+            style={uiSchema && uiSchema.appBar && uiSchema.appBar["ui:darkMode"] ? materialDark : materialLight}
+            language={language}
+            children={value}
+          />;
+        },
+      }}
+      source={source}
+      className={className}
+    />
+  );
 };
 
 export default MarkdownDescription;