Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42

4 files changed, 122 insertions, 39 deletions

diff --git a/spec/frontend/notebook/cells/markdown_spec.js b/spec/frontend/notebook/cells/markdown_spec.js
index c757b55faf4..a7776bd5b69 100644
--- a/spec/frontend/notebook/cells/markdown_spec.js
+++ b/spec/frontend/notebook/cells/markdown_spec.js
@@ -5,20 +5,22 @@ import markdownTableJson from 'test_fixtures/blob/notebook/markdown-table.json';
 import basicJson from 'test_fixtures/blob/notebook/basic.json';
 import mathJson from 'test_fixtures/blob/notebook/math.json';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
+import Prompt from '~/notebook/cells/prompt.vue';
 
 const Component = Vue.extend(MarkdownComponent);
 
 window.katex = katex;
 
-function buildCellComponent(cell, relativePath = '') {
+function buildCellComponent(cell, relativePath = '', hidePrompt) {
   return mount(Component, {
     propsData: {
       cell,
+      hidePrompt,
     },
     provide: {
       relativeRawPath: relativePath,
     },
-  }).vm;
+  });
 }
 
 function buildMarkdownComponent(markdownContent, relativePath = '') {
@@ -33,7 +35,7 @@ function buildMarkdownComponent(markdownContent, relativePath = '') {
 }
 
 describe('Markdown component', () => {
-  let vm;
+  let wrapper;
   let cell;
   let json;
 
@@ -43,21 +45,30 @@ describe('Markdown component', () => {
     // eslint-disable-next-line prefer-destructuring
     cell = json.cells[1];
 
-    vm = buildCellComponent(cell);
+    wrapper = buildCellComponent(cell);
 
     await nextTick();
   });
 
-  it('does not render prompt', () => {
-    expect(vm.$el.querySelector('.prompt span')).toBeNull();
+  const findPrompt = () => wrapper.findComponent(Prompt);
+
+  it('renders a prompt by default', () => {
+    expect(findPrompt().exists()).toBe(true);
+  });
+
+  it('does not render a prompt if hidePrompt is true', () => {
+    wrapper = buildCellComponent(cell, '', true);
+    expect(findPrompt().exists()).toBe(false);
   });
 
   it('does not render the markdown text', () => {
-    expect(vm.$el.querySelector('.markdown').innerHTML.trim()).not.toEqual(cell.source.join(''));
+    expect(wrapper.vm.$el.querySelector('.markdown').innerHTML.trim()).not.toEqual(
+      cell.source.join(''),
+    );
   });
 
   it('renders the markdown HTML', () => {
-    expect(vm.$el.querySelector('.markdown h1')).not.toBeNull();
+    expect(wrapper.vm.$el.querySelector('.markdown h1')).not.toBeNull();
   });
 
   it('sanitizes Markdown output', async () => {
@@ -68,11 +79,11 @@ describe('Markdown component', () => {
     });
 
     await nextTick();
-    expect(vm.$el.querySelector('a').getAttribute('href')).toBeNull();
+    expect(wrapper.vm.$el.querySelector('a').getAttribute('href')).toBeNull();
   });
 
   it('sanitizes HTML', async () => {
-    const findLink = () => vm.$el.querySelector('.xss-link');
+    const findLink = () => wrapper.vm.$el.querySelector('.xss-link');
     Object.assign(cell, {
       source: ['<a href="test.js" data-remote=true data-type="script" class="xss-link">XSS</a>\n'],
     });
@@ -97,11 +108,11 @@ describe('Markdown component', () => {
       ["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/');
+      wrapper = buildMarkdownComponent([testMd], '/raw/');
 
       await nextTick();
 
-      expect(vm.$el.innerHTML).toContain(mustContain);
+      expect(wrapper.vm.$el.innerHTML).toContain(mustContain);
     });
   });
 
@@ -111,13 +122,13 @@ describe('Markdown component', () => {
     });
 
     it('renders images and text', async () => {
-      vm = buildCellComponent(json.cells[0]);
+      wrapper = buildCellComponent(json.cells[0]);
 
       await nextTick();
-      const images = vm.$el.querySelectorAll('img');
+      const images = wrapper.vm.$el.querySelectorAll('img');
       expect(images.length).toBe(5);
 
-      const columns = vm.$el.querySelectorAll('td');
+      const columns = wrapper.vm.$el.querySelectorAll('td');
       expect(columns.length).toBe(6);
 
       expect(columns[0].textContent).toEqual('Hello ');
@@ -141,81 +152,93 @@ describe('Markdown component', () => {
     });
 
     it('renders multi-line katex', async () => {
-      vm = buildCellComponent(json.cells[0]);
+      wrapper = buildCellComponent(json.cells[0]);
 
       await nextTick();
-      expect(vm.$el.querySelector('.katex')).not.toBeNull();
+      expect(wrapper.vm.$el.querySelector('.katex')).not.toBeNull();
     });
 
     it('renders inline katex', async () => {
-      vm = buildCellComponent(json.cells[1]);
+      wrapper = buildCellComponent(json.cells[1]);
 
       await nextTick();
-      expect(vm.$el.querySelector('p:first-child .katex')).not.toBeNull();
+      expect(wrapper.vm.$el.querySelector('p:first-child .katex')).not.toBeNull();
     });
 
     it('renders multiple inline katex', async () => {
-      vm = buildCellComponent(json.cells[1]);
+      wrapper = buildCellComponent(json.cells[1]);
 
       await nextTick();
-      expect(vm.$el.querySelectorAll('p:nth-child(2) .katex')).toHaveLength(4);
+      expect(wrapper.vm.$el.querySelectorAll('p:nth-child(2) .katex')).toHaveLength(4);
     });
 
     it('output cell in case of katex error', async () => {
-      vm = buildMarkdownComponent(['Some invalid $a & b$ inline formula $b & c$\n', '\n']);
+      wrapper = buildMarkdownComponent(['Some invalid $a & b$ inline formula $b & c$\n', '\n']);
 
       await nextTick();
       // expect one paragraph with no katex formula in it
-      expect(vm.$el.querySelectorAll('p')).toHaveLength(1);
-      expect(vm.$el.querySelectorAll('p .katex')).toHaveLength(0);
+      expect(wrapper.vm.$el.querySelectorAll('p')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('p .katex')).toHaveLength(0);
     });
 
     it('output cell and render remaining formula in case of katex error', async () => {
-      vm = buildMarkdownComponent([
+      wrapper = buildMarkdownComponent([
         'An invalid $a & b$ inline formula and a vaild one $b = c$\n',
         '\n',
       ]);
 
       await nextTick();
       // expect one paragraph with no katex formula in it
-      expect(vm.$el.querySelectorAll('p')).toHaveLength(1);
-      expect(vm.$el.querySelectorAll('p .katex')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('p')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('p .katex')).toHaveLength(1);
     });
 
     it('renders math formula in list object', async () => {
-      vm = buildMarkdownComponent(["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n']);
+      wrapper = buildMarkdownComponent([
+        "- list with inline $a=2$ inline formula $a' + b = c$\n",
+        '\n',
+      ]);
 
       await nextTick();
       // expect one list with a katex formula in it
-      expect(vm.$el.querySelectorAll('li')).toHaveLength(1);
-      expect(vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
+      expect(wrapper.vm.$el.querySelectorAll('li')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
     });
 
     it("renders math formula with tick ' in it", async () => {
-      vm = buildMarkdownComponent(["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n']);
+      wrapper = buildMarkdownComponent([
+        "- list with inline $a=2$ inline formula $a' + b = c$\n",
+        '\n',
+      ]);
 
       await nextTick();
       // expect one list with a katex formula in it
-      expect(vm.$el.querySelectorAll('li')).toHaveLength(1);
-      expect(vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
+      expect(wrapper.vm.$el.querySelectorAll('li')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
     });
 
     it('renders math formula with less-than-operator < in it', async () => {
-      vm = buildMarkdownComponent(['- list with inline $a=2$ inline formula $a + b < c$\n', '\n']);
+      wrapper = buildMarkdownComponent([
+        '- list with inline $a=2$ inline formula $a + b < c$\n',
+        '\n',
+      ]);
 
       await nextTick();
       // expect one list with a katex formula in it
-      expect(vm.$el.querySelectorAll('li')).toHaveLength(1);
-      expect(vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
+      expect(wrapper.vm.$el.querySelectorAll('li')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
     });
 
     it('renders math formula with greater-than-operator > in it', async () => {
-      vm = buildMarkdownComponent(['- list with inline $a=2$ inline formula $a + b > c$\n', '\n']);
+      wrapper = buildMarkdownComponent([
+        '- list with inline $a=2$ inline formula $a + b > c$\n',
+        '\n',
+      ]);
 
       await nextTick();
       // expect one list with a katex formula in it
-      expect(vm.$el.querySelectorAll('li')).toHaveLength(1);
-      expect(vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
+      expect(wrapper.vm.$el.querySelectorAll('li')).toHaveLength(1);
+      expect(wrapper.vm.$el.querySelectorAll('li .katex')).toHaveLength(2);
     });
   });
 });
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,
+    });
+  });
+});
diff --git a/spec/frontend/notebook/mock_data.js b/spec/frontend/notebook/mock_data.js
new file mode 100644
index 00000000000..b1419e1256f
--- /dev/null
+++ b/spec/frontend/notebook/mock_data.js
@@ -0,0 +1,2 @@
+export const relativeRawPath = '/test';
+export const markdownCellContent = ['# Test'];