1 files changed, 21 insertions, 15 deletions

diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index 1ec8547d325..f56dd28ce9c 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -1,4 +1,3 @@
-import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import TreeList from '~/diffs/components/tree_list.vue';
@@ -6,18 +5,21 @@ import createStore from '~/diffs/store/modules';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import DiffFileRow from '~/diffs/components//diff_file_row.vue';
 import { stubComponent } from 'helpers/stub_component';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('Diffs tree list component', () => {
   let wrapper;
   let store;
   const getScroller = () => wrapper.findComponent({ name: 'RecycleScroller' });
   const getFileRow = () => wrapper.findComponent(DiffFileRow);
+  const findDiffTreeSearch = () => wrapper.findByTestId('diff-tree-search');
+
   Vue.use(Vuex);
 
-  const createComponent = () => {
-    wrapper = shallowMount(TreeList, {
+  const createComponent = ({ hideFileStats = false } = {}) => {
+    wrapper = shallowMountExtended(TreeList, {
       store,
-      propsData: { hideFileStats: false },
+      propsData: { hideFileStats },
       stubs: {
         // eslint will fail if we import the real component
         RecycleScroller: stubComponent(
@@ -116,7 +118,10 @@ describe('Diffs tree list component', () => {
 
     describe('search by file extension', () => {
       it('hides scroller for no matches', async () => {
-        wrapper.find('[data-testid="diff-tree-search"]').setValue('*.md');
+        const input = findDiffTreeSearch();
+
+        input.element.value = '*.md';
+        input.trigger('input');
 
         await nextTick();
 
@@ -131,7 +136,10 @@ describe('Diffs tree list component', () => {
         ${'app/*.js'}   | ${2}
         ${'*.js, *.rb'} | ${3}
       `('returns $itemSize item for $extension', async ({ extension, itemSize }) => {
-        wrapper.find('[data-testid="diff-tree-search"]').setValue(extension);
+        const input = findDiffTreeSearch();
+
+        input.element.value = extension;
+        input.trigger('input');
 
         await nextTick();
 
@@ -143,23 +151,21 @@ describe('Diffs tree list component', () => {
       expect(getScroller().props('items')).toHaveLength(2);
     });
 
-    it('hides file stats', async () => {
-      wrapper.setProps({ hideFileStats: true });
-
-      await nextTick();
-      expect(wrapper.find('.file-row-stats').exists()).toBe(false);
+    it('hides file stats', () => {
+      createComponent({ hideFileStats: true });
+      expect(getFileRow().props('hideFileStats')).toBe(true);
     });
 
     it('calls toggleTreeOpen when clicking folder', () => {
-      jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
+      jest.spyOn(store, 'dispatch').mockReturnValue(undefined);
 
       getFileRow().vm.$emit('toggleTreeOpen', 'app');
 
-      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
     });
 
     it('renders when renderTreeList is false', async () => {
-      wrapper.vm.$store.state.diffs.renderTreeList = false;
+      store.state.diffs.renderTreeList = false;
 
       await nextTick();
       expect(getScroller().props('items')).toHaveLength(3);
@@ -178,7 +184,7 @@ describe('Diffs tree list component', () => {
       createComponent();
 
       await nextTick();
-      expect(wrapper.findComponent(DiffFileRow).props('viewedFiles')).toBe(viewedDiffFileIds);
+      expect(getFileRow().props('viewedFiles')).toBe(viewedDiffFileIds);
     });
   });
 });