blob: 1128b3af3df088baf87cc20b9f733bfb0674a07d [file] [log] [blame]
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../test/common-test-setup';
import {assert, fixture, html} from '@open-wc/testing';
import {changeModelToken} from '../../../models/change/change-model';
import {
ConfigModel,
configModelToken,
} from '../../../models/config/config-model';
import {wrapInProvider} from '../../../models/di-provider-element';
import {getAppContext} from '../../../services/app-context';
import './gr-markdown';
import {GrMarkdown} from './gr-markdown';
import {createConfig} from '../../../test/test-data-generators';
import {waitUntilObserved} from '../../../test/test-utils';
import {CommentLinks} from '../../../api/rest-api';
import {testResolver} from '../../../test/common-test-setup';
suite('gr-markdown tests', () => {
let element: GrMarkdown;
let configModel: ConfigModel;
async function setCommentLinks(commentlinks: CommentLinks) {
configModel.updateRepoConfig({...createConfig(), commentlinks});
await waitUntilObserved(
configModel.repoCommentLinks$,
links => links === commentlinks
);
}
setup(async () => {
configModel = new ConfigModel(
testResolver(changeModelToken),
getAppContext().restApiService
);
await setCommentLinks({
customLinkRewrite: {
match: '(LinkRewriteMe)',
link: 'http://google.com/$1',
},
customHtmlRewrite: {
match: 'HTMLRewriteMe',
html: '<div>HTMLRewritten</div>',
},
});
element = (
await fixture(
wrapInProvider(
html`<gr-markdown></gr-markdown>`,
configModelToken,
configModel
)
)
).querySelector('gr-markdown')!;
});
test('renders plain text with links and rewrites', async () => {
element.markdown = `text
\ntext with plain link: google.com
\ntext with config link: LinkRewriteMe
\ntext with config html: HTMLRewriteMe`;
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<p>text</p>
<p>
text with plain link:
<a href="http://google.com" rel="noopener" target="_blank">
google.com
</a>
</p>
<p>
text with config link:
<a
href="http://google.com/LinkRewriteMe"
rel="noopener"
target="_blank"
>
LinkRewriteMe
</a>
</p>
<p>text with config html:</p>
<div>HTMLRewritten</div>
<p></p>
</div>
</marked-element>
`
);
});
test('renders headings with links and rewrites', async () => {
element.markdown = `# h1-heading
\n## h2-heading
\n### h3-heading
\n#### h4-heading
\n##### h5-heading
\n###### h6-heading
\n# heading with plain link: google.com
\n# heading with config link: LinkRewriteMe
\n# heading with config html: HTMLRewriteMe`;
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<h1 id="h1-heading">h1-heading</h1>
<h2 id="h2-heading">h2-heading</h2>
<h3 id="h3-heading">h3-heading</h3>
<h4 id="h4-heading">h4-heading</h4>
<h5 id="h5-heading">h5-heading</h5>
<h6 id="h6-heading">h6-heading</h6>
<h1 id="heading-with-plain-link-google-com">
heading with plain link:
<a href="http://google.com" rel="noopener" target="_blank">
google.com
</a>
</h1>
<h1 id="heading-with-config-link-linkrewriteme">
heading with config link:
<a
href="http://google.com/LinkRewriteMe"
rel="noopener"
target="_blank"
>
LinkRewriteMe
</a>
</h1>
<h1 id="heading-with-config-html-htmlrewriteme">
heading with config html:
<div>HTMLRewritten</div>
</h1>
</div>
</marked-element>
`
);
});
test('renders inline-code without linking or rewriting', async () => {
element.markdown = `\`inline code\`
\n\`inline code with plain link: google.com\`
\n\`inline code with config link: LinkRewriteMe\`
\n\`inline code with config html: HTMLRewriteMe\``;
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<p>
<code> inline code </code>
</p>
<p>
<code> inline code with plain link: google.com </code>
</p>
<p>
<code> inline code with config link: LinkRewriteMe </code>
</p>
<p>
<code> inline code with config html: HTMLRewriteMe </code>
</p>
</div>
</marked-element>
`
);
});
test('renders multiline-code without linking or rewriting', async () => {
element.markdown = `\`\`\`\nmultiline code\n\`\`\`
\n\`\`\`\nmultiline code with plain link: google.com\n\`\`\`
\n\`\`\`\nmultiline code with config link: LinkRewriteMe\n\`\`\`
\n\`\`\`\nmultiline code with config html: HTMLRewriteMe\n\`\`\``;
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<pre>
<code> multiline code </code>
</pre>
<pre>
<code> multiline code with plain link: google.com </code>
</pre>
<pre>
<code> multiline code with config link: LinkRewriteMe </code>
</pre>
<pre>
<code> multiline code with config html: HTMLRewriteMe </code>
</pre>
</div>
</marked-element>
`
);
});
test('does not render inline images into <img> tags', async () => {
element.markdown = '![img](google.com/img.png)';
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<p>![img](google.com/img.png)</p>
</div>
</marked-element>
`
);
});
test('renders inline links into <a> tags', async () => {
element.markdown = '[myLink](https://www.google.com)';
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<p>
<a href="https://www.google.com">myLink</a>
</p>
</div>
</marked-element>
`
);
});
test('renders block quotes with links and rewrites', async () => {
element.markdown = `> block quote
\n> block quote with plain link: google.com
\n> block quote with config link: LinkRewriteMe
\n> block quote with config html: HTMLRewriteMe`;
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<blockquote>
<p>block quote</p>
</blockquote>
<blockquote>
<p>
block quote with plain link:
<a href="http://google.com" rel="noopener" target="_blank">
google.com
</a>
</p>
</blockquote>
<blockquote>
<p>
block quote with config link:
<a
href="http://google.com/LinkRewriteMe"
rel="noopener"
target="_blank"
>
LinkRewriteMe
</a>
</p>
</blockquote>
<blockquote>
<p>block quote with config html:</p>
<div>HTMLRewritten</div>
<p></p>
</blockquote>
</div>
</marked-element>
`
);
});
test('never renders typed html', async () => {
element.markdown = `plain text <div>foo</div>
\n\`inline code <div>foo</div>\`
\n\`\`\`\nmultiline code <div>foo</div>\`\`\`
\n> block quote <div>foo</div>
\n[inline link <div>foo</div>](http://google.com)`;
await element.updateComplete;
const escapedDiv = '&lt;div&gt;foo&lt;/div&gt;';
assert.shadowDom.equal(
element,
/* HTML */ `
<marked-element>
<div slot="markdown-html">
<p>plain text ${escapedDiv}</p>
<p>
<code> inline code ${escapedDiv} </code>
</p>
<pre>
<code>
multiline code ${escapedDiv}
</code>
</pre>
<blockquote>
<p>block quote ${escapedDiv}</p>
</blockquote>
<p>
<a href="http://google.com"> inline link ${escapedDiv} </a>
</p>
</div>
</marked-element>
`
);
});
});