diff options
Diffstat (limited to 'spec/frontend/diffs/components/tree_list_spec.js')
-rw-r--r-- | spec/frontend/diffs/components/tree_list_spec.js | 83 |
1 files changed, 41 insertions, 42 deletions
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js index 1656eaf8ba0..87c638d065a 100644 --- a/spec/frontend/diffs/components/tree_list_spec.js +++ b/spec/frontend/diffs/components/tree_list_spec.js @@ -1,20 +1,36 @@ -import { shallowMount, mount } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import TreeList from '~/diffs/components/tree_list.vue'; import createStore from '~/diffs/store/modules'; -import FileTree from '~/vue_shared/components/file_tree.vue'; +import DiffFileRow from '~/diffs/components//diff_file_row.vue'; +import { stubComponent } from 'helpers/stub_component'; describe('Diffs tree list component', () => { let wrapper; let store; - const getFileRows = () => wrapper.findAll('.file-row'); + const getScroller = () => wrapper.findComponent({ name: 'RecycleScroller' }); + const getFileRow = () => wrapper.findComponent(DiffFileRow); Vue.use(Vuex); - const createComponent = (mountFn = mount) => { - wrapper = mountFn(TreeList, { + const createComponent = () => { + wrapper = shallowMount(TreeList, { store, propsData: { hideFileStats: false }, + stubs: { + // eslint will fail if we import the real component + RecycleScroller: stubComponent( + { + name: 'RecycleScroller', + props: { + items: null, + }, + }, + { + template: '<div><slot :item="{ tree: [] }"></slot></div>', + }, + ), + }, }); }; @@ -80,10 +96,6 @@ describe('Diffs tree list component', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - describe('default', () => { beforeEach(() => { createComponent(); @@ -101,26 +113,32 @@ 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'); + + await nextTick(); + + expect(getScroller().exists()).toBe(false); + expect(wrapper.text()).toContain('No files found'); + }); + it.each` extension | itemSize - ${'*.md'} | ${0} - ${'*.js'} | ${1} - ${'index.js'} | ${1} - ${'app/*.js'} | ${1} - ${'*.js, *.rb'} | ${2} + ${'*.js'} | ${2} + ${'index.js'} | ${2} + ${'app/*.js'} | ${2} + ${'*.js, *.rb'} | ${3} `('returns $itemSize item for $extension', async ({ extension, itemSize }) => { wrapper.find('[data-testid="diff-tree-search"]').setValue(extension); await nextTick(); - expect(getFileRows()).toHaveLength(itemSize); + expect(getScroller().props('items')).toHaveLength(itemSize); }); }); it('renders tree', () => { - expect(getFileRows()).toHaveLength(2); - expect(getFileRows().at(0).html()).toContain('index.js'); - expect(getFileRows().at(1).html()).toContain('app'); + expect(getScroller().props('items')).toHaveLength(2); }); it('hides file stats', async () => { @@ -133,33 +151,16 @@ describe('Diffs tree list component', () => { it('calls toggleTreeOpen when clicking folder', () => { jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined); - getFileRows().at(1).trigger('click'); + getFileRow().vm.$emit('toggleTreeOpen', 'app'); expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app'); }); - it('calls scrollToFile when clicking blob', () => { - jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined); - - wrapper.find('.file-row').trigger('click'); - - expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', { - path: 'app/index.js', - }); - }); - - it('renders as file list when renderTreeList is false', async () => { - wrapper.vm.$store.state.diffs.renderTreeList = false; - - await nextTick(); - expect(getFileRows()).toHaveLength(2); - }); - - it('renders file paths when renderTreeList is false', async () => { + it('renders when renderTreeList is false', async () => { wrapper.vm.$store.state.diffs.renderTreeList = false; await nextTick(); - expect(wrapper.find('.file-row').html()).toContain('index.js'); + expect(getScroller().props('items')).toHaveLength(3); }); }); @@ -172,12 +173,10 @@ describe('Diffs tree list component', () => { }); it('passes the viewedDiffFileIds to the FileTree', async () => { - createComponent(shallowMount); + createComponent(); await nextTick(); - // Have to use $attrs['viewed-files'] because we are passing down an object - // and attributes('') stringifies values (e.g. [object])... - expect(wrapper.findComponent(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds); + expect(wrapper.findComponent(DiffFileRow).props('viewedFiles')).toBe(viewedDiffFileIds); }); }); }); |