decap-cms-widget-markdown 3.2.0 → 3.4.0

package/src/__tests__/renderer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { create, act } from 'react-test-renderer';
-import { padStart } from 'lodash';
+import { render, screen } from '@testing-library/react';
+import padStart from 'lodash/padStart';
 import { Map } from 'immutable';
 
 import MarkdownPreview from '../MarkdownPreview';
@@ -40,14 +40,21 @@ Text with **bold** & _em_ elements
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('H1');
+        expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('H2');
+        expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('H3');
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('H4');
+        expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('H5');
+        expect(screen.getByRole('heading', { level: 6 })).toHaveTextContent('H6');
+        expect(container).toHaveTextContent('Text with bold & em elements');
+        expect(screen.getByRole('link', { name: 'link title' })).toHaveAttribute(
+          'href',
+          'http://google.com',
+        );
+        expect(screen.getAllByRole('img').length).toBe(2);
       });
     });
 
@@ -57,14 +64,8 @@ Text with **bold** & _em_ elements
           const value = padStart(' Title', heading + 7, '#');
           const html = await markdownToHtml(value);
 
-          let root;
-          await act(async () => {
-            root = create(
-              <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-            );
-          });
-
-          expect(root.toJSON()).toMatchSnapshot();
+          render(<MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />);
+          expect(screen.getByRole('heading', { level: heading + 1 })).toHaveTextContent('Title');
         });
       }
     });
@@ -84,39 +85,15 @@ Text with **bold** & _em_ elements
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchInlineSnapshot(`
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<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>",
-    }
-  }
-/>
-`);
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        // Check for ordered and unordered lists
+        expect(container.querySelectorAll('ol').length).toBeGreaterThan(0);
+        expect(container.querySelectorAll('ul').length).toBeGreaterThan(0);
+        expect(screen.getByText('ol item 1')).toBeInTheDocument();
+        expect(screen.getByText('Sublist 1')).toBeInTheDocument();
+        expect(screen.getByText('Sub-Sublist 1')).toBeInTheDocument();
       });
     });
 
@@ -131,14 +108,19 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        render(<MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />);
+        expect(screen.getByRole('link', { name: 'Google' })).toHaveAttribute(
+          'href',
+          'http://google.com/',
+        );
+        expect(screen.getByRole('link', { name: 'Yahoo' })).toHaveAttribute(
+          'href',
+          'http://search.yahoo.com/',
+        );
+        expect(screen.getByRole('link', { name: 'MSN' })).toHaveAttribute(
+          'href',
+          'http://search.msn.com/',
+        );
       });
     });
 
@@ -147,28 +129,22 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
         const value = 'Use the `printf()` function.';
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(container.querySelector('code')).toHaveTextContent('printf()');
       });
 
       it('should render code 2', async () => {
         const value = '``There is a literal backtick (`) here.``';
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(container.querySelector('code')).toHaveTextContent(
+          'There is a literal backtick (`) here.',
+        );
       });
     });
 
@@ -191,14 +167,12 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(container.querySelector('form')).toBeInTheDocument();
+        expect(container.querySelector('dl')).toBeInTheDocument();
+        expect(container.querySelector('h1[style]')).toHaveTextContent('Test');
       });
     });
   });
@@ -208,14 +182,11 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
       const value = '<p>Paragraph with <em>inline</em> element</p>';
       const html = await markdownToHtml(value);
 
-      let root;
-      await act(async () => {
-        root = create(
-          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-        );
-      });
-
-      expect(root.toJSON()).toMatchSnapshot();
+      const { container } = render(
+        <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+      );
+      expect(container.querySelector('p')).toHaveTextContent('Paragraph with inline element');
+      expect(container.querySelector('em')).toHaveTextContent('inline');
     });
   });
 
@@ -224,38 +195,34 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
       const value = `<img src="foobar.png" onerror="alert('hello')">`;
       const field = Map({ sanitize_preview: true });
 
-      let root;
-      await act(async () => {
-        root = create(
-          <MarkdownPreview
-            value={value}
-            getAsset={jest.fn()}
-            resolveWidget={jest.fn()}
-            field={field}
-          />,
-        );
-      });
-
-      expect(root.toJSON()).toMatchSnapshot();
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', 'foobar.png');
+      expect(img).not.toHaveAttribute('onerror');
     });
 
     it('should not sanitize HTML', async () => {
       const value = `<img src="foobar.png" onerror="alert('hello')">`;
       const field = Map({ sanitize_preview: false });
 
-      let root;
-      await act(async () => {
-        root = create(
-          <MarkdownPreview
-            value={value}
-            getAsset={jest.fn()}
-            resolveWidget={jest.fn()}
-            field={field}
-          />,
-        );
-      });
-
-      expect(root.toJSON()).toMatchSnapshot();
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', 'foobar.png');
+      expect(img).toHaveAttribute('onerror', "alert('hello')");
     });
   });
 });

package/src/regexHelper.js

@@ -1,4 +1,4 @@
-import { last } from 'lodash';
+import last from 'lodash/last';
 
 /**
  * Joins an array of regular expressions into a single expression, without

package/src/serializers/__tests__/commonmark.spec.js

@@ -1,4 +1,4 @@
-import { flow } from 'lodash';
+import flow from 'lodash/flow';
 import { tests as commonmarkSpec } from 'commonmark-spec';
 import * as commonmark from 'commonmark';
 

package/src/serializers/__tests__/slate.spec.js

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { flow } from 'lodash';
+import flow from 'lodash/flow';
 
 import h from '../../../test-helpers/h';
 import { markdownToSlate, slateToMarkdown } from '../index';

package/src/serializers/index.js

@@ -1,4 +1,4 @@
-import { trimEnd } from 'lodash';
+import trimEnd from 'lodash/trimEnd';
 import unified from 'unified';
 import u from 'unist-builder';
 import markdownToRemarkPlugin from 'remark-parse';

package/src/serializers/remarkAssertParents.js

@@ -1,4 +1,7 @@
-import { concat, last, nth, isEmpty } from 'lodash';
+import concat from 'lodash/concat';
+import last from 'lodash/last';
+import nth from 'lodash/nth';
+import isEmpty from 'lodash/isEmpty';
 import visitParents from 'unist-util-visit-parents';
 
 /**

package/src/serializers/remarkEscapeMarkdownEntities.js

@@ -1,4 +1,7 @@
-import { has, flow, partial, map } from 'lodash';
+import has from 'lodash/has';
+import flow from 'lodash/flow';
+import partial from 'lodash/partial';
+import map from 'lodash/map';
 
 import { joinPatternSegments, combinePatterns, replaceWhen } from '../regexHelper';
 

package/src/serializers/remarkPaddedLinks.js

@@ -1,4 +1,10 @@
-import { find, findLast, startsWith, endsWith, trimStart, trimEnd, flatMap } from 'lodash';
+import find from 'lodash/find';
+import findLast from 'lodash/findLast';
+import startsWith from 'lodash/startsWith';
+import endsWith from 'lodash/endsWith';
+import trimStart from 'lodash/trimStart';
+import trimEnd from 'lodash/trimEnd';
+import flatMap from 'lodash/flatMap';
 import u from 'unist-builder';
 import toString from 'mdast-util-to-string';
 

package/src/serializers/remarkRehypeShortcodes.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { map, has } from 'lodash';
+import map from 'lodash/map';
+import has from 'lodash/has';
 import { renderToString } from 'react-dom/server';
 import u from 'unist-builder';
 

package/src/serializers/remarkSlate.js

@@ -1,4 +1,9 @@
-import { isEmpty, isArray, flatMap, map, flatten, isEqual } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import isArray from 'lodash/isArray';
+import flatMap from 'lodash/flatMap';
+import map from 'lodash/map';
+import flatten from 'lodash/flatten';
+import isEqual from 'lodash/isEqual';
 
 /**
  * Map of MDAST node types to Slate node types.

package/src/serializers/remarkSquashReferences.js

@@ -1,4 +1,5 @@
-import { without, flatten } from 'lodash';
+import without from 'lodash/without';
+import flatten from 'lodash/flatten';
 import u from 'unist-builder';
 import mdastDefinitions from 'mdast-util-definitions';
 

package/src/serializers/slateRemark.js

@@ -1,4 +1,9 @@
-import { get, without, last, map, intersection, omit } from 'lodash';
+import get from 'lodash/get';
+import without from 'lodash/without';
+import last from 'lodash/last';
+import map from 'lodash/map';
+import intersection from 'lodash/intersection';
+import omit from 'lodash/omit';
 import u from 'unist-builder';
 import mdastToString from 'mdast-util-to-string';
 

package/src/__tests__/__snapshots__/renderer.spec.js.snap

@@ -1,239 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Markdown Preview renderer HTML rendering should render HTML 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<p>Paragraph with <em>inline</em> element</p>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer HTML sanitization should not sanitize HTML 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<img src=\\"foobar.png\\" onerror=\\"alert('hello')\\">",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer HTML sanitization should sanitize HTML 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<img src=\\"foobar.png\\">",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Code should render code 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<p>Use the <code>printf()</code> function.</p>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Code should render code 2 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<p><code>There is a literal backtick (\`) here.</code></p>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering General should render markdown 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<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 src=\\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\\" alt=\\"alt text\\" /></p>
-<h6>H6</h6>
-<p><img src=\\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\\" /></p>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h1>Title</h1>
-<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>
-<h1 style=\\"display: block; border: 10px solid #f00; width: 100%\\">Test</h1>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 1 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h1>Title</h1>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 2 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h2>Title</h2>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 3 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h3>Title</h3>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 4 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h4>Title</h4>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 5 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h5>Title</h5>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 6 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<h6>Title</h6>",
-    }
-  }
-/>
-`;
-
-exports[`Markdown Preview renderer Markdown rendering Links should render links 1`] = `
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<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>",
-    }
-  }
-/>
-`;