fix: add more test coverage

__mocks__/monaco-editor.js

@@ -1,9 +1,44 @@
-const MonacoEditorMock = {
+class Selection {
+  //
+};
+
+const monaco = {
   Uri: {
     parse(f) {
       return f;
     }
   },
+  get editor() {
+    return this;
+  },
+  languages: {
+    json: {
+      jsonDefaults: {
+        setDiagnosticsOptions() {
+        }
+      }
+    }
+  },
+  setSelection() {
+
+  },
+  focus() {
+
+  },
+  Selection,
+  onDidChangeModelContent() {
+
+  },
+  setModel() {
+
+  },
+  createModel() {
+    return {
+      updateOptions() {
+
+      }
+    }
+  },
   create() {
     return this;
   },
@@ -13,4 +48,4 @@ const MonacoEditorMock = {
   }
 };
 
-export default MonacoEditorMock;
+module.exports = monaco;

src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/JSONValidationErrorList.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import JSONValidationErrorList from "./JSONValidationErrorList";
+import * as monaco from "monaco-editor";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<JSONValidationErrorList markers={[]}/>, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders validation error list with markers", () => {
+  const div = document.createElement("div");
+  const markers: monaco.editor.IMarker[] = [
+    {
+      startLineNumber: 2,
+      startColumn: 10,
+      message: "bad thing",
+    } as monaco.editor.IMarker,
+  ];
+  ReactDOM.render(<JSONValidationErrorList markers={markers} />, div);
+  expect(div.innerHTML.includes("2")).toBe(true);
+  expect(div.innerHTML.includes("10")).toBe(true);
+  expect(div.innerHTML.includes("bad thing")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/PlaygroundSplitPane.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PlaygroundSplitPane from "./PlaygroundSplitPane";
+import * as monaco from "monaco-editor";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<PlaygroundSplitPane
+    left={
+      <div>Foo</div>
+    }
+    right={
+      <div>Bar</div>
+    }
+  />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders playground with left and right with split true", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<PlaygroundSplitPane
+    split={true}
+    left={
+      <div>Foo</div>
+    }
+    right={
+      <div>Bar</div>
+    }
+  />, div);
+  expect(div.innerHTML.includes("Foo")).toBe(true);
+  expect(div.innerHTML.includes("Bar")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders playground without left when split is false", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<PlaygroundSplitPane
+    split={false}
+    left={
+      <div>Foo</div>
+    }
+    right={
+      <div>Bar</div>
+    }
+  />, div);
+  expect(div.innerHTML.includes("Foo")).toBe(false);
+  expect(div.innerHTML.includes("Bar")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/PlaygroundSplitPane.tsx

@@ -6,7 +6,7 @@ interface IProps {
   onChange?: (size: number) => any;
   left: JSX.Element;
   right: JSX.Element;
-  split: boolean;
+  split?: boolean | undefined;
 }
 
 const PlaygroundSplitPane: React.FC<IProps> = (props) => {
@@ -25,8 +25,7 @@ const PlaygroundSplitPane: React.FC<IProps> = (props) => {
   }
 
   return (
-    <SplitPane
-      split="vertical"
+    <SplitPane split="vertical"
       minSize={100}
       maxSize={-100}
       defaultSize={window.innerWidth / 2}

src/SearchBar/SearchBar.test.tsx

@@ -4,13 +4,13 @@ import SearchBar from "./SearchBar";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<SearchBar />, div);
+  ReactDOM.render(<SearchBar searchBarUrl={undefined}/>, div);
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders uiSchema inputPlaceholder", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<SearchBar uiSchema={{
+  ReactDOM.render(<SearchBar searchBarUrl={undefined} uiSchema={{
     appBar: {
       "ui:inputPlaceholder": "enter url",
     },

src/hooks/useMonacoModel.tsx

@@ -28,7 +28,7 @@ const useMonacoModel = (
       editor.setModel(m);
       const [selectionStartLineNumber, selectionStartColumn, positionLineNumber, positionColumn] = position;
       editor.setSelection(
-        new monaco.Selection(selectionStartLineNumber, selectionStartColumn, positionLineNumber, positionColumn)
+        new monaco.Selection(selectionStartLineNumber, selectionStartColumn, positionLineNumber, positionColumn),
       );
       editor.focus();
     }