Switched to enzyme
This commit is contained in:
@ -1,10 +1,41 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { shallow } from 'enzyme';
|
||||
import markdownSyntax from 'markup-it/syntaxes/markdown';
|
||||
import htmlSyntax from 'markup-it/syntaxes/html';
|
||||
import MarkitupReactRenderer from '../MarkitupReactRenderer';
|
||||
|
||||
describe('MarkitupReactRenderer', () => {
|
||||
it('should re-render properly after a value and syntax update', () => {
|
||||
const component = shallow(
|
||||
<MarkitupReactRenderer
|
||||
value="# Title"
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const tree1 = component.html();
|
||||
component.setProps({
|
||||
value: '<h1>Title</h1>',
|
||||
syntax: htmlSyntax
|
||||
});
|
||||
const tree2 = component.html();
|
||||
expect(tree1).toEqual(tree2);
|
||||
});
|
||||
|
||||
it('should not update the parser if syntax didn\'t change', () => {
|
||||
const component = shallow(
|
||||
<MarkitupReactRenderer
|
||||
value="# Title"
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const syntax1 = component.instance().props.syntax;
|
||||
component.setProps({
|
||||
value: '## Title',
|
||||
});
|
||||
const syntax2 = component.instance().props.syntax;
|
||||
expect(syntax1).toEqual(syntax2);
|
||||
});
|
||||
|
||||
it('should render markdown', () => {
|
||||
const value = `
|
||||
# H1
|
||||
@ -31,39 +62,57 @@ Text with **bold** & _em_ elements
|
||||

|
||||
|
||||
###### H6
|
||||
|
||||
`;
|
||||
const component = renderer.create(
|
||||
const component = shallow(
|
||||
<MarkitupReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const tree = component.html();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render HTML as is using Markdown', () => {
|
||||
const value = `
|
||||
# Title
|
||||
|
||||
<dl>
|
||||
<dt>Test HTML content</dt>
|
||||
<dd>Testing HTML in Markdown</dd>
|
||||
</dl>
|
||||
`;
|
||||
const component = shallow(
|
||||
<MarkitupReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const tree = component.html();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support custom syntax', () => {
|
||||
const value = '';
|
||||
const component = renderer.create(
|
||||
const component = shallow(
|
||||
<MarkitupReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const tree = component.html();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render HTML', () => {
|
||||
const value = '<p class="test class">Paragraph with <em>inline</em> element</p>';
|
||||
const component = renderer.create(
|
||||
const component = shallow(
|
||||
<MarkitupReactRenderer
|
||||
value={value}
|
||||
syntax={htmlSyntax}
|
||||
/>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const tree = component.html();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
@ -1,88 +1,7 @@
|
||||
exports[`MarkitupReactRenderer should render HTML 1`] = `
|
||||
<article>
|
||||
<p>
|
||||
Paragraph with
|
||||
<em>
|
||||
inline
|
||||
</em>
|
||||
element
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
exports[`MarkitupReactRenderer should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
|
||||
|
||||
exports[`MarkitupReactRenderer should render markdown 1`] = `
|
||||
<article>
|
||||
<h1
|
||||
id={null}>
|
||||
H1
|
||||
</h1>
|
||||
<p>
|
||||
Text with
|
||||
<strong>
|
||||
bold
|
||||
</strong>
|
||||
&
|
||||
<em>
|
||||
em
|
||||
</em>
|
||||
elements
|
||||
</p>
|
||||
<h2
|
||||
id={null}>
|
||||
H2
|
||||
</h2>
|
||||
<ul>
|
||||
<li
|
||||
loose={false}>
|
||||
ul item 1
|
||||
</li>
|
||||
<li
|
||||
loose={false}>
|
||||
ul item 2
|
||||
</li>
|
||||
</ul>
|
||||
<h3
|
||||
id={null}>
|
||||
H3
|
||||
</h3>
|
||||
<ol>
|
||||
<li
|
||||
loose={false}>
|
||||
ol item 1
|
||||
</li>
|
||||
<li
|
||||
loose={false}>
|
||||
ol item 2
|
||||
</li>
|
||||
<li
|
||||
loose={false}>
|
||||
ol item 3
|
||||
</li>
|
||||
</ol>
|
||||
<h4
|
||||
id={null}>
|
||||
H4
|
||||
</h4>
|
||||
<p>
|
||||
<a
|
||||
href="http://google.com">
|
||||
link title
|
||||
</a>
|
||||
</p>
|
||||
<h5
|
||||
id={null}>
|
||||
H5
|
||||
</h5>
|
||||
<p>
|
||||
<img
|
||||
alt="alt text"
|
||||
src="https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg" />
|
||||
</p>
|
||||
<h6
|
||||
id={null}>
|
||||
H6
|
||||
</h6>
|
||||
</article>
|
||||
`;
|
||||
exports[`MarkitupReactRenderer should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1></article>"`;
|
||||
|
||||
exports[`MarkitupReactRenderer should support custom syntax 1`] = `<article />`;
|
||||
exports[`MarkitupReactRenderer should render markdown 1`] = `"<article><h1>H1</h1><p>Text with <strong>bold</strong> & <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 should support custom syntax 1`] = `"<article></article>"`;
|
||||
|
Reference in New Issue
Block a user