Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

4 files changed, 62 insertions, 81 deletions

diff --git a/spec/frontend/notebook/cells/code_spec.js b/spec/frontend/notebook/cells/code_spec.js
index 669bdc2f89a..9a2db061278 100644
--- a/spec/frontend/notebook/cells/code_spec.js
+++ b/spec/frontend/notebook/cells/code_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import fixture from 'test_fixtures/blob/notebook/basic.json';
 import CodeComponent from '~/notebook/cells/code.vue';
 
@@ -25,12 +25,10 @@ describe('Code component', () => {
   };
 
   describe('without output', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       vm = setupComponent(json.cells[0]);
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('does not render output prompt', () => {
@@ -39,12 +37,10 @@ describe('Code component', () => {
   });
 
   describe('with output', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       vm = setupComponent(json.cells[2]);
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('does not render output prompt', () => {
@@ -58,12 +54,12 @@ describe('Code component', () => {
 
   describe('with string for output', () => {
     // NBFormat Version 4.1 allows outputs.text to be a string
-    beforeEach(() => {
+    beforeEach(async () => {
       const cell = json.cells[2];
       cell.outputs[0].text = cell.outputs[0].text.join('');
 
       vm = setupComponent(cell);
-      return vm.$nextTick();
+      await nextTick();
     });
 
     it('does not render output prompt', () => {
@@ -76,12 +72,12 @@ describe('Code component', () => {
   });
 
   describe('with string for cell.source', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const cell = json.cells[0];
       cell.source = cell.source.join('');
 
       vm = setupComponent(cell);
-      return vm.$nextTick();
+      await nextTick();
     });
 
     it('renders the same input as when cell.source is an array', () => {
diff --git a/spec/frontend/notebook/cells/markdown_spec.js b/spec/frontend/notebook/cells/markdown_spec.js
index 36b1e91f15f..7dc6f90d202 100644
--- a/spec/frontend/notebook/cells/markdown_spec.js
+++ b/spec/frontend/notebook/cells/markdown_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import katex from 'katex';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 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';
@@ -37,7 +37,7 @@ describe('Markdown component', () => {
   let cell;
   let json;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     json = basicJson;
 
     // eslint-disable-next-line prefer-destructuring
@@ -45,7 +45,7 @@ describe('Markdown component', () => {
 
     vm = buildCellComponent(cell);
 
-    return vm.$nextTick();
+    await nextTick();
   });
 
   it('does not render prompt', () => {
@@ -67,7 +67,7 @@ describe('Markdown component', () => {
       ],
     });
 
-    await vm.$nextTick();
+    await nextTick();
     expect(vm.$el.querySelector('a').getAttribute('href')).toBeNull();
   });
 
@@ -77,7 +77,7 @@ describe('Markdown component', () => {
       source: ['<a href="test.js" data-remote=true data-type="script" class="xss-link">XSS</a>\n'],
     });
 
-    await vm.$nextTick();
+    await nextTick();
     expect(findLink().getAttribute('data-remote')).toBe(null);
     expect(findLink().getAttribute('data-type')).toBe(null);
   });
@@ -99,7 +99,7 @@ describe('Markdown component', () => {
     ])('%s', async ([testMd, mustContain]) => {
       vm = buildMarkdownComponent([testMd], '/raw/');
 
-      await vm.$nextTick();
+      await nextTick();
 
       expect(vm.$el.innerHTML).toContain(mustContain);
     });
@@ -110,29 +110,28 @@ describe('Markdown component', () => {
       json = markdownTableJson;
     });
 
-    it('renders images and text', () => {
+    it('renders images and text', async () => {
       vm = buildCellComponent(json.cells[0]);
 
-      return vm.$nextTick().then(() => {
-        const images = vm.$el.querySelectorAll('img');
-        expect(images.length).toBe(5);
-
-        const columns = vm.$el.querySelectorAll('td');
-        expect(columns.length).toBe(6);
-
-        expect(columns[0].textContent).toEqual('Hello ');
-        expect(columns[1].textContent).toEqual('Test ');
-        expect(columns[2].textContent).toEqual('World ');
-        expect(columns[3].textContent).toEqual('Fake ');
-        expect(columns[4].textContent).toEqual('External image: ');
-        expect(columns[5].textContent).toEqual('Empty');
-
-        expect(columns[0].innerHTML).toContain('<img src="data:image/jpeg;base64');
-        expect(columns[1].innerHTML).toContain('<img src="data:image/png;base64');
-        expect(columns[2].innerHTML).toContain('<img src="data:image/jpeg;base64');
-        expect(columns[3].innerHTML).toContain('<img>');
-        expect(columns[4].innerHTML).toContain('<img src="https://www.google.com/');
-      });
+      await nextTick();
+      const images = vm.$el.querySelectorAll('img');
+      expect(images.length).toBe(5);
+
+      const columns = vm.$el.querySelectorAll('td');
+      expect(columns.length).toBe(6);
+
+      expect(columns[0].textContent).toEqual('Hello ');
+      expect(columns[1].textContent).toEqual('Test ');
+      expect(columns[2].textContent).toEqual('World ');
+      expect(columns[3].textContent).toEqual('Fake ');
+      expect(columns[4].textContent).toEqual('External image: ');
+      expect(columns[5].textContent).toEqual('Empty');
+
+      expect(columns[0].innerHTML).toContain('<img src="data:image/jpeg;base64');
+      expect(columns[1].innerHTML).toContain('<img src="data:image/png;base64');
+      expect(columns[2].innerHTML).toContain('<img src="data:image/jpeg;base64');
+      expect(columns[3].innerHTML).toContain('<img>');
+      expect(columns[4].innerHTML).toContain('<img src="https://www.google.com/');
     });
   });
 
@@ -144,28 +143,28 @@ describe('Markdown component', () => {
     it('renders multi-line katex', async () => {
       vm = buildCellComponent(json.cells[0]);
 
-      await vm.$nextTick();
+      await nextTick();
       expect(vm.$el.querySelector('.katex')).not.toBeNull();
     });
 
     it('renders inline katex', async () => {
       vm = buildCellComponent(json.cells[1]);
 
-      await vm.$nextTick();
+      await nextTick();
       expect(vm.$el.querySelector('p:first-child .katex')).not.toBeNull();
     });
 
     it('renders multiple inline katex', async () => {
       vm = buildCellComponent(json.cells[1]);
 
-      await vm.$nextTick();
+      await nextTick();
       expect(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']);
 
-      await vm.$nextTick();
+      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);
@@ -177,7 +176,7 @@ describe('Markdown component', () => {
         '\n',
       ]);
 
-      await vm.$nextTick();
+      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);
@@ -186,7 +185,7 @@ describe('Markdown component', () => {
     it('renders math formula in list object', async () => {
       vm = buildMarkdownComponent(["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n']);
 
-      await vm.$nextTick();
+      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);
@@ -195,7 +194,7 @@ describe('Markdown component', () => {
     it("renders math formula with tick ' in it", async () => {
       vm = buildMarkdownComponent(["- list with inline $a=2$ inline formula $a' + b = c$\n", '\n']);
 
-      await vm.$nextTick();
+      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);
@@ -204,7 +203,7 @@ describe('Markdown component', () => {
     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']);
 
-      await vm.$nextTick();
+      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);
@@ -213,7 +212,7 @@ describe('Markdown component', () => {
     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']);
 
-      await vm.$nextTick();
+      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);
diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js
index 7ece73d375c..8e04e4c146c 100644
--- a/spec/frontend/notebook/cells/output/index_spec.js
+++ b/spec/frontend/notebook/cells/output/index_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import json from 'test_fixtures/blob/notebook/basic.json';
 import CodeComponent from '~/notebook/cells/output/index.vue';
 
@@ -18,13 +18,11 @@ describe('Output component', () => {
   };
 
   describe('text output', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       const textType = json.cells[2];
       createComponent(textType.outputs[0]);
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('renders as plain text', () => {
@@ -37,13 +35,11 @@ describe('Output component', () => {
   });
 
   describe('image output', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       const imageType = json.cells[3];
       createComponent(imageType.outputs[0]);
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('renders as an image', () => {
@@ -86,13 +82,11 @@ describe('Output component', () => {
   });
 
   describe('svg output', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       const svgType = json.cells[5];
       createComponent(svgType.outputs[0]);
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('renders as an svg', () => {
@@ -101,13 +95,11 @@ describe('Output component', () => {
   });
 
   describe('default to plain text', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       const unknownType = json.cells[6];
       createComponent(unknownType.outputs[0]);
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('renders as plain text', () => {
@@ -119,16 +111,14 @@ describe('Output component', () => {
       expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
     });
 
-    it("renders as plain text when doesn't recognise other types", (done) => {
+    it("renders as plain text when doesn't recognise other types", async () => {
       const unknownType = json.cells[7];
       createComponent(unknownType.outputs[0]);
 
-      setImmediate(() => {
-        expect(vm.$el.querySelector('pre')).not.toBeNull();
-        expect(vm.$el.textContent.trim()).toContain('testing');
+      await nextTick();
 
-        done();
-      });
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+      expect(vm.$el.textContent.trim()).toContain('testing');
     });
   });
 });
diff --git a/spec/frontend/notebook/cells/prompt_spec.js b/spec/frontend/notebook/cells/prompt_spec.js
index 8cdcd1f84de..89b2d7b2b90 100644
--- a/spec/frontend/notebook/cells/prompt_spec.js
+++ b/spec/frontend/notebook/cells/prompt_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import PromptComponent from '~/notebook/cells/prompt.vue';
 
 const Component = Vue.extend(PromptComponent);
@@ -7,7 +7,7 @@ describe('Prompt component', () => {
   let vm;
 
   describe('input', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       vm = new Component({
         propsData: {
           type: 'In',
@@ -16,9 +16,7 @@ describe('Prompt component', () => {
       });
       vm.$mount();
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('renders in label', () => {
@@ -31,7 +29,7 @@ describe('Prompt component', () => {
   });
 
   describe('output', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
       vm = new Component({
         propsData: {
           type: 'Out',
@@ -40,9 +38,7 @@ describe('Prompt component', () => {
       });
       vm.$mount();
 
-      setImmediate(() => {
-        done();
-      });
+      return nextTick();
     });
 
     it('renders in label', () => {