fix storyshots for MarkdownViewer and SyntaxHighlighter

scm-ui/ui-components/src/MarkdownView.stories.js

@@ -1,29 +1,11 @@
 // @flow
-import React, {useState, useEffect} from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import MarkdownView from "./MarkdownView";
-import Loading from "./Loading";
 import styled from "styled-components";
 import {MemoryRouter} from "react-router-dom";
 
-type Props = {
-  url: string
-};
-
-const DataFetchingMarkdownView = ({url}: Props) => {
-  const [content, setContent] = useState("")
-  useEffect(() => {
-    fetch(url)
-      .then(response => response.text())
-      .then(setContent);
-  });
-
-  if (content) {
-    return <MarkdownView content={content} skipHtml={false} />;
-  } else {
-    return <Loading />;
-  }
-};
+import TestPage from "./__resources__/test-page.md";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -35,6 +17,6 @@ storiesOf("MarkdownView", module)
   ))
   .add("Default", () => (
   <Spacing>
-    <DataFetchingMarkdownView url="/test-page.md" />
+    <MarkdownView content={TestPage} skipHtml={false} />
   </Spacing>
 ));

scm-ui/ui-components/src/SyntaxHighlighter.stories.js

@@ -1,51 +1,36 @@
 // @flow
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import SyntaxHighlighter from "./SyntaxHighlighter";
-import Loading from "./Loading";
+
+import JavaHttpServer from "./__resources__/HttpServer.java";
+import GoHttpServer from "./__resources__/HttpServer.go";
+import JsHttpServer from "./__resources__/HttpServer.js.js";
+import PyHttpServer from "./__resources__/HttpServer.py";
 
 const Spacing = styled.div`
   padding: 1em;
 `;
 
-type Props = {
-  url: string,
-  language: string
-};
-
-const LoadingSyntaxHighlighter = ({ url, language }: Props) => {
-  const [content, setContent] = useState(undefined);
-  useEffect(() => {
-    fetch(url)
-      .then(response => response.text())
-      .then(setContent);
-  });
-  if (content) {
-    return <SyntaxHighlighter language={language} value={content} />;
-  } else {
-    return <Loading />;
-  }
-};
-
 storiesOf("SyntaxHighlighter", module)
   .add("Java", () => (
     <Spacing>
-      <LoadingSyntaxHighlighter language="java" url="/HttpServer.java" />
+      <SyntaxHighlighter language="java" value={JavaHttpServer} />
     </Spacing>
   ))
   .add("Go", () => (
     <Spacing>
-      <LoadingSyntaxHighlighter language="go" url="/HttpServer.go" />
+      <SyntaxHighlighter language="go" value={GoHttpServer} />
     </Spacing>
   ))
   .add("Javascript", () => (
     <Spacing>
-      <LoadingSyntaxHighlighter language="javascript" url="/HttpServer.js" />
+      <SyntaxHighlighter language="javascript" value={JsHttpServer} />
     </Spacing>
   ))
   .add("Python", () => (
     <Spacing>
-      <LoadingSyntaxHighlighter language="python" url="/HttpServer.py" />
+      <SyntaxHighlighter language="python" value={PyHttpServer} />
     </Spacing>
   ));

scm-ui/ui-components/src/__resources__/HttpServer.go.js

@@ -1,4 +1,4 @@
-package main
+export default `package main
 
 import (
   "fmt"
@@ -15,3 +15,4 @@ func main() {
 
   http.ListenAndServe(":80", nil)
 }
+`;

scm-ui/ui-components/src/__resources__/HttpServer.java.js

@@ -1,4 +1,4 @@
-package com.stackoverflow.q3732109;
+export default `package com.example;
 
 import java.io.IOException;
 import java.io.OutputStream;
@@ -29,3 +29,4 @@ public class Test {
   }
 
 }
+`;

scm-ui/ui-components/src/__resources__/HttpServer.js.js

@@ -1,6 +1,7 @@
-var http = require('http');
+export default `var http = require('http');
 http.createServer(function (req, res) {
   res.writeHead(200, {'Content-Type': 'text/plain'});
   res.write('Hello World!');
   res.end();
 }).listen(8080);
+`;

scm-ui/ui-components/src/__resources__/HttpServer.py.js

@@ -1,4 +1,4 @@
-from BaseHTTPServer import BaseHTTPRequestHandler,HTTPServer
+export default `from BaseHTTPServer import BaseHTTPRequestHandler,HTTPServer
 
 PORT_NUMBER = 8080
 
@@ -18,3 +18,4 @@ try:
 except KeyboardInterrupt:
   print '^C received, shutting down the web server'
   server.socket.close()
+`;

scm-ui/ui-components/src/__resources__/test-page.md.js

@@ -1,4 +1,4 @@
-# <a name="top"></a>Markdown Test Page
+export default `# <a name="top"></a>Markdown Test Page
 
 * [Headings](#Headings)
 * [Paragraphs](#Paragraphs)
@@ -126,13 +126,13 @@ Minim id consequat adipisicing cupidatat laborum culpa veniam non consectetur et
 
 ## Inline code
 
-Ad amet irure est magna id mollit Lorem in do duis enim. Excepteur velit nisi magna ea pariatur pariatur ullamco fugiat deserunt sint non sint. Duis duis est `code in text` velit velit aute culpa ex quis pariatur pariatur laborum aute pariatur duis tempor sunt ad. Irure magna voluptate dolore consectetur consectetur irure esse. Anim magna `<strong>in culpa qui officia</strong>` dolor eiusmod esse amet aute cupidatat aliqua do id voluptate cupidatat reprehenderit amet labore deserunt.
+Ad amet irure est magna id mollit Lorem in do duis enim. Excepteur velit nisi magna ea pariatur pariatur ullamco fugiat deserunt sint non sint. Duis duis est \`code in text\` velit velit aute culpa ex quis pariatur pariatur laborum aute pariatur duis tempor sunt ad. Irure magna voluptate dolore consectetur consectetur irure esse. Anim magna \`<strong>in culpa qui officia</strong>\` dolor eiusmod esse amet aute cupidatat aliqua do id voluptate cupidatat reprehenderit amet labore deserunt.
 
 ## Highlighted
 
 Et fugiat ad nisi amet magna labore do cillum fugiat occaecat cillum Lorem proident. In sint dolor ullamco ad do adipisicing amet id excepteur Lorem aliquip sit irure veniam laborum duis cillum. Aliqua occaecat minim cillum deserunt magna sunt laboris do do irure ea nostrud consequat ut voluptate ex.
 
-```go
+\`\`\`go
 package main
 
 import (
@@ -148,7 +148,7 @@ func main() {
     http.HandleFunc("/", handler)
     http.ListenAndServe(":8080", nil)
 }
-```
+\`\`\`
 
 Ex amet id ex aliquip id do laborum excepteur exercitation elit sint commodo occaecat nostrud est. Nostrud pariatur esse veniam laborum non sint magna sit laboris minim in id. Aliqua pariatur pariatur excepteur adipisicing irure culpa consequat commodo et ex id ad.
 
@@ -160,7 +160,7 @@ Sint ea anim ipsum ad commodo cupidatat do **exercitation** incididunt et minim
 
 ![Super wide](http://placekitten.com/1280/800)
 
-*Proident sit veniam in est proident officia adipisicing* ea tempor cillum non cillum velit deserunt. Voluptate laborum incididunt sit consectetur Lorem irure incididunt voluptate nostrud. Commodo ut eiusmod tempor cupidatat esse enim minim ex anim consequat. Mollit sint culpa qui laboris quis consectetur ad sint esse. Amet anim anim minim ullamco et duis non irure. Sit tempor adipisicing ea laboris `culpa ex duis sint` anim aute reprehenderit id eu ea. Aute [excepteur proident](#!) Lorem minim adipisicing nostrud mollit ad ut voluptate do nulla esse occaecat aliqua sint anim.
+*Proident sit veniam in est proident officia adipisicing* ea tempor cillum non cillum velit deserunt. Voluptate laborum incididunt sit consectetur Lorem irure incididunt voluptate nostrud. Commodo ut eiusmod tempor cupidatat esse enim minim ex anim consequat. Mollit sint culpa qui laboris quis consectetur ad sint esse. Amet anim anim minim ullamco et duis non irure. Sit tempor adipisicing ea laboris \`culpa ex duis sint\` anim aute reprehenderit id eu ea. Aute [excepteur proident](#!) Lorem minim adipisicing nostrud mollit ad ut voluptate do nulla esse occaecat aliqua sint anim.
 
 ![Not so big](http://placekitten.com/480/400)
 
@@ -169,3 +169,4 @@ Incididunt in culpa cupidatat mollit cillum qui proident sit. In cillum aliquip
 [![Manny Pacquiao](https://img.youtube.com/vi/s6bCmZmy9aQ/0.jpg)](https://youtu.be/s6bCmZmy9aQ)
 
 Reprehenderit non eu quis in ad elit esse qui aute id [incididunt](#!) dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure.
+`;

scm-ui/ui-components/src/storyshots.test.js

@@ -2,6 +2,5 @@ import path from "path";
 import initStoryshots from "@storybook/addon-storyshots";
 
 initStoryshots({
-  configPath: path.resolve(__dirname, "..", ".storybook"),
-  storyKindRegex:/^((?!.*?MarkdownView|SyntaxHighlighter).)*$/
+  configPath: path.resolve(__dirname, "..", ".storybook")
 });