139 lines
3.5 KiB
JavaScript
139 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import renderer from 'react-test-renderer';
|
|
import { padStart } from 'lodash';
|
|
import MarkdownPreview from '../MarkdownPreview';
|
|
import { markdownToHtml } from '../serializers';
|
|
|
|
describe('Markdown Preview renderer', () => {
|
|
describe('Markdown rendering', () => {
|
|
describe('General', () => {
|
|
it('should render markdown', () => {
|
|
const value = `
|
|
# H1
|
|
|
|
Text with **bold** & _em_ elements
|
|
|
|
## H2
|
|
|
|
* ul item 1
|
|
* ul item 2
|
|
|
|
### H3
|
|
|
|
1. ol item 1
|
|
1. ol item 2
|
|
1. ol item 3
|
|
|
|
#### H4
|
|
|
|
[link title](http://google.com)
|
|
|
|
##### H5
|
|
|
|
|
|
|
|
###### H6
|
|
|
|
|
|
`;
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('Headings', () => {
|
|
for (const heading of [...Array(6).keys()]) {
|
|
it(`should render Heading ${heading + 1}`, () => {
|
|
const value = padStart(' Title', heading + 7, '#');
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
}
|
|
});
|
|
|
|
describe('Lists', () => {
|
|
it('should render lists', () => {
|
|
const value = `
|
|
1. ol item 1
|
|
1. ol item 2
|
|
* Sublist 1
|
|
* Sublist 2
|
|
* Sublist 3
|
|
1. Sub-Sublist 1
|
|
1. Sub-Sublist 2
|
|
1. Sub-Sublist 3
|
|
1. ol item 3
|
|
`;
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('Links', () => {
|
|
it('should render links', () => {
|
|
const value = `
|
|
I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3].
|
|
|
|
[1]: http://google.com/ "Google"
|
|
[2]: http://search.yahoo.com/ "Yahoo Search"
|
|
[3]: http://search.msn.com/ "MSN Search"
|
|
`;
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('Code', () => {
|
|
it('should render code', () => {
|
|
const value = 'Use the `printf()` function.';
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should render code 2', () => {
|
|
const value = '``There is a literal backtick (`) here.``';
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('HTML', () => {
|
|
it('should render HTML as is when using Markdown', () => {
|
|
const value = `
|
|
# Title
|
|
|
|
<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>
|
|
`;
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('HTML rendering', () => {
|
|
it('should render HTML', () => {
|
|
const value = '<p>Paragraph with <em>inline</em> element</p>';
|
|
expect(
|
|
renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON(),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
});
|