2 files changed, 58 insertions, 0 deletions

diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js
index 8bf049235a9..585cbb68eeb 100644
--- a/spec/frontend/notebook/cells/output/index_spec.js
+++ b/spec/frontend/notebook/cells/output/index_spec.js
@@ -1,12 +1,15 @@
 import { mount } from '@vue/test-utils';
 import json from 'test_fixtures/blob/notebook/basic.json';
 import Output from '~/notebook/cells/output/index.vue';
+import MarkdownOutput from '~/notebook/cells/output/markdown.vue';
+import { relativeRawPath, markdownCellContent } from '../../mock_data';
 
 describe('Output component', () => {
   let wrapper;
 
   const createComponent = (output) => {
     wrapper = mount(Output, {
+      provide: { relativeRawPath },
       propsData: {
         outputs: [].concat(output),
         count: 1,
@@ -95,6 +98,17 @@ describe('Output component', () => {
     });
   });
 
+  describe('Markdown output', () => {
+    beforeEach(() => {
+      const markdownType = { data: { 'text/markdown': markdownCellContent } };
+      createComponent(markdownType);
+    });
+
+    it('renders a markdown component', () => {
+      expect(wrapper.findComponent(MarkdownOutput).props('rawCode')).toBe(markdownCellContent);
+    });
+  });
+
   describe('default to plain text', () => {
     beforeEach(() => {
       const unknownType = json.cells[6];
diff --git a/spec/frontend/notebook/cells/output/markdown_spec.js b/spec/frontend/notebook/cells/output/markdown_spec.js
new file mode 100644
index 00000000000..e3490ed3bea
--- /dev/null
+++ b/spec/frontend/notebook/cells/output/markdown_spec.js
@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import MarkdownOutput from '~/notebook/cells/output/markdown.vue';
+import Prompt from '~/notebook/cells/prompt.vue';
+import Markdown from '~/notebook/cells/markdown.vue';
+import { relativeRawPath, markdownCellContent } from '../../mock_data';
+
+describe('markdown output cell', () => {
+  let wrapper;
+
+  const createComponent = ({ count = 0, index = 0 } = {}) => {
+    wrapper = mount(MarkdownOutput, {
+      provide: { relativeRawPath },
+      propsData: {
+        rawCode: markdownCellContent,
+        count,
+        index,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findPrompt = () => wrapper.findComponent(Prompt);
+  const findMarkdown = () => wrapper.findComponent(Markdown);
+
+  it.each`
+    index | count | showOutput
+    ${0}  | ${1}  | ${true}
+    ${1}  | ${2}  | ${false}
+    ${2}  | ${3}  | ${false}
+  `('renders a prompt', ({ index, count, showOutput }) => {
+    createComponent({ count, index });
+    expect(findPrompt().props()).toMatchObject({ count, showOutput, type: 'Out' });
+  });
+
+  it('renders a Markdown component', () => {
+    expect(findMarkdown().props()).toMatchObject({
+      cell: { source: markdownCellContent },
+      hidePrompt: true,
+    });
+  });
+});