1 files changed, 65 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/code_block_highlighted_spec.js b/spec/frontend/vue_shared/components/code_block_highlighted_spec.js
new file mode 100644
index 00000000000..181692e61b5
--- /dev/null
+++ b/spec/frontend/vue_shared/components/code_block_highlighted_spec.js
@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import CodeBlock from '~/vue_shared/components/code_block_highlighted.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+
+describe('Code Block Highlighted', () => {
+  let wrapper;
+
+  const code = 'const foo = 1;';
+
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(CodeBlock, { propsData });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders highlighted code if language is supported', async () => {
+    createComponent({ code, language: 'javascript' });
+
+    await waitForPromises();
+
+    expect(wrapper.element).toMatchInlineSnapshot(`
+      <code-block-stub
+        class="highlight"
+        code=""
+        maxheight="initial"
+      >
+        <span>
+          <span
+            class="hljs-keyword"
+          >
+            const
+          </span>
+           foo = 
+          <span
+            class="hljs-number"
+          >
+            1
+          </span>
+          ;
+        </span>
+      </code-block-stub>
+    `);
+  });
+
+  it("renders plain text if language isn't supported", async () => {
+    createComponent({ code, language: 'foobar' });
+    await waitForPromises();
+
+    expect(wrapper.emitted('error')).toEqual([[expect.any(TypeError)]]);
+
+    expect(wrapper.element).toMatchInlineSnapshot(`
+      <code-block-stub
+        class="highlight"
+        code=""
+        maxheight="initial"
+      >
+        <span>
+          const foo = 1;
+        </span>
+      </code-block-stub>
+    `);
+  });
+});