Merge branch 'master' into docs-patch-71docs-patch-71

8 files changed, 116 insertions, 261 deletions

diff --git a/spec/javascripts/vue_shared/components/changed_file_icon_spec.js b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
deleted file mode 100644
index 634ba8403d5..00000000000
--- a/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Vue from 'vue';
-import changedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
-import createComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('Changed file icon', () => {
-  let vm;
-
-  function factory(props = {}) {
-    const component = Vue.extend(changedFileIcon);
-
-    vm = createComponent(component, {
-      ...props,
-      file: {
-        tempFile: false,
-        changed: true,
-      },
-    });
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('centers icon', () => {
-    factory({
-      isCentered: true,
-    });
-
-    expect(vm.$el.classList).toContain('ml-auto');
-  });
-
-  describe('changedIcon', () => {
-    it('equals file-modified when not a temp file and has changes', () => {
-      factory();
-
-      expect(vm.changedIcon).toBe('file-modified');
-    });
-
-    it('equals file-addition when a temp file', () => {
-      factory();
-
-      vm.file.tempFile = true;
-
-      expect(vm.changedIcon).toBe('file-addition');
-    });
-  });
-
-  describe('changedIconClass', () => {
-    it('includes file-modified when not a temp file', () => {
-      factory();
-
-      expect(vm.changedIconClass).toContain('file-modified');
-    });
-
-    it('includes file-addition when a temp file', () => {
-      factory();
-
-      vm.file.tempFile = true;
-
-      expect(vm.changedIconClass).toContain('file-addition');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js
index 5bea8c43da3..1f61e19fa84 100644
--- a/spec/javascripts/vue_shared/components/file_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/file_icon_spec.js
@@ -72,7 +72,7 @@ describe('File Icon component', () => {
 
     const { classList } = vm.$el.querySelector('.loading-container span');
 
-    expect(classList.contains('spinner')).toEqual(true);
+    expect(classList.contains('gl-spinner')).toEqual(true);
   });
 
   it('should add a special class and a size class', () => {
diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js
index 7da69e3fa84..6abcac5c0ff 100644
--- a/spec/javascripts/vue_shared/components/file_row_spec.js
+++ b/spec/javascripts/vue_shared/components/file_row_spec.js
@@ -90,6 +90,19 @@ describe('File row component', () => {
     expect(vm.$el.querySelector('.js-file-row-header')).not.toBe(null);
   });
 
+  it('is not rendered for `moved` entries in subfolders', () => {
+    createComponent({
+      file: {
+        path: 't5',
+        moved: true,
+        tree: [],
+      },
+      level: 2,
+    });
+
+    expect(vm.$el.nodeType).not.toEqual(1);
+  });
+
   describe('new dropdown', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
index a9c1a67b39b..2b059e5e9f4 100644
--- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -88,7 +88,7 @@ describe('Header CI Component', () => {
       vm.actions[0].isLoading = true;
 
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.btn .spinner').getAttribute('style')).toBeFalsy();
+        expect(vm.$el.querySelector('.btn .gl-spinner').getAttribute('style')).toBeFalsy();
         done();
       });
     });
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
deleted file mode 100644
index d4be2451f0b..00000000000
--- a/spec/javascripts/vue_shared/components/markdown/header_spec.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import Vue from 'vue';
-import $ from 'jquery';
-import headerComponent from '~/vue_shared/components/markdown/header.vue';
-
-describe('Markdown field header component', () => {
-  let vm;
-
-  beforeEach(done => {
-    const Component = Vue.extend(headerComponent);
-
-    vm = new Component({
-      propsData: {
-        previewMarkdown: false,
-      },
-    }).$mount();
-
-    Vue.nextTick(done);
-  });
-
-  it('renders markdown header buttons', () => {
-    const buttons = [
-      'Add bold text',
-      'Add italic text',
-      'Insert a quote',
-      'Insert code',
-      'Add a link',
-      'Add a bullet list',
-      'Add a numbered list',
-      'Add a task list',
-      'Add a table',
-      'Insert suggestion',
-      'Go full screen',
-    ];
-    const elements = vm.$el.querySelectorAll('.toolbar-btn');
-
-    elements.forEach((buttonEl, index) => {
-      expect(buttonEl.getAttribute('data-original-title')).toBe(buttons[index]);
-    });
-  });
-
-  it('renders `write` link as active when previewMarkdown is false', () => {
-    expect(vm.$el.querySelector('li:nth-child(1)').classList.contains('active')).toBeTruthy();
-  });
-
-  it('renders `preview` link as active when previewMarkdown is true', done => {
-    vm.previewMarkdown = true;
-
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('li:nth-child(2)').classList.contains('active')).toBeTruthy();
-
-      done();
-    });
-  });
-
-  it('emits toggle markdown event when clicking preview', () => {
-    spyOn(vm, '$emit');
-
-    vm.$el.querySelector('.js-preview-link').click();
-
-    expect(vm.$emit).toHaveBeenCalledWith('preview-markdown');
-
-    vm.$el.querySelector('.js-write-link').click();
-
-    expect(vm.$emit).toHaveBeenCalledWith('write-markdown');
-  });
-
-  it('does not emit toggle markdown event when triggered from another form', () => {
-    spyOn(vm, '$emit');
-
-    $(document).triggerHandler('markdown-preview:show', [
-      $(
-        '<form><div class="js-vue-markdown-field"><textarea class="markdown-area"></textarea></div></form>',
-      ),
-    ]);
-
-    expect(vm.$emit).not.toHaveBeenCalled();
-  });
-
-  it('blurs preview link after click', done => {
-    const link = vm.$el.querySelector('li:nth-child(2) button');
-    spyOn(HTMLElement.prototype, 'blur');
-
-    link.click();
-
-    setTimeout(() => {
-      expect(link.blur).toHaveBeenCalled();
-
-      done();
-    });
-  });
-
-  it('renders markdown table template', () => {
-    expect(vm.mdTable).toEqual(
-      '| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |',
-    );
-  });
-
-  it('renders suggestion template', () => {
-    vm.lineContent = 'Some content';
-
-    expect(vm.mdSuggestion).toEqual('```suggestion:-0+0\n{text}\n```');
-  });
-
-  it('does not render suggestion button if `canSuggest` is set to false', () => {
-    vm.canSuggest = false;
-
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.qa-suggestion-btn')).toBe(null);
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
index ea74cb9eb21..dc929e83eb7 100644
--- a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -60,7 +60,7 @@ describe('Suggestion Diff component', () => {
 
   describe('init', () => {
     it('renders a suggestion header', () => {
-      expect(vm.$el.querySelector('.qa-suggestion-diff-header')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-suggestion-diff-header')).not.toBeNull();
     });
 
     it('renders a diff table with syntax highlighting', () => {
diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 42abb4d83f0..258530f32f7 100644
--- a/spec/javascripts/vue_shared/components/table_pagination_spec.js
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js
@@ -217,7 +217,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
+        expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next ›');
 
         component.$el.querySelector('.js-next-button .page-link').click();
 
@@ -237,7 +237,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
+        expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next ›');
 
         component.$el.querySelector('.js-next-button .page-link').click();
 
diff --git a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js
index 997d84dcc42..ad8d5a53291 100644
--- a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js
+++ b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js
@@ -1,68 +1,72 @@
-import { mountComponentWithRender } from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
 const TEST_TITLE = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do';
-const CLASS_SHOW_TOOLTIP = 'js-show-tooltip';
-const STYLE_TRUNCATED = {
-  display: 'inline-block',
-  'max-width': '20px',
-};
-const STYLE_NORMAL = {
-  display: 'inline-block',
-  'max-width': '1000px',
-};
-
-function mountTooltipOnTruncate(options, createChildren) {
-  return mountComponentWithRender(h => h(TooltipOnTruncate, options, createChildren(h)), '#app');
-}
+const STYLE_TRUNCATED = 'display: inline-block; max-width: 20px;';
+const STYLE_NORMAL = 'display: inline-block; max-width: 1000px;';
 
-describe('TooltipOnTruncate component', () => {
-  let vm;
+const localVue = createLocalVue();
 
-  beforeEach(() => {
-    const el = document.createElement('div');
-    el.id = 'app';
-    document.body.appendChild(el);
-  });
+const createElementWithStyle = (style, content) => `<a href="#" style="${style}">${content}</a>`;
+
+describe('TooltipOnTruncate component', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData, ...options } = {}) => {
+    wrapper = shallowMount(localVue.extend(TooltipOnTruncate), {
+      localVue,
+      sync: false,
+      attachToDocument: true,
+      propsData: {
+        title: TEST_TITLE,
+        ...propsData,
+      },
+      ...options,
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
+  const hasTooltip = () => wrapper.classes('js-show-tooltip');
+
   describe('with default target', () => {
     it('renders tooltip if truncated', done => {
-      const options = {
-        style: STYLE_TRUNCATED,
-        props: {
-          title: TEST_TITLE,
+      createComponent({
+        attrs: {
+          style: STYLE_TRUNCATED,
         },
-      };
-
-      vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]);
+        slots: {
+          default: [TEST_TITLE],
+        },
+      });
 
-      vm.$nextTick()
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
-          expect(vm.$el).toHaveData('original-title', TEST_TITLE);
-          expect(vm.$el).toHaveData('placement', 'top');
+          expect(hasTooltip()).toBe(true);
+          expect(wrapper.attributes('data-original-title')).toEqual(TEST_TITLE);
+          expect(wrapper.attributes('data-placement')).toEqual('top');
         })
         .then(done)
         .catch(done.fail);
     });
 
     it('does not render tooltip if normal', done => {
-      const options = {
-        style: STYLE_NORMAL,
-        props: {
-          title: TEST_TITLE,
+      createComponent({
+        attrs: {
+          style: STYLE_NORMAL,
         },
-      };
-
-      vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]);
+        slots: {
+          default: [TEST_TITLE],
+        },
+      });
 
-      vm.$nextTick()
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP);
+          expect(hasTooltip()).toBe(false);
         })
         .then(done)
         .catch(done.fail);
@@ -71,37 +75,41 @@ describe('TooltipOnTruncate component', () => {
 
   describe('with child target', () => {
     it('renders tooltip if truncated', done => {
-      const options = {
-        style: STYLE_NORMAL,
-        props: {
-          title: TEST_TITLE,
+      createComponent({
+        attrs: {
+          style: STYLE_NORMAL,
+        },
+        propsData: {
           truncateTarget: 'child',
         },
-      };
-
-      vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]);
+        slots: {
+          default: createElementWithStyle(STYLE_TRUNCATED, TEST_TITLE),
+        },
+      });
 
-      vm.$nextTick()
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
+          expect(hasTooltip()).toBe(true);
         })
         .then(done)
         .catch(done.fail);
     });
 
     it('does not render tooltip if normal', done => {
-      const options = {
-        props: {
-          title: TEST_TITLE,
+      createComponent({
+        propsData: {
           truncateTarget: 'child',
         },
-      };
-
-      vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_NORMAL }, TEST_TITLE)]);
+        slots: {
+          default: createElementWithStyle(STYLE_NORMAL, TEST_TITLE),
+        },
+      });
 
-      vm.$nextTick()
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP);
+          expect(hasTooltip()).toBe(false);
         })
         .then(done)
         .catch(done.fail);
@@ -110,22 +118,25 @@ describe('TooltipOnTruncate component', () => {
 
   describe('with fn target', () => {
     it('renders tooltip if truncated', done => {
-      const options = {
-        style: STYLE_NORMAL,
-        props: {
-          title: TEST_TITLE,
+      createComponent({
+        attrs: {
+          style: STYLE_NORMAL,
+        },
+        propsData: {
           truncateTarget: el => el.childNodes[1],
         },
-      };
-
-      vm = mountTooltipOnTruncate(options, h => [
-        h('a', { style: STYLE_NORMAL }, TEST_TITLE),
-        h('span', { style: STYLE_TRUNCATED }, TEST_TITLE),
-      ]);
+        slots: {
+          default: [
+            createElementWithStyle('', TEST_TITLE),
+            createElementWithStyle(STYLE_TRUNCATED, TEST_TITLE),
+          ],
+        },
+      });
 
-      vm.$nextTick()
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
+          expect(hasTooltip()).toBe(true);
         })
         .then(done)
         .catch(done.fail);
@@ -134,20 +145,25 @@ describe('TooltipOnTruncate component', () => {
 
   describe('placement', () => {
     it('sets data-placement when tooltip is rendered', done => {
-      const options = {
-        props: {
-          title: TEST_TITLE,
-          truncateTarget: 'child',
-          placement: 'bottom',
-        },
-      };
+      const placement = 'bottom';
 
-      vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]);
+      createComponent({
+        propsData: {
+          placement,
+        },
+        attrs: {
+          style: STYLE_TRUNCATED,
+        },
+        slots: {
+          default: TEST_TITLE,
+        },
+      });
 
-      vm.$nextTick()
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
-          expect(vm.$el).toHaveData('placement', options.props.placement);
+          expect(hasTooltip()).toBe(true);
+          expect(wrapper.attributes('data-placement')).toEqual(placement);
         })
         .then(done)
         .catch(done.fail);