3 files changed, 73 insertions, 101 deletions

diff --git a/spec/frontend/notebook/cells/markdown_spec.js b/spec/frontend/notebook/cells/markdown_spec.js
index deeee5d6589..707efa21528 100644
--- a/spec/frontend/notebook/cells/markdown_spec.js
+++ b/spec/frontend/notebook/cells/markdown_spec.js
@@ -1,3 +1,4 @@
+import { mount } from '@vue/test-utils';
 import katex from 'katex';
 import Vue from 'vue';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
@@ -6,6 +7,28 @@ const Component = Vue.extend(MarkdownComponent);
 
 window.katex = katex;
 
+function buildCellComponent(cell, relativePath = '') {
+  return mount(Component, {
+    propsData: {
+      cell,
+    },
+    provide: {
+      relativeRawPath: relativePath,
+    },
+  }).vm;
+}
+
+function buildMarkdownComponent(markdownContent, relativePath = '') {
+  return buildCellComponent(
+    {
+      cell_type: 'markdown',
+      metadata: {},
+      source: markdownContent,
+    },
+    relativePath,
+  );
+}
+
 describe('Markdown component', () => {
   let vm;
   let cell;
@@ -17,12 +40,7 @@ describe('Markdown component', () => {
     // eslint-disable-next-line prefer-destructuring
     cell = json.cells[1];
 
-    vm = new Component({
-      propsData: {
-        cell,
-      },
-    });
-    vm.$mount();
+    vm = buildCellComponent(cell);
 
     return vm.$nextTick();
   });
@@ -61,17 +79,36 @@ describe('Markdown component', () => {
     expect(findLink().getAttribute('data-type')).toBe(null);
   });
 
+  describe('When parsing images', () => {
+    it.each([
+      [
+        'for relative images in root folder, it does',
+        '![](local_image.png)\n',
+        'src="/raw/local_image',
+      ],
+      [
+        'for relative images in child folders, it does',
+        '![](data/local_image.png)\n',
+        'src="/raw/data',
+      ],
+      ["for embedded images, it doesn't", '![](data:image/jpeg;base64)\n', 'src="data:'],
+      ["for images urls, it doesn't", '![](http://image.png)\n', 'src="http:'],
+    ])('%s', async ([testMd, mustContain]) => {
+      vm = buildMarkdownComponent([testMd], '/raw/');
+
+      await vm.$nextTick();
+
+      expect(vm.$el.innerHTML).toContain(mustContain);
+    });
+  });
+
   describe('tables', () => {
     beforeEach(() => {
       json = getJSONFixture('blob/notebook/markdown-table.json');
     });
 
     it('renders images and text', () => {
-      vm = new Component({
-        propsData: {
-          cell: json.cells[0],
-        },
-      }).$mount();
+      vm = buildCellComponent(json.cells[0]);
 
       return vm.$nextTick().then(() => {
         const images = vm.$el.querySelectorAll('img');
@@ -102,48 +139,28 @@ describe('Markdown component', () => {
     });
 
     it('renders multi-line katex', async () => {
-      vm = new Component({
-        propsData: {
-          cell: json.cells[0],
-        },
-      }).$mount();
+      vm = buildCellComponent(json.cells[0]);
 
       await vm.$nextTick();
       expect(vm.$el.querySelector('.katex')).not.toBeNull();
     });
 
     it('renders inline katex', async () => {
-      vm = new Component({
-        propsData: {
-          cell: json.cells[1],
-        },
-      }).$mount();
+      vm = buildCellComponent(json.cells[1]);
 
       await vm.$nextTick();
       expect(vm.$el.querySelector('p:first-child .katex')).not.toBeNull();
     });
 
     it('renders multiple inline katex', async () => {
-      vm = new Component({
-        propsData: {
-          cell: json.cells[1],
-        },
-      }).$mount();
+      vm = buildCellComponent(json.cells[1]);
 
       await vm.$nextTick();
       expect(vm.$el.querySelectorAll('p:nth-child(2) .katex')).toHaveLength(4);
     });
 
     it('output cell in case of katex error', async () => {
-      vm = new Component({
-        propsData: {
-          cell: {
-            cell_type: 'markdown',
-            metadata: {},
-            source: ['Some invalid $a & b$ inline formula $b & c$\n', '\n'],
-          },
-        },
-      }).$mount();
+      vm = buildMarkdownComponent(['Some invalid $a & b$ inline formula $b & c$\n', '\n']);
 
       await vm.$nextTick();
       // expect one paragraph with no katex formula in it
@@ -152,15 +169,10 @@ describe('Markdown component', () => {
     });
 
     it('output cell and render remaining formula in case of katex error', async () => {
-      vm = new Component({
-        propsData: {
-          cell: {
-            cell_type: 'markdown',
-            metadata: {},
-            source: ['An invalid $a & b$ inline formula and a vaild one $b = c$\n', '\n'],
-          },
-        },
-      }).$mount();
+      vm = buildMarkdownComponent([
+        'An invalid $a & b$ inline formula and a vaild one $b = c$\n',
+        '\n',
+      ]);
 
       await vm.$nextTick();
       // expect one paragraph with no katex formula in it
@@ -169,15 +181,7 @@ describe('Markdown component', () => {
     });
 
     it('renders math formula in list object', async () => {
-      vm = new Component({
-        propsData: {
-          cell: {
-            cell_type: 'markdown',
-            metadata: {},
-            source: ["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n'],
-          },
-        },
-      }).$mount();
+      vm = buildMarkdownComponent(["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n']);
 
       await vm.$nextTick();
       // expect one list with a katex formula in it
@@ -186,15 +190,7 @@ describe('Markdown component', () => {
     });
 
     it("renders math formula with tick ' in it", async () => {
-      vm = new Component({
-        propsData: {
-          cell: {
-            cell_type: 'markdown',
-            metadata: {},
-            source: ["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n'],
-          },
-        },
-      }).$mount();
+      vm = buildMarkdownComponent(["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n']);
 
       await vm.$nextTick();
       // expect one list with a katex formula in it
@@ -203,15 +199,7 @@ describe('Markdown component', () => {
     });
 
     it('renders math formula with less-than-operator < in it', async () => {
-      vm = new Component({
-        propsData: {
-          cell: {
-            cell_type: 'markdown',
-            metadata: {},
-            source: ['- list with inline $a=2$ inline formula $a + b < c$\n', '\n'],
-          },
-        },
-      }).$mount();
+      vm = buildMarkdownComponent(['- list with inline $a=2$ inline formula $a + b < c$\n', '\n']);
 
       await vm.$nextTick();
       // expect one list with a katex formula in it
@@ -220,15 +208,7 @@ describe('Markdown component', () => {
     });
 
     it('renders math formula with greater-than-operator > in it', async () => {
-      vm = new Component({
-        propsData: {
-          cell: {
-            cell_type: 'markdown',
-            metadata: {},
-            source: ['- list with inline $a=2$ inline formula $a + b > c$\n', '\n'],
-          },
-        },
-      }).$mount();
+      vm = buildMarkdownComponent(['- list with inline $a=2$ inline formula $a + b > c$\n', '\n']);
 
       await vm.$nextTick();
       // expect one list with a katex formula in it
diff --git a/spec/frontend/notebook/cells/output/html_sanitize_fixtures.js b/spec/frontend/notebook/cells/output/html_sanitize_fixtures.js
index 0b585ab860b..803ac4a219d 100644
--- a/spec/frontend/notebook/cells/output/html_sanitize_fixtures.js
+++ b/spec/frontend/notebook/cells/output/html_sanitize_fixtures.js
@@ -90,7 +90,8 @@ export default [
         '  </g>\n',
         '</svg>',
       ].join(),
-      output: '<svg height="115.02pt" id="svg2"',
+      output:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="388.84pt" version="1.0" id="svg2" height="115.02pt">',
     },
   ],
 ];
diff --git a/spec/frontend/notebook/index_spec.js b/spec/frontend/notebook/index_spec.js
index 945af08e4d5..4d0dacaf37e 100644
--- a/spec/frontend/notebook/index_spec.js
+++ b/spec/frontend/notebook/index_spec.js
@@ -1,3 +1,4 @@
+import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Notebook from '~/notebook/index.vue';
 
@@ -13,14 +14,16 @@ describe('Notebook component', () => {
     jsonWithWorksheet = getJSONFixture('blob/notebook/worksheets.json');
   });
 
+  function buildComponent(notebook) {
+    return mount(Component, {
+      propsData: { notebook, codeCssClass: 'js-code-class' },
+      provide: { relativeRawPath: '' },
+    }).vm;
+  }
+
   describe('without JSON', () => {
     beforeEach((done) => {
-      vm = new Component({
-        propsData: {
-          notebook: {},
-        },
-      });
-      vm.$mount();
+      vm = buildComponent({});
 
       setImmediate(() => {
         done();
@@ -34,13 +37,7 @@ describe('Notebook component', () => {
 
   describe('with JSON', () => {
     beforeEach((done) => {
-      vm = new Component({
-        propsData: {
-          notebook: json,
-          codeCssClass: 'js-code-class',
-        },
-      });
-      vm.$mount();
+      vm = buildComponent(json);
 
       setImmediate(() => {
         done();
@@ -66,13 +63,7 @@ describe('Notebook component', () => {
 
   describe('with worksheets', () => {
     beforeEach((done) => {
-      vm = new Component({
-        propsData: {
-          notebook: jsonWithWorksheet,
-          codeCssClass: 'js-code-class',
-        },
-      });
-      vm.$mount();
+      vm = buildComponent(jsonWithWorksheet);
 
       setImmediate(() => {
         done();