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

Updated MarkitupReactRenderer test

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-10-12 15:52:41 +02:00
parent fee2d8e731
commit 4c5e72a2eb
2 changed files with 73 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/MarkupItReactRenderer/__tests__/MarkupItReactRenderer.spec.js
View File

@ -8,22 +8,21 @@ import MarkupIt from 'markup-it';
import markdownSyntax from 'markup-it/syntaxes/markdown'; import markdownSyntax from 'markup-it/syntaxes/markdown';
import htmlSyntax from 'markup-it/syntaxes/html'; import htmlSyntax from 'markup-it/syntaxes/html';
import reInline from 'markup-it/syntaxes/markdown/re/inline'; import reInline from 'markup-it/syntaxes/markdown/re/inline';
import MarkupItReactRenderer from '../../UI/MarkupItReactRenderer/MarkupItReactRenderer'; import MarkupItReactRenderer from '../';
describe('MarkitupReactRenderer', () => { describe('MarkitupReactRenderer', () => {
describe('basics', () => { describe('basics', () => {
it('should re-render properly after a value and syntax update', () => { it('should re-render properly after a value and syntax update', () => {
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value="# Title" value="# Title"
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
const tree1 = component.html(); const tree1 = component.html();
component.setProps({ component.setProps({
value: '<h1>Title</h1>', value: '<h1>Title</h1>',
syntax: htmlSyntax syntax: htmlSyntax,
}); });
const tree2 = component.html(); const tree2 = component.html();
expect(tree1).toEqual(tree2); expect(tree1).toEqual(tree2);
@ -32,8 +31,8 @@ describe('MarkitupReactRenderer', () => {
it('should not update the parser if syntax didn\'t change', () => { it('should not update the parser if syntax didn\'t change', () => {
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value="# Title" value="# Title"
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
const syntax1 = component.instance().props.syntax; const syntax1 = component.instance().props.syntax;
@ -76,8 +75,8 @@ Text with **bold** & _em_ elements
`; `;
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -86,12 +85,12 @@ Text with **bold** & _em_ elements
describe('Headings', () => { describe('Headings', () => {
for (const heading of [...Array(6).keys()]) { 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 value = padStart(' Title', heading + 7, '#');
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -114,8 +113,8 @@ Text with **bold** & _em_ elements
`; `;
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -133,8 +132,8 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
`; `;
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -146,8 +145,8 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
const value = 'Use the `printf()` function.'; const value = 'Use the `printf()` function.';
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -157,8 +156,8 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
const value = '``There is a literal backtick (`) here.``'; const value = '``There is a literal backtick (`) here.``';
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -184,8 +183,8 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
`; `;
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={markdownSyntax} syntax={markdownSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -195,27 +194,27 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
describe('custom elements', () => { describe('custom elements', () => {
it('should extend default renderers with custom ones', () => { 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) => { .regExp(reInline.link, (state, match) => {
if (match[0].charAt(0) !== '!') { if (match[0].charAt(0) !== '!') {
return; return null;
} }
return { return {
data: Map({ data: Map({
alt: match[1], alt: match[1],
src: match[2], src: match[2],
title: match[3] title: match[3],
}).filter(Boolean) }).filter(Boolean),
}; };
}); });
const myCustomSchema = { const myCustomSchema = {
'mediaproxy': ({ token }) => { mediaproxy: ({ token }) => { //eslint-disable-line
const src = token.getIn(['data', 'src']); const src = token.getIn(['data', 'src']);
const alt = token.getIn(['data', 'alt']); const alt = token.getIn(['data', 'alt']);
return <img src={src} alt={alt}/>; return <img src={src} alt={alt} />;
} },
}; };
const myMarkdownSyntax = markdownSyntax.addInlineRules(myRule); const myMarkdownSyntax = markdownSyntax.addInlineRules(myRule);
@ -226,9 +225,9 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
`; `;
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={myMarkdownSyntax} syntax={myMarkdownSyntax}
schema={myCustomSchema} schema={myCustomSchema}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
@ -240,8 +239,8 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
const value = '<p>Paragraph with <em>inline</em> element</p>'; const value = '<p>Paragraph with <em>inline</em> element</p>';
const component = shallow( const component = shallow(
<MarkupItReactRenderer <MarkupItReactRenderer
value={value} value={value}
syntax={htmlSyntax} syntax={htmlSyntax}
/> />
); );
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();

40
src/components/MarkupItReactRenderer/__tests__/__snapshots__/MarkupItReactRenderer.spec.js.snap Normal file
View File

@ -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>"`;