diff options
Diffstat (limited to 'spec/frontend/diffs/components/tree_list_spec.js')
-rw-r--r-- | spec/frontend/diffs/components/tree_list_spec.js | 36 |
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); }); }); }); |