test(CodeBlock)

src/components/Markdown.js

@@ -116,6 +116,7 @@ LinkRenderer.defaultProps = {
 
 /** Markdown component */
 
+// note: Markdown component only transfers className as remaining props (not style or others)
 const Markdown = ({ repository, source, ...remainingProps }) => (
   <ReactMarkdown
     source={source}

src/components/Package/Readme.js

@@ -46,6 +46,7 @@ const styles = theme => ({
   }
 });
 
+// note: Markdown component only transfers className as remaining props (not style or others) - so does Readme
 const Readme = ({
   classes,
   source,

src/components/__tests__/CodeBlock.spec.js

@@ -20,11 +20,17 @@ describe("/components/CodeBlock", () => {
         "Hello world"
       );
     });
+    it("should pass value as child", () => {
+      const { getByText } = render(
+        <CodeBlock value="some code" language="js" />
+      );
+      expect(getByText("some code")).toBeTruthy();
+    });
     it("should set className on <code> element according to props.language", () => {
-      const { container } = render(<CodeBlock value="" language="js" />);
-      const [codeElement] = container.getElementsByClassName("language-js");
-      expect(codeElement).toBeTruthy();
+      const { getByText } = render(
+        <CodeBlock value="some code" language="js" />
+      );
+      expect(getByText("some code")).toHaveClass("language-js");
     });
-    // @todo test markdown formatting
   });
 });

src/components/__tests__/Markdown.spec.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { render } from "../../testUtils";
+
+import Markdown from "../Markdown";
+
+describe("/components/Markdown", () => {
+  describe("render", () => {
+    it("should ONLY pass className from remainingProps", () => {
+      const { container } = render(
+        <Markdown
+          className="hello-world"
+          style={{ color: "red" }}
+          data-infos="Hello world"
+        />
+      );
+      expect(container.firstChild).toHaveClass("hello-world");
+      expect(container.firstChild.style.color).not.toBe("red");
+      expect(container.firstChild.getAttribute("data-infos")).not.toBe(
+        "Hello world"
+      );
+    });
+  });
+});