94 lines
3.1 KiB
JavaScript
94 lines
3.1 KiB
JavaScript
import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
|
|
import languageLoader from '~/content_editor/services/code_block_language_loader';
|
|
import { createTestEditor, createDocBuilder, triggerNodeInputRule } from '../test_utils';
|
|
|
|
const CODE_BLOCK_HTML = `<pre class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true">
|
|
<code>
|
|
<span id="LC1" class="line" lang="javascript">
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello world</span><span class="dl">'</span><span class="p">)</span>
|
|
</span>
|
|
</code>
|
|
</pre>`;
|
|
|
|
jest.mock('~/content_editor/services/code_block_language_loader');
|
|
|
|
describe('content_editor/extensions/code_block_highlight', () => {
|
|
let parsedCodeBlockHtmlFixture;
|
|
let tiptapEditor;
|
|
let doc;
|
|
let codeBlock;
|
|
|
|
const parseHTML = (html) => new DOMParser().parseFromString(html, 'text/html');
|
|
const preElement = () => parsedCodeBlockHtmlFixture.querySelector('pre');
|
|
|
|
beforeEach(() => {
|
|
tiptapEditor = createTestEditor({
|
|
extensions: [CodeBlockHighlight],
|
|
});
|
|
|
|
({
|
|
builders: { doc, codeBlock },
|
|
} = createDocBuilder({
|
|
tiptapEditor,
|
|
names: {
|
|
codeBlock: { nodeType: CodeBlockHighlight.name },
|
|
},
|
|
}));
|
|
});
|
|
|
|
describe('when parsing HTML', () => {
|
|
beforeEach(() => {
|
|
parsedCodeBlockHtmlFixture = parseHTML(CODE_BLOCK_HTML);
|
|
|
|
tiptapEditor.commands.setContent(CODE_BLOCK_HTML);
|
|
});
|
|
it('extracts language and params attributes from Markdown API output', () => {
|
|
const language = preElement().getAttribute('lang');
|
|
|
|
expect(tiptapEditor.getJSON().content[0].attrs).toMatchObject({
|
|
language,
|
|
});
|
|
});
|
|
|
|
it('adds code, highlight, and js-syntax-highlight to code block element', () => {
|
|
const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
|
|
|
|
expect(editorHtmlOutput.classList.toString()).toContain('code highlight js-syntax-highlight');
|
|
});
|
|
|
|
it('adds content-editor-code-block class to the pre element', () => {
|
|
const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
|
|
|
|
expect(editorHtmlOutput.classList.toString()).toContain('content-editor-code-block');
|
|
});
|
|
});
|
|
|
|
describe.each`
|
|
inputRule
|
|
${'```'}
|
|
${'~~~'}
|
|
`('when typing $inputRule input rule', ({ inputRule }) => {
|
|
const language = 'javascript';
|
|
|
|
beforeEach(() => {
|
|
languageLoader.loadLanguageFromInputRule.mockReturnValueOnce({ language });
|
|
|
|
triggerNodeInputRule({
|
|
tiptapEditor,
|
|
inputRuleText: `${inputRule}${language} `,
|
|
});
|
|
});
|
|
|
|
it('creates a new code block and loads related language', () => {
|
|
const expectedDoc = doc(codeBlock({ language }));
|
|
|
|
expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
|
|
});
|
|
|
|
it('loads language when language loader is available', () => {
|
|
expect(languageLoader.loadLanguageFromInputRule).toHaveBeenCalledWith(
|
|
expect.arrayContaining([`${inputRule}${language} `, language]),
|
|
);
|
|
});
|
|
});
|
|
});
|