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

update existing serialization tests

Browse Source
This commit is contained in:
Shawn Erquhart 2017-08-01 18:51:30 -04:00
parent cf2b7be25f
commit d84b156b0a
6 changed files with 706 additions and 539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

947
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/__snapshots__/parser.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

11
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/parser.spec.js
View File

@ -1,12 +1,5 @@
import { fromJS } from 'immutable'; import { fromJS } from 'immutable';
import { Schema } from "prosemirror-model"; import { markdownToRemark, remarkToSlate } from '../../../serializers';
import { schema } from "prosemirror-markdown";
import makeParser from '../parser';
const testSchema = new Schema({
nodes: schema.spec.nodes,
marks: schema.spec.marks,
});
// Temporary plugins test, uses preloaded plugins from ../parser // Temporary plugins test, uses preloaded plugins from ../parser
// TODO: make the parser more testable // TODO: make the parser more testable
@ -51,7 +44,7 @@ const testPlugins = fromJS([
}, },
]); ]);
const parser = makeParser(testSchema, testPlugins); const parser = markdown => remarkToSlate(markdownToRemark(markdown));
describe("Compile markdown to Prosemirror document structure", () => { describe("Compile markdown to Prosemirror document structure", () => {
it("should compile simple markdown", () => { it("should compile simple markdown", () => {

18
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js
View File

@ -16,30 +16,30 @@ export const MARK_COMPONENTS = {
}; };
export const NODE_COMPONENTS = { export const NODE_COMPONENTS = {
paragraph: props => <p {...props.attributes}>{props.children}</p>, 'paragraph': props => <p {...props.attributes}>{props.children}</p>,
'list-item': props => <li {...props.attributes}>{props.children}</li>, 'list-item': props => <li {...props.attributes}>{props.children}</li>,
'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>, 'quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
'numbered-list': props => 'code': props => <pre><code {...props.attributes}>{props.children}</code></pre>,
<ol {...props.attributes} start={props.node.data.get('start') || 1}>{props.children}</ol>,
quote: props => <blockquote {...props.attributes}>{props.children}</blockquote>,
code: props => <pre><code {...props.attributes}>{props.children}</code></pre>,
'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>, 'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>,
'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>, 'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,
'heading-three': props => <h3 {...props.attributes}>{props.children}</h3>, 'heading-three': props => <h3 {...props.attributes}>{props.children}</h3>,
'heading-four': props => <h4 {...props.attributes}>{props.children}</h4>, 'heading-four': props => <h4 {...props.attributes}>{props.children}</h4>,
'heading-five': props => <h5 {...props.attributes}>{props.children}</h5>, 'heading-five': props => <h5 {...props.attributes}>{props.children}</h5>,
'heading-six': props => <h6 {...props.attributes}>{props.children}</h6>, 'heading-six': props => <h6 {...props.attributes}>{props.children}</h6>,
table: props => <table><tbody {...props.attributes}>{props.children}</tbody></table>, 'table': props => <table><tbody {...props.attributes}>{props.children}</tbody></table>,
'table-row': props => <tr {...props.attributes}>{props.children}</tr>, 'table-row': props => <tr {...props.attributes}>{props.children}</tr>,
'table-cell': props => <td {...props.attributes}>{props.children}</td>, 'table-cell': props => <td {...props.attributes}>{props.children}</td>,
'thematic-break': props => <hr {...props.attributes}/>, 'thematic-break': props => <hr {...props.attributes}/>,
link: props => { 'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
'numbered-list': props =>
<ol {...props.attributes} start={props.node.data.get('start') || 1}>{props.children}</ol>,
'link': props => {
const data = props.node.get('data'); const data = props.node.get('data');
const url = data.get('url'); const url = data.get('url');
const title = data.get('title'); const title = data.get('title');
return <a href={url} title={title} {...props.attributes}>{props.children}</a>; return <a href={url} title={title} {...props.attributes}>{props.children}</a>;
}, },
shortcode: props => { 'shortcode': props => {
const { attributes, node, state: editorState } = props; const { attributes, node, state: editorState } = props;
const isSelected = editorState.selection.hasFocusIn(node); const isSelected = editorState.selection.hasFocusIn(node);
const className = cn(styles.shortcode, { [styles.shortcodeSelected]: isSelected }); const className = cn(styles.shortcode, { [styles.shortcodeSelected]: isSelected });

78
src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/MarkupItReactRenderer.spec.js.snap
View File

@ -1,78 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MarkitupReactRenderer HTML rendering should render HTML 1`] = `"<div><p>Paragraph with <em>inline</em> element</p></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Code should render code 1`] = `"<div><p>Use the <code>printf()</code> function.</p></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Code should render code 2 1`] = `"<div><p><code>There is a literal backtick (\`) here.</code></p></div>"`;
exports[`MarkitupReactRenderer Markdown rendering General should render markdown 1`] = `
"<div><h1>H1</h1>
<p>Text with <strong>bold</strong> &#x26; <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></div>"
`;
exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
"<div><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></div>"
`;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 1 1`] = `"<div><h1>Title</h1></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 2 1`] = `"<div><h2>Title</h2></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 3 1`] = `"<div><h3>Title</h3></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 4 1`] = `"<div><h4>Title</h4></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 5 1`] = `"<div><h5>Title</h5></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 6 1`] = `"<div><h6>Title</h6></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Links should render links 1`] = `"<div><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></div>"`;
exports[`MarkitupReactRenderer Markdown rendering Lists should render lists 1`] = `
"<div><ol>
<li>ol item 1</li>
<li>ol item 2</li>
</ol>
<ul>
<li>Sublist 1</li>
<li>Sublist 2</li>
<li>
<p>Sublist 3</p>
<ol>
<li>Sub-Sublist 1</li>
<li>Sub-Sublist 2</li>
<li>Sub-Sublist 3</li>
</ol>
</li>
</ul>
<ol>
<li>ol item 3</li>
</ol></div>"
`;

78
src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/renderer.spec.js.snap Normal file
View File

@ -0,0 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Markdown Preview renderer HTML rendering should render HTML 1`] = `"<div style=\\"margin:15px 2px;\\"><p>Paragraph with <em>inline</em> element</p></div>"`;
exports[`Markdown Preview renderer Markdown rendering Code should render code 1`] = `"<div style=\\"margin:15px 2px;\\"><p>Use the <code>printf()</code> function.</p></div>"`;
exports[`Markdown Preview renderer Markdown rendering Code should render code 2 1`] = `"<div style=\\"margin:15px 2px;\\"><p><code>There is a literal backtick (\`) here.</code></p></div>"`;
exports[`Markdown Preview renderer Markdown rendering General should render markdown 1`] = `
"<div style=\\"margin:15px 2px;\\"><h1>H1</h1>
<p>Text with <strong>bold</strong> &#x26; <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>![alt text](https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg)</p>
<h6>H6</h6></div>"
`;
exports[`Markdown Preview renderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
"<div style=\\"margin:15px 2px;\\"><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></div>"
`;
exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 1 1`] = `"<div style=\\"margin:15px 2px;\\"><h1>Title</h1></div>"`;
exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 2 1`] = `"<div style=\\"margin:15px 2px;\\"><h2>Title</h2></div>"`;
exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 3 1`] = `"<div style=\\"margin:15px 2px;\\"><h3>Title</h3></div>"`;
exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 4 1`] = `"<div style=\\"margin:15px 2px;\\"><h4>Title</h4></div>"`;
exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 5 1`] = `"<div style=\\"margin:15px 2px;\\"><h5>Title</h5></div>"`;
exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 6 1`] = `"<div style=\\"margin:15px 2px;\\"><h6>Title</h6></div>"`;
exports[`Markdown Preview renderer Markdown rendering Links should render links 1`] = `"<div style=\\"margin:15px 2px;\\"><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></div>"`;
exports[`Markdown Preview renderer Markdown rendering Lists should render lists 1`] = `
"<div style=\\"margin:15px 2px;\\"><ol>
<li>ol item 1</li>
<li>
<p>ol item 2</p>
<ul>
<li>Sublist 1</li>
<li>Sublist 2</li>
<li>
<p>Sublist 3</p>
<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></div>"
`;

19
src/components/Widgets/Markdown/MarkdownPreview/__tests__/MarkupItReactRenderer.spec.js → src/components/Widgets/Markdown/MarkdownPreview/__tests__/renderer.spec.js
View File

@ -4,8 +4,9 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { padStart } from 'lodash'; import { padStart } from 'lodash';
import MarkdownPreview from '../index'; import MarkdownPreview from '../index';
import { markdownToRemark } from '../../serializers';
describe('MarkitupReactRenderer', () => { describe('Markdown Preview renderer', () => {
describe('Markdown rendering', () => { describe('Markdown rendering', () => {
describe('General', () => { describe('General', () => {
it('should render markdown', () => { it('should render markdown', () => {
@ -35,7 +36,7 @@ Text with **bold** & _em_ elements
###### H6 ###### H6
`; `;
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
}); });
@ -44,7 +45,7 @@ Text with **bold** & _em_ elements
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(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
} }
@ -63,7 +64,7 @@ Text with **bold** & _em_ elements
1. Sub-Sublist 3 1. Sub-Sublist 3
1. ol item 3 1. ol item 3
`; `;
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
}); });
@ -77,7 +78,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
[2]: http://search.yahoo.com/ "Yahoo Search" [2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search" [3]: http://search.msn.com/ "MSN Search"
`; `;
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
}); });
@ -85,13 +86,13 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
describe('Code', () => { describe('Code', () => {
it('should render code', () => { it('should render code', () => {
const value = 'Use the `printf()` function.'; const value = 'Use the `printf()` function.';
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
it('should render code 2', () => { it('should render code 2', () => {
const value = '``There is a literal backtick (`) here.``'; const value = '``There is a literal backtick (`) here.``';
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
}); });
@ -113,7 +114,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
<h1 style="display: block; border: 10px solid #f00; width: 100%">Test</h1> <h1 style="display: block; border: 10px solid #f00; width: 100%">Test</h1>
`; `;
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
}); });
@ -122,7 +123,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
describe('HTML rendering', () => { describe('HTML rendering', () => {
it('should render HTML', () => { it('should render HTML', () => {
const value = '<p>Paragraph with <em>inline</em> element</p>'; const value = '<p>Paragraph with <em>inline</em> element</p>';
const component = shallow(<MarkdownPreview value={value} />); const component = shallow(<MarkdownPreview value={markdownToRemark(value)} />);
expect(component.html()).toMatchSnapshot(); expect(component.html()).toMatchSnapshot();
}); });
}); });