gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switched to enzyme

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-22 21:52:43 +02:00
parent c243a62a32
commit c928fbccaf
3 changed files with 64 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -42,6 +42,7 @@
"babel-preset-react": "^6.5.0",
"babel-runtime": "^6.5.0",
"css-loader": "^0.23.1",
"enzyme": "^2.4.1",
"eslint": "^3.5.0",
"eslint-plugin-react": "^5.1.1",
"expect": "^1.20.2",
@ -60,6 +61,7 @@
"postcss-loader": "^0.9.1",
"pre-commit": "^1.1.3",
"react": "^15.1.0",
"react-addons-test-utils": "^15.3.2",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.0.0-beta.2",
"react-immutable-proptypes": "^1.6.0",
@ -68,7 +70,6 @@
"react-redux": "^4.4.0",
"react-router": "^2.5.1",
"react-router-redux": "^4.0.5",
"react-test-renderer": "^15.3.2",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3",
"sass-loader": "^4.0.2",

65
src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
View File

@ -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
![alt text](https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg)
###### 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();
});
});

91
src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
View File

@ -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> &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 should support custom syntax 1`] = `"<article></article>"`;