diff options
Diffstat (limited to 'spec/javascripts/diffs/components/diff_file_header_spec.js')
| -rw-r--r-- | spec/javascripts/diffs/components/diff_file_header_spec.js | 144 |
1 files changed, 75 insertions, 69 deletions
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js index 05f5d47ce42..0f3a95da5bf 100644 --- a/spec/javascripts/diffs/components/diff_file_header_spec.js +++ b/spec/javascripts/diffs/components/diff_file_header_spec.js @@ -1,7 +1,10 @@ import Vue from 'vue'; +import Vuex from 'vuex'; +import diffsModule from '~/diffs/store/modules'; +import notesModule from '~/notes/stores/modules'; import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; const discussionFixture = 'merge_requests/diff_discussion.json'; @@ -9,6 +12,12 @@ describe('diff_file_header', () => { let vm; let props; const Component = Vue.extend(DiffFileHeader); + const store = new Vuex.Store({ + modules: { + diffs: diffsModule, + notes: notesModule, + }, + }); beforeEach(() => { const diffDiscussionMock = getJSONFixture(discussionFixture)[0]; @@ -26,13 +35,13 @@ describe('diff_file_header', () => { describe('computed', () => { describe('icon', () => { beforeEach(() => { - props.diffFile.blob.icon = 'dummy icon'; + props.diffFile.blob.icon = 'file-text-o'; }); it('returns the blob icon for files', () => { props.diffFile.submodule = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.icon).toBe(props.diffFile.blob.icon); }); @@ -40,7 +49,7 @@ describe('diff_file_header', () => { it('returns the archive icon for submodules', () => { props.diffFile.submodule = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.icon).toBe('archive'); }); @@ -58,7 +67,7 @@ describe('diff_file_header', () => { it('returns the fileHash for files', () => { props.diffFile.submodule = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.titleLink).toBe(`#${props.diffFile.fileHash}`); }); @@ -66,7 +75,7 @@ describe('diff_file_header', () => { it('returns the submoduleTreeUrl for submodules', () => { props.diffFile.submodule = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.titleLink).toBe(props.diffFile.submoduleTreeUrl); }); @@ -77,7 +86,7 @@ describe('diff_file_header', () => { submoduleTreeUrl: null, }); - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.titleLink).toBe(props.diffFile.submoduleLink); }); @@ -94,7 +103,7 @@ describe('diff_file_header', () => { it('returns the filePath for files', () => { props.diffFile.submodule = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.filePath).toBe(props.diffFile.filePath); }); @@ -102,7 +111,7 @@ describe('diff_file_header', () => { it('appends the truncated blob id for submodules', () => { props.diffFile.submodule = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.filePath).toBe( `${props.diffFile.filePath} @ ${props.diffFile.blob.id.substr(0, 8)}`, @@ -114,7 +123,7 @@ describe('diff_file_header', () => { it('returns a link tag if fileHash is set', () => { props.diffFile.fileHash = 'some hash'; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.titleTag).toBe('a'); }); @@ -122,7 +131,7 @@ describe('diff_file_header', () => { it('returns a span tag if fileHash is not set', () => { props.diffFile.fileHash = null; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.titleTag).toBe('span'); }); @@ -137,7 +146,7 @@ describe('diff_file_header', () => { }); it('returns true if file is stored in LFS', () => { - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.isUsingLfs).toBe(true); }); @@ -145,7 +154,7 @@ describe('diff_file_header', () => { it('returns false if file is not stored externally', () => { props.diffFile.storedExternally = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.isUsingLfs).toBe(false); }); @@ -153,7 +162,7 @@ describe('diff_file_header', () => { it('returns false if file is not stored in LFS', () => { props.diffFile.externalStorage = 'not lfs'; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.isUsingLfs).toBe(false); }); @@ -163,7 +172,7 @@ describe('diff_file_header', () => { it('returns chevron-down if the diff is expanded', () => { props.expanded = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.collapseIcon).toBe('chevron-down'); }); @@ -171,49 +180,18 @@ describe('diff_file_header', () => { it('returns chevron-right if the diff is collapsed', () => { props.expanded = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.collapseIcon).toBe('chevron-right'); }); }); - describe('isDiscussionsExpanded', () => { - beforeEach(() => { - Object.assign(props, { - discussionsExpanded: true, - expanded: true, - }); - }); - - it('returns true if diff and discussion are expanded', () => { - vm = mountComponent(Component, props); - - expect(vm.isDiscussionsExpanded).toBe(true); - }); - - it('returns false if discussion is collapsed', () => { - props.discussionsExpanded = false; - - vm = mountComponent(Component, props); - - expect(vm.isDiscussionsExpanded).toBe(false); - }); - - it('returns false if diff is collapsed', () => { - props.expanded = false; - - vm = mountComponent(Component, props); - - expect(vm.isDiscussionsExpanded).toBe(false); - }); - }); - describe('viewFileButtonText', () => { it('contains the truncated content SHA', () => { const dummySha = 'deebd00f is no SHA'; props.diffFile.contentSha = dummySha; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.viewFileButtonText).not.toContain(dummySha); expect(vm.viewFileButtonText).toContain(dummySha.substr(0, 8)); @@ -225,7 +203,7 @@ describe('diff_file_header', () => { const dummySha = 'deadabba sings no more'; props.diffFile.diffRefs.baseSha = dummySha; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.viewReplacedFileButtonText).not.toContain(dummySha); expect(vm.viewReplacedFileButtonText).toContain(dummySha.substr(0, 8)); @@ -234,25 +212,25 @@ describe('diff_file_header', () => { }); describe('methods', () => { - describe('handleToggle', () => { + describe('handleToggleFile', () => { beforeEach(() => { spyOn(vm, '$emit').and.stub(); }); it('emits toggleFile if checkTarget is false', () => { - vm.handleToggle(null, false); + vm.handleToggleFile(null, false); expect(vm.$emit).toHaveBeenCalledWith('toggleFile'); }); it('emits toggleFile if checkTarget is true and event target is header', () => { - vm.handleToggle({ target: vm.$refs.header }, true); + vm.handleToggleFile({ target: vm.$refs.header }, true); expect(vm.$emit).toHaveBeenCalledWith('toggleFile'); }); it('does not emit toggleFile if checkTarget is true and event target is not header', () => { - vm.handleToggle({ target: 'not header' }, true); + vm.handleToggleFile({ target: 'not header' }, true); expect(vm.$emit).not.toHaveBeenCalled(); }); @@ -266,7 +244,7 @@ describe('diff_file_header', () => { it('is visible if collapsible is true', () => { props.collapsible = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(collapseToggle()).not.toBe(null); }); @@ -274,14 +252,14 @@ describe('diff_file_header', () => { it('is hidden if collapsible is false', () => { props.collapsible = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(collapseToggle()).toBe(null); }); }); it('displays an file icon in the title', () => { - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.$el.querySelector('svg.js-file-icon use').getAttribute('xlink:href')).toContain( 'ruby', ); @@ -293,7 +271,7 @@ describe('diff_file_header', () => { it('displays the path of a added file', () => { props.diffFile.renamedFile = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(filePaths()).toHaveLength(1); expect(filePaths()[0]).toHaveText(props.diffFile.filePath); @@ -303,7 +281,7 @@ describe('diff_file_header', () => { props.diffFile.renamedFile = false; props.diffFile.deletedFile = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(filePaths()).toHaveLength(1); expect(filePaths()[0]).toHaveText(`${props.diffFile.filePath} deleted`); @@ -312,7 +290,7 @@ describe('diff_file_header', () => { it('displays old and new path if the file was renamed', () => { props.diffFile.renamedFile = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(filePaths()).toHaveLength(2); expect(filePaths()[0]).toHaveText(props.diffFile.oldPath); @@ -321,7 +299,7 @@ describe('diff_file_header', () => { }); it('displays a copy to clipboard button', () => { - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); const button = vm.$el.querySelector('.btn-clipboard'); expect(button).not.toBe(null); @@ -332,7 +310,7 @@ describe('diff_file_header', () => { it('it displays old and new file mode if it changed', () => { props.diffFile.modeChanged = true; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); const { fileMode } = vm.$refs; expect(fileMode).not.toBe(undefined); @@ -343,7 +321,7 @@ describe('diff_file_header', () => { it('does not display the file mode if it has not changed', () => { props.diffFile.modeChanged = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); const { fileMode } = vm.$refs; expect(fileMode).toBe(undefined); @@ -359,7 +337,7 @@ describe('diff_file_header', () => { externalStorage: 'lfs', }); - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(lfsLabel()).not.toBe(null); expect(lfsLabel()).toHaveText('LFS'); @@ -368,7 +346,7 @@ describe('diff_file_header', () => { it('does not display the LFS label for files stored in repository', () => { props.diffFile.storedExternally = false; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(lfsLabel()).toBe(null); }); @@ -376,7 +354,7 @@ describe('diff_file_header', () => { describe('edit button', () => { it('should not render edit button if addMergeRequestButtons is not true', () => { - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.$el.querySelector('.js-edit-blob')).toEqual(null); }); @@ -384,7 +362,7 @@ describe('diff_file_header', () => { it('should show edit button when file is editable', () => { props.addMergeRequestButtons = true; props.diffFile.editPath = '/'; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.$el.querySelector('.js-edit-blob')).toContainText('Edit'); }); @@ -393,7 +371,7 @@ describe('diff_file_header', () => { props.addMergeRequestButtons = true; props.diffFile.deletedFile = true; props.diffFile.editPath = '/'; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.$el.querySelector('.js-edit-blob')).toEqual(null); }); @@ -413,7 +391,7 @@ describe('diff_file_header', () => { props.diffFile.externalUrl = url; props.diffFile.formattedExternalUrl = title; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.$el.querySelector(`a[href="${url}"]`)).not.toBe(null); expect(vm.$el.querySelector(`a[data-original-title="View on ${title}"]`)).not.toBe(null); @@ -423,11 +401,39 @@ describe('diff_file_header', () => { props.diffFile.externalUrl = ''; props.diffFile.formattedExternalUrl = title; - vm = mountComponent(Component, props); + vm = mountComponentWithStore(Component, { props, store }); expect(vm.$el.querySelector(`a[data-original-title="View on ${title}"]`)).toBe(null); }); }); }); + + describe('handles toggle discussions', () => { + it('dispatches toggleFileDiscussions when user clicks on toggle discussions button', () => { + const propsCopy = Object.assign({}, props); + propsCopy.diffFile.submodule = false; + propsCopy.diffFile.blob = { + id: '848ed9407c6730ff16edb3dd24485a0eea24292a', + path: 'lib/base.js', + name: 'base.js', + mode: '100644', + readableText: true, + icon: 'file-text-o', + }; + propsCopy.addMergeRequestButtons = true; + propsCopy.diffFile.deletedFile = true; + + vm = mountComponentWithStore(Component, { + props: propsCopy, + store, + }); + + spyOn(vm, 'toggleFileDiscussions'); + + vm.$el.querySelector('.js-btn-vue-toggle-comments').click(); + + expect(vm.toggleFileDiscussions).toHaveBeenCalled(); + }); + }); }); }); |