2022-04-26 06:09:56 +00:00
|
|
|
import $ from 'jquery';
|
2022-05-13 12:08:49 +00:00
|
|
|
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
|
2022-04-26 06:09:56 +00:00
|
|
|
import renderMermaid from '~/behaviors/markdown/render_sandboxed_mermaid';
|
|
|
|
|
|
|
|
describe('Render mermaid diagrams for Gitlab Flavoured Markdown', () => {
|
|
|
|
it('Does something', () => {
|
|
|
|
document.body.dataset.page = '';
|
2022-05-13 12:08:49 +00:00
|
|
|
setHTMLFixture(`
|
2022-04-26 06:09:56 +00:00
|
|
|
<div class="gl-relative markdown-code-block js-markdown-code">
|
|
|
|
<pre data-sourcepos="1:1-7:3" class="code highlight js-syntax-highlight language-mermaid white" lang="mermaid" id="code-4">
|
|
|
|
<code class="js-render-mermaid">
|
|
|
|
<span id="LC1" class="line" lang="mermaid">graph TD;</span>
|
|
|
|
<span id="LC2" class="line" lang="mermaid">A-->B</span>
|
|
|
|
<span id="LC3" class="line" lang="mermaid">A-->C</span>
|
|
|
|
<span id="LC4" class="line" lang="mermaid">B-->D</span>
|
|
|
|
<span id="LC5" class="line" lang="mermaid">C-->D</span>
|
|
|
|
</code>
|
|
|
|
</pre>
|
|
|
|
<copy-code>
|
|
|
|
<button type="button" class="btn btn-default btn-md gl-button btn-icon has-tooltip" data-title="Copy to clipboard" data-clipboard-target="pre#code-4">
|
|
|
|
<svg><use xlink:href="/assets/icons-7f1680a3670112fe4c8ef57b9dfb93f0f61b43a2a479d7abd6c83bcb724b9201.svg#copy-to-clipboard"></use></svg>
|
|
|
|
</button>
|
|
|
|
</copy-code>
|
|
|
|
</div>`);
|
|
|
|
const els = $('pre.js-syntax-highlight').find('.js-render-mermaid');
|
|
|
|
|
|
|
|
renderMermaid(els);
|
|
|
|
|
|
|
|
jest.runAllTimers();
|
|
|
|
expect(document.querySelector('pre.js-syntax-highlight').classList).toContain('gl-sr-only');
|
2022-05-13 12:08:49 +00:00
|
|
|
|
|
|
|
resetHTMLFixture();
|
2022-04-26 06:09:56 +00:00
|
|
|
});
|
|
|
|
});
|