diff options
Diffstat (limited to 'spec/frontend/diffs/components/app_spec.js')
| -rw-r--r-- | spec/frontend/diffs/components/app_spec.js | 198 |
1 files changed, 65 insertions, 133 deletions
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js index 225710eab63..416564b72c3 100644 --- a/spec/frontend/diffs/components/app_spec.js +++ b/spec/frontend/diffs/components/app_spec.js @@ -12,16 +12,19 @@ import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue'; import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue'; import CommitWidget from '~/diffs/components/commit_widget.vue'; import TreeList from '~/diffs/components/tree_list.vue'; -import { INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '~/diffs/constants'; import createDiffsStore from '../create_diffs_store'; import axios from '~/lib/utils/axios_utils'; import * as urlUtils from '~/lib/utils/url_utility'; import diffsMockData from '../mock_data/merge_request_diffs'; +import { EVT_VIEW_FILE_BY_FILE } from '~/diffs/constants'; + +import eventHub from '~/diffs/event_hub'; + const mergeRequestDiff = { version_index: 1 }; const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`; -const COMMIT_URL = '[BASE URL]/OLD'; -const UPDATED_COMMIT_URL = '[BASE URL]/NEW'; +const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`; +const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`; function getCollapsedFilesWarning(wrapper) { return wrapper.find(CollapsedFilesWarning); @@ -62,7 +65,7 @@ describe('diffs/components/app', () => { changesEmptyStateIllustration: '', dismissEndpoint: '', showSuggestPopover: true, - viewDiffsFileByFile: false, + fileByFileUserPreference: false, ...props, }, provide, @@ -75,12 +78,6 @@ describe('diffs/components/app', () => { }); } - function getOppositeViewType(currentViewType) { - return currentViewType === INLINE_DIFF_VIEW_TYPE - ? PARALLEL_DIFF_VIEW_TYPE - : INLINE_DIFF_VIEW_TYPE; - } - beforeEach(() => { // setup globals (needed for component to mount :/) window.mrTabs = { @@ -125,104 +122,6 @@ describe('diffs/components/app', () => { wrapper.vm.$nextTick(done); }); - describe('when the diff view type changes and it should load a single diff view style', () => { - const noLinesDiff = { - highlighted_diff_lines: [], - parallel_diff_lines: [], - }; - const parallelLinesDiff = { - highlighted_diff_lines: [], - parallel_diff_lines: ['line'], - }; - const inlineLinesDiff = { - highlighted_diff_lines: ['line'], - parallel_diff_lines: [], - }; - const fullDiff = { - highlighted_diff_lines: ['line'], - parallel_diff_lines: ['line'], - }; - - function expectFetchToOccur({ vueInstance, done = () => {}, existingFiles = 1 } = {}) { - vueInstance.$nextTick(() => { - expect(vueInstance.diffFiles.length).toEqual(existingFiles); - expect(vueInstance.fetchDiffFilesBatch).toHaveBeenCalled(); - - done(); - }); - } - - it('fetches diffs if it has none', done => { - wrapper.vm.isLatestVersion = () => false; - - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, existingFiles: 0, done }); - }); - - it('fetches diffs if it has both view styles, but no lines in either', done => { - wrapper.vm.isLatestVersion = () => false; - - store.state.diffs.diffFiles.push(noLinesDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, done }); - }); - - it('fetches diffs if it only has inline view style', done => { - wrapper.vm.isLatestVersion = () => false; - - store.state.diffs.diffFiles.push(inlineLinesDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, done }); - }); - - it('fetches diffs if it only has parallel view style', done => { - wrapper.vm.isLatestVersion = () => false; - - store.state.diffs.diffFiles.push(parallelLinesDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, done }); - }); - - it('fetches batch diffs if it has none', done => { - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, existingFiles: 0, done }); - }); - - it('fetches batch diffs if it has both view styles, but no lines in either', done => { - store.state.diffs.diffFiles.push(noLinesDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, done }); - }); - - it('fetches batch diffs if it only has inline view style', done => { - store.state.diffs.diffFiles.push(inlineLinesDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, done }); - }); - - it('fetches batch diffs if it only has parallel view style', done => { - store.state.diffs.diffFiles.push(parallelLinesDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expectFetchToOccur({ vueInstance: wrapper.vm, done }); - }); - - it('does not fetch batch diffs if it has already fetched both styles of diff', () => { - store.state.diffs.diffFiles.push(fullDiff); - store.state.diffs.diffViewType = getOppositeViewType(wrapper.vm.diffViewType); - - expect(wrapper.vm.diffFiles.length).toEqual(1); - expect(wrapper.vm.fetchDiffFilesBatch).not.toHaveBeenCalled(); - }); - }); - it('calls batch methods if diffsBatchLoad is enabled, and not latest version', done => { expect(wrapper.vm.diffFilesLength).toEqual(0); wrapper.vm.isLatestVersion = () => false; @@ -743,70 +642,76 @@ describe('diffs/components/app', () => { }); }); - describe('hideTreeListIfJustOneFile', () => { - let toggleShowTreeList; + describe('setTreeDisplay', () => { + let setShowTreeList; beforeEach(() => { - toggleShowTreeList = jest.fn(); + setShowTreeList = jest.fn(); }); afterEach(() => { localStorage.removeItem('mr_tree_show'); }); - it('calls toggleShowTreeList when only 1 file', () => { + it('calls setShowTreeList when only 1 file', () => { createComponent({}, ({ state }) => { state.diffs.diffFiles.push({ sha: '123' }); }); wrapper.setMethods({ - toggleShowTreeList, + setShowTreeList, }); - wrapper.vm.hideTreeListIfJustOneFile(); + wrapper.vm.setTreeDisplay(); - expect(toggleShowTreeList).toHaveBeenCalledWith(false); + expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList: false, saving: false }); }); - it('does not call toggleShowTreeList when more than 1 file', () => { + it('calls setShowTreeList with true when more than 1 file is in diffs array', () => { createComponent({}, ({ state }) => { state.diffs.diffFiles.push({ sha: '123' }); state.diffs.diffFiles.push({ sha: '124' }); }); wrapper.setMethods({ - toggleShowTreeList, + setShowTreeList, }); - wrapper.vm.hideTreeListIfJustOneFile(); + wrapper.vm.setTreeDisplay(); - expect(toggleShowTreeList).not.toHaveBeenCalled(); + expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList: true, saving: false }); }); - it('does not call toggleShowTreeList when localStorage is set', () => { - localStorage.setItem('mr_tree_show', 'true'); + it.each` + showTreeList + ${true} + ${false} + `('calls setShowTreeList with localstorage $showTreeList', ({ showTreeList }) => { + localStorage.setItem('mr_tree_show', showTreeList); createComponent({}, ({ state }) => { state.diffs.diffFiles.push({ sha: '123' }); }); wrapper.setMethods({ - toggleShowTreeList, + setShowTreeList, }); - wrapper.vm.hideTreeListIfJustOneFile(); + wrapper.vm.setTreeDisplay(); - expect(toggleShowTreeList).not.toHaveBeenCalled(); + expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList, saving: false }); }); }); describe('file-by-file', () => { - it('renders a single diff', () => { - createComponent({ viewDiffsFileByFile: true }, ({ state }) => { + it('renders a single diff', async () => { + createComponent({ fileByFileUserPreference: true }, ({ state }) => { state.diffs.diffFiles.push({ file_hash: '123' }); state.diffs.diffFiles.push({ file_hash: '312' }); }); + await wrapper.vm.$nextTick(); + expect(wrapper.findAll(DiffFile).length).toBe(1); }); @@ -814,31 +719,37 @@ describe('diffs/components/app', () => { const fileByFileNav = () => wrapper.find('[data-testid="file-by-file-navigation"]'); const paginator = () => fileByFileNav().find(GlPagination); - it('sets previous button as disabled', () => { - createComponent({ viewDiffsFileByFile: true }, ({ state }) => { + it('sets previous button as disabled', async () => { + createComponent({ fileByFileUserPreference: true }, ({ state }) => { state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' }); }); + await wrapper.vm.$nextTick(); + expect(paginator().attributes('prevpage')).toBe(undefined); expect(paginator().attributes('nextpage')).toBe('2'); }); - it('sets next button as disabled', () => { - createComponent({ viewDiffsFileByFile: true }, ({ state }) => { + it('sets next button as disabled', async () => { + createComponent({ fileByFileUserPreference: true }, ({ state }) => { state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' }); state.diffs.currentDiffFileId = '312'; }); + await wrapper.vm.$nextTick(); + expect(paginator().attributes('prevpage')).toBe('1'); expect(paginator().attributes('nextpage')).toBe(undefined); }); - it("doesn't display when there's fewer than 2 files", () => { - createComponent({ viewDiffsFileByFile: true }, ({ state }) => { + it("doesn't display when there's fewer than 2 files", async () => { + createComponent({ fileByFileUserPreference: true }, ({ state }) => { state.diffs.diffFiles.push({ file_hash: '123' }); state.diffs.currentDiffFileId = '123'; }); + await wrapper.vm.$nextTick(); + expect(fileByFileNav().exists()).toBe(false); }); @@ -849,11 +760,13 @@ describe('diffs/components/app', () => { `( 'it calls navigateToDiffFileIndex with $index when $link is clicked', async ({ currentDiffFileId, targetFile }) => { - createComponent({ viewDiffsFileByFile: true }, ({ state }) => { + createComponent({ fileByFileUserPreference: true }, ({ state }) => { state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' }); state.diffs.currentDiffFileId = currentDiffFileId; }); + await wrapper.vm.$nextTick(); + jest.spyOn(wrapper.vm, 'navigateToDiffFileIndex'); paginator().vm.$emit('input', targetFile); @@ -864,5 +777,24 @@ describe('diffs/components/app', () => { }, ); }); + + describe('control via event stream', () => { + it.each` + setting + ${true} + ${false} + `( + 'triggers the action with the new fileByFile setting - $setting - when the event with that setting is received', + async ({ setting }) => { + createComponent(); + await wrapper.vm.$nextTick(); + + eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting }); + await wrapper.vm.$nextTick(); + + expect(store.state.diffs.viewDiffsFileByFile).toBe(setting); + }, + ); + }); }); }); |