Merge pull request #209 from lightingbeetle/fix/preview-html

Fix/preview html

Author: jurajk

packages/styleguide/src/components/MDX/MDX.js

@@ -36,7 +36,10 @@ export const MDXComponents = {
   a: props => <Link {...props} />,
   inlineCode: props => <Code {...props} />,
   code: props => (
-    <CodeBlock language={props.className.replace(/language-/, '')} {...props} />
+    <CodeBlock
+      language={props.className && props.className.replace(/language-/, '')}
+      {...props}
+    />
   ),
 };
 

packages/styleguide/src/components/Preview/CodeExample.js

@@ -167,18 +167,15 @@ export default class CodeExample extends React.Component {
   }
 
   render() {
-    const { children, codeJSXOptions, codeTypes, theme, ...other } = this.props;
+    const { children, codeJSXOptions, codeTypes, ...other } = this.props;
 
     let codeToShow;
     switch (this.state.codePreviewType) {
       case 'html':
         codeToShow = pretty(
           typeof children === 'string'
             ? unescape(children)
-            : renderToStaticMarkup({
-                ...children,
-                props: { ...children.props, theme },
-              }),
+            : renderToStaticMarkup(children),
           {
             ocd: true,
           }
@@ -214,6 +211,7 @@ export default class CodeExample extends React.Component {
         <Code
           inline={false}
           ref={this.codeBlockRef}
+          data-testid={this.state.codePreviewType}
           language={
             this.state.codePreviewType === 'html'
               ? 'markup'

packages/styleguide/src/components/Preview/Preview.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 import Preview from '.';
 
@@ -8,4 +8,19 @@ describe('rendering', () => {
     const { getByText } = render(<Preview>Preview</Preview>);
     expect(getByText('Preview')).toBeInTheDocument();
   });
+
+  it('HTML preview renders more than 1 child', () => {
+    const { getByText, getByTestId } = render(
+      <Preview>
+        <p>Paragraph 1</p>
+        <p>Paragraph 2</p>
+      </Preview>
+    );
+
+    fireEvent.click(getByText('SHOW CODE'));
+
+    fireEvent.click(getByText('HTML'));
+
+    expect(getByTestId('html')).toBeInTheDocument();
+  });
 });