Updated MarkitupReactRenderer test
This commit is contained in:
Andrey Okonetchnikov
parent
fee2d8e731
commit
4c5e72a2eb
@ -8,22 +8,21 @@ 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(
|
||||
<MarkupItReactRenderer
|
||||
value="# Title"
|
||||
syntax={markdownSyntax}
|
||||
value="# Title"
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const tree1 = component.html();
|
||||
component.setProps({
|
||||
value: '<h1>Title</h1>',
|
||||
syntax: htmlSyntax
|
||||
syntax: htmlSyntax,
|
||||
});
|
||||
const tree2 = component.html();
|
||||
expect(tree1).toEqual(tree2);
|
||||
@ -32,8 +31,8 @@ describe('MarkitupReactRenderer', () => {
|
||||
it('should not update the parser if syntax didn\'t change', () => {
|
||||
const component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value="# Title"
|
||||
syntax={markdownSyntax}
|
||||
value="# Title"
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
const syntax1 = component.instance().props.syntax;
|
||||
@ -76,8 +75,8 @@ Text with **bold** & _em_ elements
|
||||
`;
|
||||
const component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
expect(component.html()).toMatchSnapshot();
|
||||
@ -86,12 +85,12 @@ 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
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
expect(component.html()).toMatchSnapshot();
|
||||
@ -114,8 +113,8 @@ Text with **bold** & _em_ elements
|
||||
`;
|
||||
const component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
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(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
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 component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
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 component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
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(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
value={value}
|
||||
syntax={markdownSyntax}
|
||||
/>
|
||||
);
|
||||
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', () => {
|
||||
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]
|
||||
}).filter(Boolean)
|
||||
title: match[3],
|
||||
}).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);
|
||||
@ -226,9 +225,9 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
|
||||
`;
|
||||
const component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={myMarkdownSyntax}
|
||||
schema={myCustomSchema}
|
||||
value={value}
|
||||
syntax={myMarkdownSyntax}
|
||||
schema={myCustomSchema}
|
||||
/>
|
||||
);
|
||||
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 component = shallow(
|
||||
<MarkupItReactRenderer
|
||||
value={value}
|
||||
syntax={htmlSyntax}
|
||||
value={value}
|
||||
syntax={htmlSyntax}
|
||||
/>
|
||||
);
|
||||
expect(component.html()).toMatchSnapshot();
|
||||
|
||||
@ -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> & <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>"`;
|
||||
Loading…
x
Reference in New Issue
Block a user