Updated MarkitupReactRenderer test

src/components/MarkupItReactRenderer/__tests__/MarkupItReactRenderer.spec.js

@@ -8,10 +8,9 @@ import MarkupIt from 'markup-it';
 import markdownSyntax from 'markup-it/syntaxes/markdown';
 import htmlSyntax from 'markup-it/syntaxes/html';
 import reInline from 'markup-it/syntaxes/markdown/re/inline';
-import MarkupItReactRenderer from '../../UI/MarkupItReactRenderer/MarkupItReactRenderer';
+import MarkupItReactRenderer from '../';
 
 describe('MarkitupReactRenderer', () => {
-
   describe('basics', () => {
     it('should re-render properly after a value and syntax update', () => {
       const component = shallow(
@@ -23,7 +22,7 @@ describe('MarkitupReactRenderer', () => {
       const tree1 = component.html();
       component.setProps({
         value: '<h1>Title</h1>',
-        syntax: htmlSyntax
+        syntax: htmlSyntax,
       });
       const tree2 = component.html();
       expect(tree1).toEqual(tree2);
@@ -86,7 +85,7 @@ Text with **bold** & _em_ elements
 
     describe('Headings', () => {
       for (const heading of [...Array(6).keys()]) {
-        it(`should render Heading ${heading + 1}`, () => {
+        it(`should render Heading ${ heading + 1 }`, () => {
           const value = padStart(' Title', heading + 7, '#');
           const component = shallow(
             <MarkupItReactRenderer
@@ -195,27 +194,27 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
 
   describe('custom elements', () => {
     it('should extend default renderers with custom ones', () => {
-      const myRule = MarkupIt.Rule('mediaproxy')
+      const myRule = MarkupIt.Rule('mediaproxy') // eslint-disable-line
         .regExp(reInline.link, (state, match) => {
           if (match[0].charAt(0) !== '!') {
-            return;
+            return null;
           }
 
           return {
             data: Map({
               alt: match[1],
               src: match[2],
-              title: match[3]
+              title: match[3],
-            }).filter(Boolean)
+            }).filter(Boolean),
           };
         });
 
       const myCustomSchema = {
-        'mediaproxy': ({ token }) => {
+        mediaproxy: ({ token }) => { //eslint-disable-line
           const src = token.getIn(['data', 'src']);
           const alt = token.getIn(['data', 'alt']);
-          return <img src={src} alt={alt}/>;
+          return <img src={src} alt={alt} />;
-        }
+        },
       };
 
       const myMarkdownSyntax = markdownSyntax.addInlineRules(myRule);

src/components/MarkupItReactRenderer/__tests__/__snapshots__/MarkupItReactRenderer.spec.js.snap

@@ -0,0 +1,40 @@
+exports[`MarkitupReactRenderer HTML rendering should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Code should render code 1`] = `"<article><p>Use the <code>printf()</code> function.</p></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Code should render code 2 1`] = `"<article><p><code>There is a literal backtick (\`) here.</code></p></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering General should render markdown 1`] = `"<article><h1>H1</h1><p>Text with <strong>bold</strong> &amp; <em>em</em> elements</p><h2>H2</h2><ul><li>ul item 1</li><li>ul item 2</li></ul><h3>H3</h3><ol><li>ol item 1</li><li>ol item 2</li><li>ol item 3</li></ol><h4>H4</h4><p><a href=\"http://google.com\">link title</a></p><h5>H5</h5><p><img alt=\"alt text\" src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\"/></p><h6>H6</h6></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
+"<article><h1>Title</h1><div><form action=\"test\">
+  <label for=\"input\">
+    <input type=\"checkbox\" checked=\"checked\" id=\"input\"/> My label
+  </label> 
+  <dl class=\"test-class another-class\" style=\"width: 100%\">
+      <dt data-attr=\"test\">Test HTML content</dt>
+      <dt>Testing HTML in Markdown</dt>
+  </dl>
+</form>
+
+</div><div><h1 style=\"display: block; border: 10px solid #f00; width: 100%\">Test</h1>
+</div></article>"
+`;
+
+exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 1 1`] = `"<article><h1>Title</h1></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 2 1`] = `"<article><h2>Title</h2></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 3 1`] = `"<article><h3>Title</h3></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 4 1`] = `"<article><h4>Title</h4></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 5 1`] = `"<article><h5>Title</h5></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 6 1`] = `"<article><h6>Title</h6></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Links should render links 1`] = `"<article><p>I get 10 times more traffic from <a href=\"http://google.com/\" title=\"Google\">Google</a> than from <a href=\"http://search.yahoo.com/\" title=\"Yahoo Search\">Yahoo</a> or <a href=\"http://search.msn.com/\" title=\"MSN Search\">MSN</a>.</p></article>"`;
+
+exports[`MarkitupReactRenderer Markdown rendering Lists should render lists 1`] = `"<article><ol><li>ol item 1</li><li>ol item 2<ul><li>Sublist 1</li><li>Sublist 2</li><li>Sublist 3<ol><li>Sub-Sublist 1</li><li>Sub-Sublist 2</li><li>Sub-Sublist 3</li></ol></li></ul></li><li>ol item 3</li></ol></article>"`;
+
+exports[`MarkitupReactRenderer custom elements should extend default renderers with custom ones 1`] = `"<article><h2>Title</h2><p><img src=\"http://url.to.image\" alt=\"mediaproxy test\"/></p></article>"`;