summaryrefslogtreecommitdiff
path: root/spec/frontend/diffs/components
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/diffs/components')
-rw-r--r--spec/frontend/diffs/components/app_spec.js198
-rw-r--r--spec/frontend/diffs/components/commit_item_spec.js2
-rw-r--r--spec/frontend/diffs/components/compare_dropdown_layout_spec.js8
-rw-r--r--spec/frontend/diffs/components/compare_versions_spec.js4
-rw-r--r--spec/frontend/diffs/components/diff_content_spec.js16
-rw-r--r--spec/frontend/diffs/components/diff_expansion_cell_spec.js5
-rw-r--r--spec/frontend/diffs/components/diff_file_row_spec.js38
-rw-r--r--spec/frontend/diffs/components/diff_row_spec.js6
-rw-r--r--spec/frontend/diffs/components/image_diff_overlay_spec.js14
-rw-r--r--spec/frontend/diffs/components/settings_dropdown_spec.js95
10 files changed, 182 insertions, 204 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);
+ },
+ );
+ });
});
});
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index 9e4fcddd1b4..8a7eb6aaca6 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -84,7 +84,7 @@ describe('diffs/components/commit_item', () => {
it('renders commit sha', () => {
const shaElement = getShaElement();
- const labelElement = shaElement.find('[data-testid="commit-sha-group"] button');
+ const labelElement = shaElement.find('[data-testid="commit-sha-short-id"]');
const buttonElement = shaElement.find('button.input-group-text');
expect(labelElement.text()).toEqual(commit.short_id);
diff --git a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js
index a163a43daf1..92e4a2d9c62 100644
--- a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js
+++ b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import { trimText } from 'helpers/text_helper';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import CompareDropdownLayout from '~/diffs/components/compare_dropdown_layout.vue';
@@ -22,7 +22,7 @@ describe('CompareDropdownLayout', () => {
});
const createComponent = (propsData = {}) => {
- wrapper = shallowMount(CompareDropdownLayout, {
+ wrapper = mount(CompareDropdownLayout, {
propsData: {
...propsData,
},
@@ -35,7 +35,7 @@ describe('CompareDropdownLayout', () => {
href: listItem.find('a').attributes('href'),
text: trimText(listItem.text()),
createdAt: listItem.findAll(TimeAgo).wrappers[0]?.props('time'),
- isActive: listItem.find('a.is-active').exists(),
+ isActive: listItem.classes().includes('is-active'),
}));
afterEach(() => {
@@ -69,7 +69,7 @@ describe('CompareDropdownLayout', () => {
expect(findListItemsData()).toEqual([
{
href: 'version/1',
- text: 'version 1 (base) abcdef1 1 commit',
+ text: 'version 1 (base) abcdef1 1 commit 2 years ago',
createdAt: TEST_CREATED_AT,
isActive: true,
},
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index b3dfc71260c..09e9669c474 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -59,8 +59,8 @@ describe('CompareVersions', () => {
expect(sourceDropdown.exists()).toBe(true);
expect(targetDropdown.exists()).toBe(true);
- expect(sourceDropdown.find('a span').html()).toContain('latest version');
- expect(targetDropdown.find('a span').html()).toContain(targetBranchName);
+ expect(sourceDropdown.find('a p').html()).toContain('latest version');
+ expect(targetDropdown.find('button').html()).toContain(targetBranchName);
});
it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {
diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js
index e3a6f7f16a9..43d295ff1b3 100644
--- a/spec/frontend/diffs/components/diff_content_spec.js
+++ b/spec/frontend/diffs/components/diff_content_spec.js
@@ -6,13 +6,11 @@ import InlineDiffView from '~/diffs/components/inline_diff_view.vue';
import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue';
-import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
import NoteForm from '~/notes/components/note_form.vue';
import DiffDiscussions from '~/diffs/components/diff_discussions.vue';
import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
import diffFileMockData from '../mock_data/diff_file';
import { diffViewerModes } from '~/ide/constants';
-import { diffLines } from '~/diffs/store/getters';
import DiffView from '~/diffs/components/diff_view.vue';
const localVue = createLocalVue();
@@ -74,7 +72,7 @@ describe('DiffContent', () => {
isInlineView: isInlineViewGetterMock,
isParallelView: isParallelViewGetterMock,
getCommentFormForDiffFile: getCommentFormForDiffFileGetterMock,
- diffLines,
+ diffLines: () => () => [...diffFileMockData.parallel_diff_lines],
},
actions: {
saveDiffDiscussion: saveDiffDiscussionMock,
@@ -122,11 +120,11 @@ describe('DiffContent', () => {
expect(wrapper.find(ParallelDiffView).exists()).toBe(true);
});
- it('should render diff view if `unifiedDiffLines` & `unifiedDiffComponents` are true', () => {
+ it('should render diff view if `unifiedDiffComponents` are true', () => {
isParallelViewGetterMock.mockReturnValue(true);
createComponent({
props: { diffFile: textDiffFile },
- provide: { glFeatures: { unifiedDiffLines: true, unifiedDiffComponents: true } },
+ provide: { glFeatures: { unifiedDiffComponents: true } },
});
expect(wrapper.find(DiffView).exists()).toBe(true);
@@ -167,14 +165,6 @@ describe('DiffContent', () => {
describe('with image files', () => {
const imageDiffFile = { ...defaultProps.diffFile, viewer: { name: diffViewerModes.image } };
- it('should have image diff view in place', () => {
- getCommentFormForDiffFileGetterMock.mockReturnValue(() => true);
- createComponent({ props: { diffFile: imageDiffFile } });
-
- expect(wrapper.find(InlineDiffView).exists()).toBe(false);
- expect(wrapper.find(ImageDiffOverlay).exists()).toBe(true);
- });
-
it('renders diff file discussions', () => {
getCommentFormForDiffFileGetterMock.mockReturnValue(() => true);
createComponent({
diff --git a/spec/frontend/diffs/components/diff_expansion_cell_spec.js b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
index 81e08f09f62..a3b4b5c3abb 100644
--- a/spec/frontend/diffs/components/diff_expansion_cell_spec.js
+++ b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
@@ -5,18 +5,16 @@ import { getByText } from '@testing-library/dom';
import { createStore } from '~/mr_notes/stores';
import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
import { getPreviousLineIndex } from '~/diffs/store/utils';
-import { INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '~/diffs/constants';
+import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
import diffFileMockData from '../mock_data/diff_file';
const EXPAND_UP_CLASS = '.js-unfold';
const EXPAND_DOWN_CLASS = '.js-unfold-down';
const lineSources = {
[INLINE_DIFF_VIEW_TYPE]: 'highlighted_diff_lines',
- [PARALLEL_DIFF_VIEW_TYPE]: 'parallel_diff_lines',
};
const lineHandlers = {
[INLINE_DIFF_VIEW_TYPE]: line => line,
- [PARALLEL_DIFF_VIEW_TYPE]: line => line.right || line.left,
};
function makeLoadMoreLinesPayload({
@@ -126,7 +124,6 @@ describe('DiffExpansionCell', () => {
describe('any row', () => {
[
{ diffViewType: INLINE_DIFF_VIEW_TYPE, lineIndex: 8, file: { parallel_diff_lines: [] } },
- { diffViewType: PARALLEL_DIFF_VIEW_TYPE, lineIndex: 7, file: { highlighted_diff_lines: [] } },
].forEach(({ diffViewType, file, lineIndex }) => {
describe(`with diffViewType (${diffViewType})`, () => {
beforeEach(() => {
diff --git a/spec/frontend/diffs/components/diff_file_row_spec.js b/spec/frontend/diffs/components/diff_file_row_spec.js
index 23adc8f9da4..7403a7918a9 100644
--- a/spec/frontend/diffs/components/diff_file_row_spec.js
+++ b/spec/frontend/diffs/components/diff_file_row_spec.js
@@ -7,12 +7,9 @@ import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
describe('Diff File Row component', () => {
let wrapper;
- const createComponent = (props = {}, highlightCurrentDiffRow = false) => {
+ const createComponent = (props = {}) => {
wrapper = shallowMount(DiffFileRow, {
propsData: { ...props },
- provide: {
- glFeatures: { highlightCurrentDiffRow },
- },
});
};
@@ -60,26 +57,23 @@ describe('Diff File Row component', () => {
});
it.each`
- features | fileType | isViewed | expected
- ${{ highlightCurrentDiffRow: true }} | ${'blob'} | ${false} | ${'gl-font-weight-bold'}
- ${{}} | ${'blob'} | ${true} | ${''}
- ${{}} | ${'tree'} | ${false} | ${''}
- ${{}} | ${'tree'} | ${true} | ${''}
+ fileType | isViewed | expected
+ ${'blob'} | ${false} | ${'gl-font-weight-bold'}
+ ${'blob'} | ${true} | ${''}
+ ${'tree'} | ${false} | ${''}
+ ${'tree'} | ${true} | ${''}
`(
- 'with (features="$features", fileType="$fileType", isViewed=$isViewed), sets fileClasses="$expected"',
- ({ features, fileType, isViewed, expected }) => {
- createComponent(
- {
- file: {
- type: fileType,
- fileHash: '#123456789',
- },
- level: 0,
- hideFileStats: false,
- viewedFiles: isViewed ? { '#123456789': true } : {},
+ 'with (fileType="$fileType", isViewed=$isViewed), sets fileClasses="$expected"',
+ ({ fileType, isViewed, expected }) => {
+ createComponent({
+ file: {
+ type: fileType,
+ fileHash: '#123456789',
},
- features.highlightCurrentDiffRow,
- );
+ level: 0,
+ hideFileStats: false,
+ viewedFiles: isViewed ? { '#123456789': true } : {},
+ });
expect(wrapper.find(FileRow).props('fileClasses')).toBe(expected);
},
);
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index f9e76cf8107..0ec075c8ad8 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -97,18 +97,18 @@ describe('DiffRow', () => {
${'right'}
`('$side side', ({ side }) => {
it(`renders empty cells if ${side} is unavailable`, () => {
- const wrapper = createWrapper({ props: { line: testLines[2] } });
+ const wrapper = createWrapper({ props: { line: testLines[2], inline: false } });
expect(wrapper.find(`[data-testid="${side}LineNumber"]`).exists()).toBe(false);
expect(wrapper.find(`[data-testid="${side}EmptyCell"]`).exists()).toBe(true);
});
it('renders comment button', () => {
- const wrapper = createWrapper({ props: { line: testLines[3] } });
+ const wrapper = createWrapper({ props: { line: testLines[3], inline: false } });
expect(wrapper.find(`[data-testid="${side}CommentButton"]`).exists()).toBe(true);
});
it('renders avatars', () => {
- const wrapper = createWrapper({ props: { line: testLines[0] } });
+ const wrapper = createWrapper({ props: { line: testLines[0], inline: false } });
expect(wrapper.find(`[data-testid="${side}Discussions"]`).exists()).toBe(true);
});
});
diff --git a/spec/frontend/diffs/components/image_diff_overlay_spec.js b/spec/frontend/diffs/components/image_diff_overlay_spec.js
index 5a88a3cabd1..087715111b4 100644
--- a/spec/frontend/diffs/components/image_diff_overlay_spec.js
+++ b/spec/frontend/diffs/components/image_diff_overlay_spec.js
@@ -24,6 +24,8 @@ describe('Diffs image diff overlay component', () => {
propsData: {
discussions: [...imageDiffDiscussions],
fileHash: 'ABC',
+ renderedWidth: 200,
+ renderedHeight: 200,
...props,
},
methods: {
@@ -71,8 +73,8 @@ describe('Diffs image diff overlay component', () => {
createComponent();
const imageBadges = getAllImageBadges();
- expect(imageBadges.at(0).attributes('style')).toBe('left: 10px; top: 10px;');
- expect(imageBadges.at(1).attributes('style')).toBe('left: 5px; top: 5px;');
+ expect(imageBadges.at(0).attributes('style')).toBe('left: 10%; top: 5%;');
+ expect(imageBadges.at(1).attributes('style')).toBe('left: 5%; top: 2.5%;');
});
it('renders single badge for discussion object', () => {
@@ -95,6 +97,8 @@ describe('Diffs image diff overlay component', () => {
y: 0,
width: 100,
height: 200,
+ xPercent: 0,
+ yPercent: 0,
});
});
@@ -120,11 +124,13 @@ describe('Diffs image diff overlay component', () => {
describe('comment form', () => {
const getCommentIndicator = () => wrapper.find('.comment-indicator');
beforeEach(() => {
- createComponent({}, store => {
+ createComponent({ canComment: true }, store => {
store.state.diffs.commentForms.push({
fileHash: 'ABC',
x: 20,
y: 10,
+ xPercent: 10,
+ yPercent: 10,
});
});
});
@@ -134,7 +140,7 @@ describe('Diffs image diff overlay component', () => {
});
it('sets comment form badge position', () => {
- expect(getCommentIndicator().attributes('style')).toBe('left: 20px; top: 10px;');
+ expect(getCommentIndicator().attributes('style')).toBe('left: 10%; top: 10%;');
});
});
});
diff --git a/spec/frontend/diffs/components/settings_dropdown_spec.js b/spec/frontend/diffs/components/settings_dropdown_spec.js
index 72330d8efba..eb9f9b4db73 100644
--- a/spec/frontend/diffs/components/settings_dropdown_spec.js
+++ b/spec/frontend/diffs/components/settings_dropdown_spec.js
@@ -2,12 +2,18 @@ import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import diffModule from '~/diffs/store/modules';
import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
-import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
+import {
+ EVT_VIEW_FILE_BY_FILE,
+ PARALLEL_DIFF_VIEW_TYPE,
+ INLINE_DIFF_VIEW_TYPE,
+} from '~/diffs/constants';
+import eventHub from '~/diffs/event_hub';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('Diff settings dropdown component', () => {
+ let wrapper;
let vm;
let actions;
@@ -25,10 +31,15 @@ describe('Diff settings dropdown component', () => {
extendStore(store);
- vm = mount(SettingsDropdown, {
+ wrapper = mount(SettingsDropdown, {
localVue,
store,
});
+ vm = wrapper.vm;
+ }
+
+ function getFileByFileCheckbox(vueWrapper) {
+ return vueWrapper.find('[data-testid="file-by-file"]');
}
beforeEach(() => {
@@ -41,14 +52,14 @@ describe('Diff settings dropdown component', () => {
});
afterEach(() => {
- vm.destroy();
+ wrapper.destroy();
});
describe('tree view buttons', () => {
it('list view button dispatches setRenderTreeList with false', () => {
createComponent();
- vm.find('.js-list-view').trigger('click');
+ wrapper.find('.js-list-view').trigger('click');
expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), false);
});
@@ -56,7 +67,7 @@ describe('Diff settings dropdown component', () => {
it('tree view button dispatches setRenderTreeList with true', () => {
createComponent();
- vm.find('.js-tree-view').trigger('click');
+ wrapper.find('.js-tree-view').trigger('click');
expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), true);
});
@@ -68,8 +79,8 @@ describe('Diff settings dropdown component', () => {
});
});
- expect(vm.find('.js-list-view').classes('selected')).toBe(true);
- expect(vm.find('.js-tree-view').classes('selected')).toBe(false);
+ expect(wrapper.find('.js-list-view').classes('selected')).toBe(true);
+ expect(wrapper.find('.js-tree-view').classes('selected')).toBe(false);
});
it('sets tree button as selected when renderTreeList is true', () => {
@@ -79,8 +90,8 @@ describe('Diff settings dropdown component', () => {
});
});
- expect(vm.find('.js-list-view').classes('selected')).toBe(false);
- expect(vm.find('.js-tree-view').classes('selected')).toBe(true);
+ expect(wrapper.find('.js-list-view').classes('selected')).toBe(false);
+ expect(wrapper.find('.js-tree-view').classes('selected')).toBe(true);
});
});
@@ -92,8 +103,8 @@ describe('Diff settings dropdown component', () => {
});
});
- expect(vm.find('.js-inline-diff-button').classes('selected')).toBe(true);
- expect(vm.find('.js-parallel-diff-button').classes('selected')).toBe(false);
+ expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(true);
+ expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(false);
});
it('sets parallel button as selected', () => {
@@ -103,14 +114,14 @@ describe('Diff settings dropdown component', () => {
});
});
- expect(vm.find('.js-inline-diff-button').classes('selected')).toBe(false);
- expect(vm.find('.js-parallel-diff-button').classes('selected')).toBe(true);
+ expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(false);
+ expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(true);
});
it('calls setInlineDiffViewType when clicking inline button', () => {
createComponent();
- vm.find('.js-inline-diff-button').trigger('click');
+ wrapper.find('.js-inline-diff-button').trigger('click');
expect(actions.setInlineDiffViewType).toHaveBeenCalled();
});
@@ -118,7 +129,7 @@ describe('Diff settings dropdown component', () => {
it('calls setParallelDiffViewType when clicking parallel button', () => {
createComponent();
- vm.find('.js-parallel-diff-button').trigger('click');
+ wrapper.find('.js-parallel-diff-button').trigger('click');
expect(actions.setParallelDiffViewType).toHaveBeenCalled();
});
@@ -132,7 +143,7 @@ describe('Diff settings dropdown component', () => {
});
});
- expect(vm.find('#show-whitespace').element.checked).toBe(false);
+ expect(wrapper.find('#show-whitespace').element.checked).toBe(false);
});
it('sets as checked when showWhitespace is true', () => {
@@ -142,13 +153,13 @@ describe('Diff settings dropdown component', () => {
});
});
- expect(vm.find('#show-whitespace').element.checked).toBe(true);
+ expect(wrapper.find('#show-whitespace').element.checked).toBe(true);
});
it('calls setShowWhitespace on change', () => {
createComponent();
- const checkbox = vm.find('#show-whitespace');
+ const checkbox = wrapper.find('#show-whitespace');
checkbox.element.checked = true;
checkbox.trigger('change');
@@ -159,4 +170,52 @@ describe('Diff settings dropdown component', () => {
});
});
});
+
+ describe('file-by-file toggle', () => {
+ beforeEach(() => {
+ jest.spyOn(eventHub, '$emit');
+ });
+
+ it.each`
+ fileByFile | checked
+ ${true} | ${true}
+ ${false} | ${false}
+ `(
+ 'sets the checkbox to { checked: $checked } if the fileByFile setting is $fileByFile',
+ async ({ fileByFile, checked }) => {
+ createComponent(store => {
+ Object.assign(store.state.diffs, {
+ viewDiffsFileByFile: fileByFile,
+ });
+ });
+
+ await vm.$nextTick();
+
+ expect(getFileByFileCheckbox(wrapper).element.checked).toBe(checked);
+ },
+ );
+
+ it.each`
+ start | emit
+ ${true} | ${false}
+ ${false} | ${true}
+ `(
+ 'when the file by file setting starts as $start, toggling the checkbox should emit an event set to $emit',
+ async ({ start, emit }) => {
+ createComponent(store => {
+ Object.assign(store.state.diffs, {
+ viewDiffsFileByFile: start,
+ });
+ });
+
+ await vm.$nextTick();
+
+ getFileByFileCheckbox(wrapper).trigger('click');
+
+ await vm.$nextTick();
+
+ expect(eventHub.$emit).toHaveBeenCalledWith(EVT_VIEW_FILE_BY_FILE, { setting: emit });
+ },
+ );
+ });
});