1 files changed, 25 insertions, 28 deletions

diff --git a/spec/frontend/diffs/components/diff_expansion_cell_spec.js b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
index a3b4b5c3abb..62e85b31f76 100644
--- a/spec/frontend/diffs/components/diff_expansion_cell_spec.js
+++ b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
@@ -1,6 +1,5 @@
-import Vue from 'vue';
 import { cloneDeep } from 'lodash';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { getByText } from '@testing-library/dom';
 import { createStore } from '~/mr_notes/stores';
 import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
@@ -14,7 +13,7 @@ const lineSources = {
   [INLINE_DIFF_VIEW_TYPE]: 'highlighted_diff_lines',
 };
 const lineHandlers = {
-  [INLINE_DIFF_VIEW_TYPE]: line => line,
+  [INLINE_DIFF_VIEW_TYPE]: (line) => line,
 };
 
 function makeLoadMoreLinesPayload({
@@ -59,7 +58,6 @@ describe('DiffExpansionCell', () => {
   let mockFile;
   let mockLine;
   let store;
-  let vm;
 
   beforeEach(() => {
     mockFile = cloneDeep(diffFileMockData);
@@ -70,7 +68,6 @@ describe('DiffExpansionCell', () => {
   });
 
   const createComponent = (options = {}) => {
-    const cmp = Vue.extend(DiffExpansionCell);
     const defaults = {
       fileHash: mockFile.file_hash,
       contextLinesPath: 'contextLinesPath',
@@ -78,46 +75,46 @@ describe('DiffExpansionCell', () => {
       isTop: false,
       isBottom: false,
     };
-    const props = { ...defaults, ...options };
+    const propsData = { ...defaults, ...options };
 
-    vm = createComponentWithStore(cmp, store, props).$mount();
+    return mount(DiffExpansionCell, { store, propsData });
   };
 
-  const findExpandUp = () => vm.$el.querySelector(EXPAND_UP_CLASS);
-  const findExpandDown = () => vm.$el.querySelector(EXPAND_DOWN_CLASS);
-  const findExpandAll = () => getByText(vm.$el, 'Show all unchanged lines');
+  const findExpandUp = (wrapper) => wrapper.find(EXPAND_UP_CLASS);
+  const findExpandDown = (wrapper) => wrapper.find(EXPAND_DOWN_CLASS);
+  const findExpandAll = ({ element }) => getByText(element, 'Show all unchanged lines');
 
   describe('top row', () => {
     it('should have "expand up" and "show all" option', () => {
-      createComponent({
+      const wrapper = createComponent({
         isTop: true,
       });
 
-      expect(findExpandUp()).not.toBe(null);
-      expect(findExpandDown()).toBe(null);
-      expect(findExpandAll()).not.toBe(null);
+      expect(findExpandUp(wrapper).exists()).toBe(true);
+      expect(findExpandDown(wrapper).exists()).toBe(false);
+      expect(findExpandAll(wrapper)).not.toBe(null);
     });
   });
 
   describe('middle row', () => {
     it('should have "expand down", "show all", "expand up" option', () => {
-      createComponent();
+      const wrapper = createComponent();
 
-      expect(findExpandUp()).not.toBe(null);
-      expect(findExpandDown()).not.toBe(null);
-      expect(findExpandAll()).not.toBe(null);
+      expect(findExpandUp(wrapper).exists()).toBe(true);
+      expect(findExpandDown(wrapper).exists()).toBe(true);
+      expect(findExpandAll(wrapper)).not.toBe(null);
     });
   });
 
   describe('bottom row', () => {
     it('should have "expand down" and "show all" option', () => {
-      createComponent({
+      const wrapper = createComponent({
         isBottom: true,
       });
 
-      expect(findExpandUp()).toBe(null);
-      expect(findExpandDown()).not.toBe(null);
-      expect(findExpandAll()).not.toBe(null);
+      expect(findExpandUp(wrapper).exists()).toBe(false);
+      expect(findExpandDown(wrapper).exists()).toBe(true);
+      expect(findExpandAll(wrapper)).not.toBe(null);
     });
   });
 
@@ -144,9 +141,9 @@ describe('DiffExpansionCell', () => {
             newLineNumber,
           });
 
-          createComponent();
+          const wrapper = createComponent();
 
-          findExpandAll().click();
+          findExpandAll(wrapper).click();
 
           expect(store.dispatch).toHaveBeenCalledWith(
             'diffs/loadMoreLines',
@@ -167,9 +164,9 @@ describe('DiffExpansionCell', () => {
           const oldLineNumber = mockLine.meta_data.old_pos;
           const newLineNumber = mockLine.meta_data.new_pos;
 
-          createComponent();
+          const wrapper = createComponent();
 
-          findExpandUp().click();
+          findExpandUp(wrapper).trigger('click');
 
           expect(store.dispatch).toHaveBeenCalledWith(
             'diffs/loadMoreLines',
@@ -195,9 +192,9 @@ describe('DiffExpansionCell', () => {
           mockLine.meta_data.old_pos = 200;
           mockLine.meta_data.new_pos = 200;
 
-          createComponent();
+          const wrapper = createComponent();
 
-          findExpandDown().click();
+          findExpandDown(wrapper).trigger('click');
 
           expect(store.dispatch).toHaveBeenCalledWith('diffs/loadMoreLines', {
             endpoint: 'contextLinesPath',