Add latest changes from gitlab-org/gitlab@master

4 files changed, 119 insertions, 209 deletions

diff --git a/spec/frontend/ide/components/nav_dropdown_button_spec.js b/spec/frontend/ide/components/nav_dropdown_button_spec.js
index 1c14685df68..8eebcdd9e08 100644
--- a/spec/frontend/ide/components/nav_dropdown_button_spec.js
+++ b/spec/frontend/ide/components/nav_dropdown_button_spec.js
@@ -1,81 +1,74 @@
-import Vue, { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import NavDropdownButton from '~/ide/components/nav_dropdown_button.vue';
 import { createStore } from '~/ide/stores';
+import { __ } from '~/locale';
 
-describe('NavDropdown', () => {
+describe('NavDropdownButton component', () => {
   const TEST_BRANCH_ID = 'lorem-ipsum-dolar';
   const TEST_MR_ID = '12345';
-  let store;
-  let vm;
-
-  beforeEach(() => {
-    store = createStore();
-  });
+  let wrapper;
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  const createComponent = (props = {}) => {
-    vm = mountComponentWithStore(Vue.extend(NavDropdownButton), { props, store });
-    vm.$mount();
+  const createComponent = ({ props = {}, state = {} } = {}) => {
+    const store = createStore();
+    store.replaceState(state);
+    wrapper = mountExtended(NavDropdownButton, { propsData: props, store });
   };
 
-  const findIcon = (name) => vm.$el.querySelector(`[data-testid="${name}-icon"]`);
-  const findMRIcon = () => findIcon('merge-request');
-  const findBranchIcon = () => findIcon('branch');
+  const findMRIcon = () => wrapper.findByLabelText(__('Merge request'));
+  const findBranchIcon = () => wrapper.findByLabelText(__('Current Branch'));
 
   describe('normal', () => {
-    beforeEach(() => {
+    it('renders empty placeholders, if state is falsey', () => {
       createComponent();
-    });
 
-    it('renders empty placeholders, if state is falsey', () => {
-      expect(trimText(vm.$el.textContent)).toEqual('- -');
+      expect(trimText(wrapper.text())).toBe('- -');
     });
 
-    it('renders branch name, if state has currentBranchId', async () => {
-      vm.$store.state.currentBranchId = TEST_BRANCH_ID;
+    it('renders branch name, if state has currentBranchId', () => {
+      createComponent({ state: { currentBranchId: TEST_BRANCH_ID } });
 
-      await nextTick();
-      expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} -`);
+      expect(trimText(wrapper.text())).toBe(`${TEST_BRANCH_ID} -`);
     });
 
-    it('renders mr id, if state has currentMergeRequestId', async () => {
-      vm.$store.state.currentMergeRequestId = TEST_MR_ID;
+    it('renders mr id, if state has currentMergeRequestId', () => {
+      createComponent({ state: { currentMergeRequestId: TEST_MR_ID } });
 
-      await nextTick();
-      expect(trimText(vm.$el.textContent)).toEqual(`- !${TEST_MR_ID}`);
+      expect(trimText(wrapper.text())).toBe(`- !${TEST_MR_ID}`);
     });
 
-    it('renders branch and mr, if state has both', async () => {
-      vm.$store.state.currentBranchId = TEST_BRANCH_ID;
-      vm.$store.state.currentMergeRequestId = TEST_MR_ID;
+    it('renders branch and mr, if state has both', () => {
+      createComponent({
+        state: { currentBranchId: TEST_BRANCH_ID, currentMergeRequestId: TEST_MR_ID },
+      });
 
-      await nextTick();
-      expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} !${TEST_MR_ID}`);
+      expect(trimText(wrapper.text())).toBe(`${TEST_BRANCH_ID} !${TEST_MR_ID}`);
     });
 
     it('shows icons', () => {
-      expect(findBranchIcon()).toBeTruthy();
-      expect(findMRIcon()).toBeTruthy();
+      createComponent();
+
+      expect(findBranchIcon().exists()).toBe(true);
+      expect(findMRIcon().exists()).toBe(true);
     });
   });
 
-  describe('with showMergeRequests false', () => {
+  describe('when showMergeRequests=false', () => {
     beforeEach(() => {
-      createComponent({ showMergeRequests: false });
+      createComponent({ props: { showMergeRequests: false } });
     });
 
     it('shows single empty placeholder, if state is falsey', () => {
-      expect(trimText(vm.$el.textContent)).toEqual('-');
+      expect(trimText(wrapper.text())).toBe('-');
     });
 
     it('shows only branch icon', () => {
-      expect(findBranchIcon()).toBeTruthy();
-      expect(findMRIcon()).toBe(null);
+      expect(findBranchIcon().exists()).toBe(true);
+      expect(findMRIcon().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/notebook/cells/code_spec.js b/spec/frontend/notebook/cells/code_spec.js
index 9a2db061278..10762a1c3a2 100644
--- a/spec/frontend/notebook/cells/code_spec.js
+++ b/spec/frontend/notebook/cells/code_spec.js
@@ -1,89 +1,73 @@
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import fixture from 'test_fixtures/blob/notebook/basic.json';
-import CodeComponent from '~/notebook/cells/code.vue';
-
-const Component = Vue.extend(CodeComponent);
+import Code from '~/notebook/cells/code.vue';
 
 describe('Code component', () => {
-  let vm;
-
+  let wrapper;
   let json;
 
+  const mountComponent = (cell) => mount(Code, { propsData: { cell } });
+
   beforeEach(() => {
     // Clone fixture as it could be modified by tests
     json = JSON.parse(JSON.stringify(fixture));
   });
 
-  const setupComponent = (cell) => {
-    const comp = new Component({
-      propsData: {
-        cell,
-      },
-    });
-    comp.$mount();
-    return comp;
-  };
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
   describe('without output', () => {
     beforeEach(() => {
-      vm = setupComponent(json.cells[0]);
-
-      return nextTick();
+      wrapper = mountComponent(json.cells[0]);
     });
 
     it('does not render output prompt', () => {
-      expect(vm.$el.querySelectorAll('.prompt').length).toBe(1);
+      expect(wrapper.findAll('.prompt')).toHaveLength(1);
     });
   });
 
   describe('with output', () => {
     beforeEach(() => {
-      vm = setupComponent(json.cells[2]);
-
-      return nextTick();
+      wrapper = mountComponent(json.cells[2]);
     });
 
     it('does not render output prompt', () => {
-      expect(vm.$el.querySelectorAll('.prompt').length).toBe(2);
+      expect(wrapper.findAll('.prompt')).toHaveLength(2);
     });
 
     it('renders output cell', () => {
-      expect(vm.$el.querySelector('.output')).toBeDefined();
+      expect(wrapper.find('.output').exists()).toBe(true);
     });
   });
 
   describe('with string for output', () => {
     // NBFormat Version 4.1 allows outputs.text to be a string
-    beforeEach(async () => {
+    beforeEach(() => {
       const cell = json.cells[2];
       cell.outputs[0].text = cell.outputs[0].text.join('');
 
-      vm = setupComponent(cell);
-      await nextTick();
+      wrapper = mountComponent(cell);
     });
 
     it('does not render output prompt', () => {
-      expect(vm.$el.querySelectorAll('.prompt').length).toBe(2);
+      expect(wrapper.findAll('.prompt')).toHaveLength(2);
     });
 
     it('renders output cell', () => {
-      expect(vm.$el.querySelector('.output')).toBeDefined();
+      expect(wrapper.find('.output').exists()).toBe(true);
     });
   });
 
   describe('with string for cell.source', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
       const cell = json.cells[0];
       cell.source = cell.source.join('');
-
-      vm = setupComponent(cell);
-      await nextTick();
+      wrapper = mountComponent(cell);
     });
 
     it('renders the same input as when cell.source is an array', () => {
-      const expected = "console.log('test')";
-
-      expect(vm.$el.querySelector('.input').innerText).toContain(expected);
+      expect(wrapper.find('.input').text()).toContain("console.log('test')");
     });
   });
 });
diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js
index 8e04e4c146c..4d1d03e5e34 100644
--- a/spec/frontend/notebook/cells/output/index_spec.js
+++ b/spec/frontend/notebook/cells/output/index_spec.js
@@ -1,36 +1,35 @@
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import json from 'test_fixtures/blob/notebook/basic.json';
-import CodeComponent from '~/notebook/cells/output/index.vue';
-
-const Component = Vue.extend(CodeComponent);
+import Output from '~/notebook/cells/output/index.vue';
 
 describe('Output component', () => {
-  let vm;
+  let wrapper;
 
   const createComponent = (output) => {
-    vm = new Component({
+    wrapper = mount(Output, {
       propsData: {
         outputs: [].concat(output),
         count: 1,
       },
     });
-    vm.$mount();
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('text output', () => {
     beforeEach(() => {
       const textType = json.cells[2];
       createComponent(textType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as plain text', () => {
-      expect(vm.$el.querySelector('pre')).not.toBeNull();
+      expect(wrapper.find('pre').exists()).toBe(true);
     });
 
     it('renders prompt', () => {
-      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+      expect(wrapper.find('.prompt span').exists()).toBe(true);
     });
   });
 
@@ -38,12 +37,10 @@ describe('Output component', () => {
     beforeEach(() => {
       const imageType = json.cells[3];
       createComponent(imageType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as an image', () => {
-      expect(vm.$el.querySelector('img')).not.toBeNull();
+      expect(wrapper.find('img').exists()).toBe(true);
     });
   });
 
@@ -52,16 +49,15 @@ describe('Output component', () => {
       const htmlType = json.cells[4];
       createComponent(htmlType.outputs[0]);
 
-      expect(vm.$el.querySelector('p')).not.toBeNull();
-      expect(vm.$el.querySelectorAll('p')).toHaveLength(1);
-      expect(vm.$el.textContent.trim()).toContain('test');
+      expect(wrapper.findAll('p')).toHaveLength(1);
+      expect(wrapper.text()).toContain('test');
     });
 
     it('renders multiple raw HTML outputs', () => {
       const htmlType = json.cells[4];
       createComponent([htmlType.outputs[0], htmlType.outputs[0]]);
 
-      expect(vm.$el.querySelectorAll('p')).toHaveLength(2);
+      expect(wrapper.findAll('p')).toHaveLength(2);
     });
   });
 
@@ -77,7 +73,7 @@ describe('Output component', () => {
       };
       createComponent(output);
 
-      expect(vm.$el.querySelector('.MathJax')).not.toBeNull();
+      expect(wrapper.find('.MathJax').exists()).toBe(true);
     });
   });
 
@@ -85,12 +81,10 @@ describe('Output component', () => {
     beforeEach(() => {
       const svgType = json.cells[5];
       createComponent(svgType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as an svg', () => {
-      expect(vm.$el.querySelector('svg')).not.toBeNull();
+      expect(wrapper.find('svg').exists()).toBe(true);
     });
   });
 
@@ -98,27 +92,23 @@ describe('Output component', () => {
     beforeEach(() => {
       const unknownType = json.cells[6];
       createComponent(unknownType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as plain text', () => {
-      expect(vm.$el.querySelector('pre')).not.toBeNull();
-      expect(vm.$el.textContent.trim()).toContain('testing');
+      expect(wrapper.find('pre').exists()).toBe(true);
+      expect(wrapper.text()).toContain('testing');
     });
 
-    it('renders promot', () => {
-      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+    it('renders prompt', () => {
+      expect(wrapper.find('.prompt span').exists()).toBe(true);
     });
 
-    it("renders as plain text when doesn't recognise other types", async () => {
+    it("renders as plain text when doesn't recognise other types", () => {
       const unknownType = json.cells[7];
       createComponent(unknownType.outputs[0]);
 
-      await nextTick();
-
-      expect(vm.$el.querySelector('pre')).not.toBeNull();
-      expect(vm.$el.textContent.trim()).toContain('testing');
+      expect(wrapper.find('pre').exists()).toBe(true);
+      expect(wrapper.text()).toContain('testing');
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
index d0fa8b8dacb..16f924b44d8 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
@@ -1,11 +1,9 @@
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import { compileToFunctions } from 'vue-template-compiler';
-
+import { nextTick } from 'vue';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
-import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
+import ImageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
 
-describe('ImageDiffViewer', () => {
+describe('ImageDiffViewer component', () => {
   const requiredProps = {
     diffMode: 'replaced',
     newPath: GREEN_BOX_IMAGE_URL,
@@ -17,15 +15,12 @@ describe('ImageDiffViewer', () => {
     newSize: 1024,
   };
   let wrapper;
-  let vm;
 
-  function createComponent(props) {
-    const ImageDiffViewer = Vue.extend(imageDiffViewer);
-    wrapper = mount(ImageDiffViewer, { propsData: props });
-    vm = wrapper.vm;
-  }
+  const createComponent = (props, slots) => {
+    wrapper = mount(ImageDiffViewer, { propsData: props, slots });
+  };
 
-  const triggerEvent = (eventName, el = vm.$el, clientX = 0) => {
+  const triggerEvent = (eventName, el = wrapper.$el, clientX = 0) => {
     const event = new MouseEvent(eventName, {
       bubbles: true,
       cancelable: true,
@@ -51,128 +46,76 @@ describe('ImageDiffViewer', () => {
     wrapper.destroy();
   });
 
-  it('renders image diff for replaced', async () => {
-    createComponent({ ...allProps });
-
-    await nextTick();
-    const metaInfoElements = vm.$el.querySelectorAll('.image-info');
-
-    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
-
-    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
-
-    expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('2-up');
-    expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe(
-      'Swipe',
-    );
-
-    expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe(
-      'Onion skin',
-    );
-
-    expect(metaInfoElements.length).toBe(2);
-    expect(metaInfoElements[0]).toHaveText('2.00 KiB');
-    expect(metaInfoElements[1]).toHaveText('1.00 KiB');
+  it('renders image diff for replaced', () => {
+    createComponent(allProps);
+    const metaInfoElements = wrapper.findAll('.image-info');
+
+    expect(wrapper.find('.added img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL);
+    expect(wrapper.find('.deleted img').attributes('src')).toBe(RED_BOX_IMAGE_URL);
+    expect(wrapper.find('.view-modes-menu li.active').text()).toBe('2-up');
+    expect(wrapper.find('.view-modes-menu li:nth-child(2)').text()).toBe('Swipe');
+    expect(wrapper.find('.view-modes-menu li:nth-child(3)').text()).toBe('Onion skin');
+    expect(metaInfoElements).toHaveLength(2);
+    expect(metaInfoElements.at(0).text()).toBe('2.00 KiB');
+    expect(metaInfoElements.at(1).text()).toBe('1.00 KiB');
   });
 
-  it('renders image diff for new', async () => {
+  it('renders image diff for new', () => {
     createComponent({ ...allProps, diffMode: 'new', oldPath: '' });
 
-    await nextTick();
-
-    const metaInfoElement = vm.$el.querySelector('.image-info');
-
-    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
-    expect(metaInfoElement).toHaveText('1.00 KiB');
+    expect(wrapper.find('.added img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL);
+    expect(wrapper.find('.image-info').text()).toBe('1.00 KiB');
   });
 
-  it('renders image diff for deleted', async () => {
+  it('renders image diff for deleted', () => {
     createComponent({ ...allProps, diffMode: 'deleted', newPath: '' });
 
-    await nextTick();
-
-    const metaInfoElement = vm.$el.querySelector('.image-info');
-
-    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
-    expect(metaInfoElement).toHaveText('2.00 KiB');
+    expect(wrapper.find('.deleted img').attributes('src')).toBe(RED_BOX_IMAGE_URL);
+    expect(wrapper.find('.image-info').text()).toBe('2.00 KiB');
   });
 
-  it('renders image diff for renamed', async () => {
-    vm = new Vue({
-      components: {
-        imageDiffViewer,
-      },
-      data() {
-        return {
-          ...allProps,
-          diffMode: 'renamed',
-        };
-      },
-      ...compileToFunctions(`
-        <image-diff-viewer
-          :diff-mode="diffMode"
-          :new-path="newPath"
-          :old-path="oldPath"
-          :new-size="newSize"
-          :old-size="oldSize"
-        >
-          <template #image-overlay>
-            <span class="overlay">test</span>
-          </template>
-        </image-diff-viewer>
-      `),
-    }).$mount();
-
-    await nextTick();
-
-    const metaInfoElement = vm.$el.querySelector('.image-info');
-
-    expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
-    expect(vm.$el.querySelector('.overlay')).not.toBe(null);
-
-    expect(metaInfoElement).toHaveText('2.00 KiB');
+  it('renders image diff for renamed', () => {
+    createComponent(
+      { ...allProps, diffMode: 'renamed' },
+      { 'image-overlay': '<span class="overlay">test</span>' },
+    );
+
+    expect(wrapper.find('img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL);
+    expect(wrapper.find('.overlay').exists()).toBe(true);
+    expect(wrapper.find('.image-info').text()).toBe('2.00 KiB');
   });
 
   describe('swipeMode', () => {
     beforeEach(() => {
-      createComponent({ ...requiredProps });
-
-      return nextTick();
+      createComponent(requiredProps);
     });
 
     it('switches to Swipe Mode', async () => {
-      vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click();
+      await wrapper.find('.view-modes-menu li:nth-child(2)').trigger('click');
 
-      await nextTick();
-      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('Swipe');
+      expect(wrapper.find('.view-modes-menu li.active').text()).toBe('Swipe');
     });
   });
 
   describe('onionSkin', () => {
     beforeEach(() => {
       createComponent({ ...requiredProps });
-
-      return nextTick();
     });
 
     it('switches to Onion Skin Mode', async () => {
-      vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
+      await wrapper.find('.view-modes-menu li:nth-child(3)').trigger('click');
 
-      await nextTick();
-      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe(
-        'Onion skin',
-      );
+      expect(wrapper.find('.view-modes-menu li.active').text()).toBe('Onion skin');
     });
 
     it('has working drag handler', async () => {
-      vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
+      await wrapper.find('.view-modes-menu li:nth-child(3)').trigger('click');
 
+      dragSlider(wrapper.find('.dragger').element, document, 20);
       await nextTick();
-      dragSlider(vm.$el.querySelector('.dragger'), document, 20);
 
-      await nextTick();
-      expect(vm.$el.querySelector('.dragger').style.left).toBe('20px');
-      expect(vm.$el.querySelector('.added.frame').style.opacity).toBe('0.2');
+      expect(wrapper.find('.dragger').attributes('style')).toBe('left: 20px;');
+      expect(wrapper.find('.added.frame').attributes('style')).toBe('opacity: 0.2;');
     });
   });
 });