1 files changed, 59 insertions, 15 deletions

diff --git a/spec/frontend/content_editor/extensions/code_block_highlight_spec.js b/spec/frontend/content_editor/extensions/code_block_highlight_spec.js
index 05fa0f79ef0..02e5b1dc271 100644
--- a/spec/frontend/content_editor/extensions/code_block_highlight_spec.js
+++ b/spec/frontend/content_editor/extensions/code_block_highlight_spec.js
@@ -1,5 +1,5 @@
 import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
-import { createTestEditor } from '../test_utils';
+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>
@@ -12,34 +12,78 @@ const CODE_BLOCK_HTML = `<pre class="code highlight js-syntax-highlight language
 describe('content_editor/extensions/code_block_highlight', () => {
   let parsedCodeBlockHtmlFixture;
   let tiptapEditor;
+  let doc;
+  let codeBlock;
+  let languageLoader;
 
   const parseHTML = (html) => new DOMParser().parseFromString(html, 'text/html');
   const preElement = () => parsedCodeBlockHtmlFixture.querySelector('pre');
 
   beforeEach(() => {
-    tiptapEditor = createTestEditor({ extensions: [CodeBlockHighlight] });
-    parsedCodeBlockHtmlFixture = parseHTML(CODE_BLOCK_HTML);
+    languageLoader = { loadLanguages: jest.fn() };
+    tiptapEditor = createTestEditor({
+      extensions: [CodeBlockHighlight.configure({ languageLoader })],
+    });
 
-    tiptapEditor.commands.setContent(CODE_BLOCK_HTML);
+    ({
+      builders: { doc, codeBlock },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        codeBlock: { nodeType: CodeBlockHighlight.name },
+      },
+    }));
   });
 
-  it('extracts language and params attributes from Markdown API output', () => {
-    const language = preElement().getAttribute('lang');
+  describe('when parsing HTML', () => {
+    beforeEach(() => {
+      parsedCodeBlockHtmlFixture = parseHTML(CODE_BLOCK_HTML);
 
-    expect(tiptapEditor.getJSON().content[0].attrs).toMatchObject({
-      language,
+      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 code, highlight, and js-syntax-highlight to code block element', () => {
-    const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
+    it('adds content-editor-code-block class to the pre element', () => {
+      const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
 
-    expect(editorHtmlOutput.classList.toString()).toContain('code highlight js-syntax-highlight');
+      expect(editorHtmlOutput.classList.toString()).toContain('content-editor-code-block');
+    });
   });
 
-  it('adds content-editor-code-block class to the pre element', () => {
-    const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
+  describe.each`
+    inputRule
+    ${'```'}
+    ${'~~~'}
+  `('when typing $inputRule input rule', ({ inputRule }) => {
+    const language = 'javascript';
+
+    beforeEach(() => {
+      triggerNodeInputRule({
+        tiptapEditor,
+        inputRuleText: `${inputRule}${language} `,
+      });
+    });
+
+    it('creates a new code block and loads related language', () => {
+      const expectedDoc = doc(codeBlock({ language }));
 
-    expect(editorHtmlOutput.classList.toString()).toContain('content-editor-code-block');
+      expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    });
+
+    it('loads language when language loader is available', () => {
+      expect(languageLoader.loadLanguages).toHaveBeenCalledWith([language]);
+    });
   });
 });