Skip to content

G
gitlab-ce
Commit 2f40aa68 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Added dropdown for diff settings 

Dropdown includes buttons for tree view rendering mode
and buttons for the compare view (inline or side-by-side)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/55491
parent da251c64
Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 194 deletions
app/assets/javascripts/diffs/components/compare_versions.vue
View file @ 2f40aa68
......@@ -2,10 +2,10 @@
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
import { polyfillSticky } from '~/lib/utils/sticky';
import Icon from '~/vue_shared/components/icon.vue';
import CompareVersionsDropdown from './compare_versions_dropdown.vue';
import SettingsDropdown from './settings_dropdown.vue';
export default {
components: {
......@@ -13,6 +13,7 @@ export default {
Icon,
GlLink,
GlButton,
SettingsDropdown,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -35,23 +36,10 @@ export default {
},
computed: {
...mapState('diffs', ['commit', 'showTreeList', 'startVersion', 'latestVersionPath']),
...mapGetters('diffs', ['isInlineView', 'isParallelView', 'hasCollapsedFile']),
...mapGetters('diffs', ['hasCollapsedFile']),
comparableDiffs() {
return this.mergeRequestDiffs.slice(1);
},
toggleWhitespaceText() {
if (this.isWhitespaceVisible()) {
return __('Hide whitespace changes');
}
return __('Show whitespace changes');
},
toggleWhitespacePath() {
if (this.isWhitespaceVisible()) {
return mergeUrlParams({ w: 1 }, window.location.href);
}
return mergeUrlParams({ w: 0 }, window.location.href);
},
showDropdowns() {
return !this.commit && this.mergeRequestDiffs.length;
},
......@@ -75,9 +63,6 @@ export default {
'expandAllFiles',
'toggleShowTreeList',
]),
isWhitespaceVisible() {
return getParameterValues('w')[0] !== '1';
},
},
};
</script>
......@@ -118,7 +103,7 @@ export default {
{{ __('Viewing commit') }}
<gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
</div>
<div class="inline-parallel-buttons d-none d-lg-flex ml-auto">
<div class="inline-parallel-buttons d-none d-md-flex ml-auto">
<gl-button
v-if="commit || startVersion"
:href="latestVersionPath"
......@@ -129,31 +114,7 @@ export default {
<a v-show="hasCollapsedFile" class="btn btn-default append-right-8" @click="expandAllFiles">
{{ __('Expand all') }}
</a>
<a :href="toggleWhitespacePath" class="btn btn-default qa-toggle-whitespace">
{{ toggleWhitespaceText }}
</a>
<div class="btn-group prepend-left-8">
<button
id="inline-diff-btn"
:class="{ active: isInlineView }"
type="button"
class="btn js-inline-diff-button"
data-view-type="inline"
@click="setInlineDiffViewType"
>
{{ __('Inline') }}
</button>
<button
id="parallel-diff-btn"
:class="{ active: isParallelView }"
type="button"
class="btn js-parallel-diff-button"
data-view-type="parallel"
@click="setParallelDiffViewType"
>
{{ __('Side-by-side') }}
</button>
</div>
<settings-dropdown />
</div>
</div>
</div>
......
app/assets/javascripts/diffs/components/settings_dropdown.vue 0 → 100644
View file @ 2f40aa68
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
Icon,
},
computed: {
...mapGetters('diffs', ['isInlineView', 'isParallelView']),
...mapState('diffs', ['renderTreeList', 'showWhitespace']),
},
methods: {
...mapActions('diffs', [
'setInlineDiffViewType',
'setParallelDiffViewType',
'setRenderTreeList',
'setShowWhitespace',
]),
},
};
</script>
<template>
<div class="dropdown">
<button
type="button"
class="btn btn-default js-show-diff-settings"
data-toggle="dropdown"
data-display="static"
>
<icon name="settings" /> <icon name="arrow-down" />
</button>
<div class="dropdown-menu dropdown-menu-right p-2 pt-3 pb-3">
<div>
<span class="bold d-block mb-1">{{ __('File browser') }}</span>
<div class="btn-group d-flex">
<gl-button
:class="{ active: !renderTreeList }"
class="w-100 js-list-view"
@click="setRenderTreeList(false)"
>
{{ __('List view') }}
</gl-button>
<gl-button
:class="{ active: renderTreeList }"
class="w-100 js-tree-view"
@click="setRenderTreeList(true)"
>
{{ __('Tree view') }}
</gl-button>
</div>
</div>
<div class="mt-2">
<span class="bold d-block mb-1">{{ __('Compare changes') }}</span>
<div class="btn-group d-flex js-diff-view-buttons">
<gl-button
id="inline-diff-btn"
:class="{ active: isInlineView }"
class="w-100 js-inline-diff-button"
data-view-type="inline"
@click="setInlineDiffViewType"
>
{{ __('Inline') }}
</gl-button>
<gl-button
id="parallel-diff-btn"
:class="{ active: isParallelView }"
class="w-100 js-parallel-diff-button"
data-view-type="parallel"
@click="setParallelDiffViewType"
>
{{ __('Side-by-side') }}
</gl-button>
</div>
</div>
<div class="mt-2">
<label class="mb-0">
<input
id="show-whitespace"
type="checkbox"
:checked="showWhitespace"
@change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })"
/>
{{ __('Show whitespace changes') }}
</label>
</div>
</div>
</div>
</template>
app/assets/javascripts/diffs/components/tree_list.vue
View file @ 2f40aa68
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlTooltipDirective } from '@gitlab/ui';
import { parseBoolean } from '~/lib/utils/common_utils';
import Icon from '~/vue_shared/components/icon.vue';
import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowStats from './file_row_stats.vue';
const treeListStorageKey = 'mr_diff_tree_list';
export default {
directives: {
GlTooltip: GlTooltipDirective,
......@@ -17,17 +14,12 @@ export default {
FileRow,
},
data() {
const treeListStored = localStorage.getItem(treeListStorageKey);
const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
return {
search: '',
renderTreeList,
focusSearch: false,
};
},
computed: {
...mapState('diffs', ['tree', 'addedLines', 'removedLines']),
...mapState('diffs', ['tree', 'addedLines', 'removedLines', 'renderTreeList']),
...mapGetters('diffs', ['allBlobs', 'diffFilesLength']),
filteredTreeList() {
const search = this.search.toLowerCase().trim();
......@@ -52,19 +44,6 @@ export default {
...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
clearSearch() {
this.search = '';
this.toggleFocusSearch(false);
},
toggleRenderTreeList(toggle) {
this.renderTreeList = toggle;
localStorage.setItem(treeListStorageKey, this.renderTreeList);
},
toggleFocusSearch(toggle) {
this.focusSearch = toggle;
},
blurSearch() {
if (this.search.trim() === '') {
this.toggleFocusSearch(false);
}
},
},
FileRowStats,
......@@ -81,8 +60,6 @@ export default {
:placeholder="s__('MergeRequest|Filter files')"
type="search"
class="form-control"
@focus="toggleFocusSearch(true)"
@blur="blurSearch"
/>
<button
v-show="search"
......@@ -94,34 +71,6 @@ export default {
<icon name="close" />
</button>
</div>
<div v-show="!focusSearch" class="btn-group prepend-left-8 tree-list-view-toggle">
<button
v-gl-tooltip.hover
:aria-label="__('List view')"
:title="__('List view')"
:class="{
active: !renderTreeList,
}"
class="btn btn-default pt-0 pb-0 d-flex align-items-center"
type="button"
@click="toggleRenderTreeList(false)"
>
<icon name="hamburger" />
</button>
<button
v-gl-tooltip.hover
:aria-label="__('Tree view')"
:title="__('Tree view')"
:class="{
active: renderTreeList,
}"
class="btn btn-default pt-0 pb-0 d-flex align-items-center"
type="button"
@click="toggleRenderTreeList(true)"
>
<icon name="file-tree" />
</button>
</div>
</div>
<div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll">
<template v-if="filteredTreeList.length">
......
app/assets/javascripts/diffs/constants.js
View file @ 2f40aa68
......@@ -34,3 +34,5 @@ export const MAX_LINES_TO_BE_RENDERED = 2000;
export const MR_TREE_SHOW_KEY = 'mr_tree_show';
export const TREE_TYPE = 'tree';
export const TREE_LIST_STORAGE_KEY = 'mr_diff_tree_list';
export const WHITESPACE_STORAGE_KEY = 'mr_show_whitespace';
app/assets/javascripts/diffs/index.js
View file @ 2f40aa68
import Vue from 'vue';
import { mapState } from 'vuex';
import { mapActions, mapState } from 'vuex';
import { parseBoolean } from '~/lib/utils/common_utils';
import { getParameterValues } from '~/lib/utils/url_utility';
import diffsApp from './components/app.vue';
import { TREE_LIST_STORAGE_KEY } from './constants';
export default function initDiffsApp(store) {
return new Vue({
......@@ -26,6 +29,16 @@ export default function initDiffsApp(store) {
activeTab: state => state.page.activeTab,
}),
},
created() {
const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
this.setRenderTreeList(renderTreeList);
this.setShowWhitespace({ showWhitespace: getParameterValues('w')[0] !== '1' });
},
methods: {
...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']),
},
render(createElement) {
return createElement('diffs-app', {
props: {
......
app/assets/javascripts/diffs/store/actions.js
View file @ 2f40aa68
......@@ -14,6 +14,8 @@ import {
INLINE_DIFF_VIEW_TYPE,
DIFF_VIEW_COOKIE_NAME,
MR_TREE_SHOW_KEY,
TREE_LIST_STORAGE_KEY,
WHITESPACE_STORAGE_KEY,
} from '../constants';
export const setBaseConfig = ({ commit }, options) => {
......@@ -33,7 +35,7 @@ export const fetchDiffFiles = ({ state, commit }) => {
});
return axios
.get(state.endpoint)
.get(state.endpoint, { params: { w: state.showWhitespace ? null : '1' } })
.then(res => {
commit(types.SET_LOADING, false);
commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
......@@ -278,5 +280,21 @@ export const closeDiffFileCommentForm = ({ commit }, fileHash) => {
commit(types.CLOSE_DIFF_FILE_COMMENT_FORM, fileHash);
};
export const setRenderTreeList = ({ commit }, renderTreeList) => {
commit(types.SET_RENDER_TREE_LIST, renderTreeList);
localStorage.setItem(TREE_LIST_STORAGE_KEY, renderTreeList);
};
export const setShowWhitespace = ({ commit }, { showWhitespace, pushState = false }) => {
commit(types.SET_SHOW_WHITESPACE, showWhitespace);
localStorage.setItem(WHITESPACE_STORAGE_KEY, showWhitespace);
if (pushState) {
historyPushState(showWhitespace ? '?w=0' : '?w=1');
}
};
// prevent babel-plugin-rewire from generating an invalid default during karma tests
export default () => {};
app/assets/javascripts/diffs/store/modules/diff_state.js
View file @ 2f40aa68
......@@ -27,4 +27,6 @@ export default () => ({
projectPath: '',
commentForms: [],
highlightedRow: null,
renderTreeList: true,
showWhitespace: true,
});
app/assets/javascripts/diffs/store/mutation_types.js
View file @ 2f40aa68
......@@ -20,3 +20,5 @@ export const CLOSE_DIFF_FILE_COMMENT_FORM = 'CLOSE_DIFF_FILE_COMMENT_FORM';
export const SET_HIGHLIGHTED_ROW = 'SET_HIGHLIGHTED_ROW';
export const SET_TREE_DATA = 'SET_TREE_DATA';
export const SET_RENDER_TREE_LIST = 'SET_RENDER_TREE_LIST';
export const SET_SHOW_WHITESPACE = 'SET_SHOW_WHITESPACE';
app/assets/javascripts/diffs/store/mutations.js
View file @ 2f40aa68
......@@ -238,4 +238,10 @@ export default {
state.treeEntries = treeEntries;
state.tree = tree;
},
[types.SET_RENDER_TREE_LIST](state, renderTreeList) {
state.renderTreeList = renderTreeList;
},
[types.SET_SHOW_WHITESPACE](state, showWhitespace) {
state.showWhitespace = showWhitespace;
},
};
app/assets/javascripts/merge_request_tabs.js
View file @ 2f40aa68
......@@ -428,7 +428,7 @@ export default class MergeRequestTabs {
}
diffViewType() {
return $('.inline-parallel-buttons button.active').data('viewType');
return $('.js-diff-view-buttons button.active').data('viewType');
}
isDiffAction(action) {
......
app/assets/stylesheets/pages/diff.scss
View file @ 2f40aa68
......@@ -1095,12 +1095,6 @@
}
}
.tree-list-view-toggle {
svg {
top: 0;
}
}
.image-diff-overlay,
.image-diff-overlay-add-comment {
top: 0;
......
locale/gitlab.pot
View file @ 2f40aa68
......@@ -2015,6 +2015,9 @@ msgstr ""
msgid "Compare Revisions"
msgstr ""
msgid "Compare changes"
msgstr ""
msgid "Compare changes with the last commit"
msgstr ""
......@@ -3139,6 +3142,9 @@ msgstr ""
msgid "File added"
msgstr ""
msgid "File browser"
msgstr ""
msgid "File deleted"
msgstr ""
......@@ -3591,9 +3597,6 @@ msgstr[1] ""
msgid "Hide values"
msgstr ""
msgid "Hide whitespace changes"
msgstr ""
msgid "History"
msgstr ""
......
spec/features/merge_request/user_comments_on_diff_spec.rb
View file @ 2f40aa68
......@@ -91,6 +91,7 @@ describe 'User comments on a diff', :js do
# Check the same comments in the side-by-side view.
execute_script("window.scrollTo(0,0);")
find('.js-show-diff-settings').click
click_button 'Side-by-side'
wait_for_requests
......
spec/features/merge_request/user_resolves_diff_notes_and_discussions_resolve_spec.rb
View file @ 2f40aa68
......@@ -126,6 +126,7 @@ describe 'Merge request > User resolves diff notes and discussions', :js do
describe 'side-by-side view' do
before do
page.within('.merge-request-tabs') { click_link 'Changes' }
find('.js-show-diff-settings').click
page.find('#parallel-diff-btn').click
end
......
spec/features/merge_request/user_toggles_whitespace_changes_spec.rb
View file @ 2f40aa68
......@@ -9,17 +9,23 @@ describe 'Merge request > User toggles whitespace changes', :js do
project.add_maintainer(user)
sign_in(user)
visit diffs_project_merge_request_path(project, merge_request)
find('.js-show-diff-settings').click
end
it 'has a button to toggle whitespace changes' do
expect(page).to have_content 'Hide whitespace changes'
expect(page).to have_content 'Show whitespace changes'
end
describe 'clicking "Hide whitespace changes" button' do
it 'toggles the "Hide whitespace changes" button' do
click_link 'Hide whitespace changes'
find('#show-whitespace').click
visit diffs_project_merge_request_path(project, merge_request)
find('.js-show-diff-settings').click
expect(page).to have_content 'Show whitespace changes'
expect(find('#show-whitespace')).to be_checked
end
end
end
spec/features/merge_request/user_views_diffs_spec.rb
View file @ 2f40aa68
......@@ -23,6 +23,8 @@ describe 'User views diffs', :js do
end
it 'shows diffs' do
find('.js-show-diff-settings').click
expect(page).to have_css('.tab-content #diffs.active')
expect(page).to have_css('#parallel-diff-btn', count: 1)
expect(page).to have_css('#inline-diff-btn', count: 1)
......@@ -38,6 +40,8 @@ describe 'User views diffs', :js do
context 'when in the side-by-side view' do
before do
find('.js-show-diff-settings').click
click_button 'Side-by-side'
wait_for_requests
......
spec/javascripts/diffs/components/compare_versions_spec.js
View file @ 2f40aa68
......@@ -51,15 +51,6 @@ describe('CompareVersions', () => {
});
});
it('should render whitespace toggle button with correct attributes', () => {
const whitespaceBtn = vm.$el.querySelector('.qa-toggle-whitespace');
const href = vm.toggleWhitespacePath;
expect(whitespaceBtn).not.toBeNull();
expect(whitespaceBtn.getAttribute('href')).toEqual(href);
expect(whitespaceBtn.innerHTML).toContain('Hide whitespace changes');
});
it('should render view types buttons with correct values', () => {
const inlineBtn = vm.$el.querySelector('#inline-diff-btn');
const parallelBtn = vm.$el.querySelector('#parallel-diff-btn');
......@@ -106,30 +97,6 @@ describe('CompareVersions', () => {
});
});
describe('isWhitespaceVisible', () => {
const originalHref = window.location.href;
afterEach(() => {
window.history.replaceState({}, null, originalHref);
});
it('should return "true" when no "w" flag is present in the URL (default)', () => {
expect(vm.isWhitespaceVisible()).toBe(true);
});
it('should return "false" when the flag is set to "1" in the URL', () => {
window.history.replaceState({}, null, '?w=1');
expect(vm.isWhitespaceVisible()).toBe(false);
});
it('should return "true" when the flag is set to "0" in the URL', () => {
window.history.replaceState({}, null, '?w=0');
expect(vm.isWhitespaceVisible()).toBe(true);
});
});
describe('commit', () => {
beforeEach(done => {
vm.$store.state.diffs.commit = getDiffWithCommit().commit;
......
spec/javascripts/diffs/components/settings_dropdown_spec.js 0 → 100644
View file @ 2f40aa68
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';
describe('Diff settiings dropdown component', () => {
let vm;
let actions;
function createComponent(extendStore = () => {}) {
const localVue = createLocalVue();
localVue.use(Vuex);
const store = new Vuex.Store({
modules: {
diffs: {
namespaced: true,
actions,
state: diffModule().state,
getters: diffModule().getters,
},
},
});
extendStore(store);
vm = mount(SettingsDropdown, {
localVue,
store,
});
}
beforeEach(() => {
actions = {
setInlineDiffViewType: jasmine.createSpy('setInlineDiffViewType'),
setParallelDiffViewType: jasmine.createSpy('setParallelDiffViewType'),
setRenderTreeList: jasmine.createSpy('setRenderTreeList'),
setShowWhitespace: jasmine.createSpy('setShowWhitespace'),
};
});
afterEach(() => {
vm.destroy();
});
describe('tree view buttons', () => {
it('list view button dispatches setRenderTreeList with false', () => {
createComponent();
vm.find('.js-list-view').trigger('click');
expect(actions.setRenderTreeList).toHaveBeenCalledWith(jasmine.anything(), false, undefined);
});
it('tree view button dispatches setRenderTreeList with true', () => {
createComponent();
vm.find('.js-tree-view').trigger('click');
expect(actions.setRenderTreeList).toHaveBeenCalledWith(jasmine.anything(), true, undefined);
});
it('sets list button as active when renderTreeList is false', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
renderTreeList: false,
});
});
expect(vm.find('.js-list-view').classes('active')).toBe(true);
expect(vm.find('.js-tree-view').classes('active')).toBe(false);
});
it('sets tree button as active when renderTreeList is true', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
renderTreeList: true,
});
});
expect(vm.find('.js-list-view').classes('active')).toBe(false);
expect(vm.find('.js-tree-view').classes('active')).toBe(true);
});
});
describe('compare changes', () => {
it('sets inline button as active', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
diffViewType: INLINE_DIFF_VIEW_TYPE,
});
});
expect(vm.find('.js-inline-diff-button').classes('active')).toBe(true);
expect(vm.find('.js-parallel-diff-button').classes('active')).toBe(false);
});
it('sets parallel button as active', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
diffViewType: PARALLEL_DIFF_VIEW_TYPE,
});
});
expect(vm.find('.js-inline-diff-button').classes('active')).toBe(false);
expect(vm.find('.js-parallel-diff-button').classes('active')).toBe(true);
});
it('calls setInlineDiffViewType when clicking inline button', () => {
createComponent();
vm.find('.js-inline-diff-button').trigger('click');
expect(actions.setInlineDiffViewType).toHaveBeenCalled();
});
it('calls setParallelDiffViewType when clicking parallel button', () => {
createComponent();
vm.find('.js-parallel-diff-button').trigger('click');
expect(actions.setParallelDiffViewType).toHaveBeenCalled();
});
});
describe('whitespace toggle', () => {
it('does not set as checked when showWhitespace is false', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
showWhitespace: false,
});
});
expect(vm.find('#show-whitespace').element.checked).toBe(false);
});
it('sets as checked when showWhitespace is true', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
showWhitespace: true,
});
});
expect(vm.find('#show-whitespace').element.checked).toBe(true);
});
it('calls setShowWhitespace on change', () => {
createComponent();
const checkbox = vm.find('#show-whitespace');
checkbox.element.checked = true;
checkbox.trigger('change');
expect(actions.setShowWhitespace).toHaveBeenCalledWith(
jasmine.anything(),
{
showWhitespace: true,
pushState: true,
},
undefined,
);
});
});
});
spec/javascripts/diffs/components/tree_list_spec.js
View file @ 2f40aa68
......@@ -111,7 +111,7 @@ describe('Diffs tree list component', () => {
});
it('renders as file list when renderTreeList is false', done => {
vm.renderTreeList = false;
vm.$store.state.diffs.renderTreeList = false;
vm.$nextTick(() => {
expect(vm.$el.querySelectorAll('.file-row').length).toBe(1);
......@@ -121,7 +121,7 @@ describe('Diffs tree list component', () => {
});
it('renders file paths when renderTreeList is false', done => {
vm.renderTreeList = false;
vm.$store.state.diffs.renderTreeList = false;
vm.$nextTick(() => {
expect(vm.$el.querySelector('.file-row').textContent).toContain('index.js');
......@@ -129,34 +129,6 @@ describe('Diffs tree list component', () => {
done();
});
});
it('hides render buttons when input is focused', done => {
const focusEvent = new Event('focus');
vm.$el.querySelector('.form-control').dispatchEvent(focusEvent);
vm.$nextTick(() => {
expect(vm.$el.querySelector('.tree-list-view-toggle').style.display).toBe('none');
done();
});
});
it('shows render buttons when input is blurred', done => {
const blurEvent = new Event('blur');
vm.focusSearch = true;
vm.$nextTick()
.then(() => {
vm.$el.querySelector('.form-control').dispatchEvent(blurEvent);
})
.then(vm.$nextTick)
.then(() => {
expect(vm.$el.querySelector('.tree-list-view-toggle').style.display).not.toBe('none');
})
.then(done)
.catch(done.fail);
});
});
describe('clearSearch', () => {
......@@ -168,24 +140,4 @@ describe('Diffs tree list component', () => {
expect(vm.search).toBe('');
});
});
describe('toggleRenderTreeList', () => {
it('updates renderTreeList', () => {
expect(vm.renderTreeList).toBe(true);
vm.toggleRenderTreeList(false);
expect(vm.renderTreeList).toBe(false);
});
});
describe('toggleFocusSearch', () => {
it('updates focusSearch', () => {
expect(vm.focusSearch).toBe(false);
vm.toggleFocusSearch(true);
expect(vm.focusSearch).toBe(true);
});
});
});
spec/javascripts/diffs/store/actions_spec.js
View file @ 2f40aa68
......@@ -27,6 +27,8 @@ import actions, {
scrollToFile,
toggleShowTreeList,
renderFileForDiscussionId,
setRenderTreeList,
setShowWhitespace,
} from '~/diffs/store/actions';
import eventHub from '~/notes/event_hub';
import * as types from '~/diffs/store/mutation_types';
......@@ -796,4 +798,55 @@ describe('DiffsStoreActions', () => {
expect(scrollToElement).not.toHaveBeenCalled();
});
});
describe('setRenderTreeList', () => {
it('commits SET_RENDER_TREE_LIST', done => {
testAction(
setRenderTreeList,
true,
{},
[{ type: types.SET_RENDER_TREE_LIST, payload: true }],
[],
done,
);
});
it('sets localStorage', () => {
spyOn(localStorage, 'setItem').and.stub();
setRenderTreeList({ commit() {} }, true);
expect(localStorage.setItem).toHaveBeenCalledWith('mr_diff_tree_list', true);
});
});
describe('setShowWhitespace', () => {
it('commits SET_SHOW_WHITESPACE', done => {
testAction(
setShowWhitespace,
{ showWhitespace: true },
{},
[{ type: types.SET_SHOW_WHITESPACE, payload: true }],
[],
done,
);
});
it('sets localStorage', () => {
spyOn(localStorage, 'setItem').and.stub();
setShowWhitespace({ commit() {} }, { showWhitespace: true });
expect(localStorage.setItem).toHaveBeenCalledWith('mr_show_whitespace', true);
});
it('calls history pushState', () => {
spyOn(localStorage, 'setItem').and.stub();
spyOn(window.history, 'pushState').and.stub();
setShowWhitespace({ commit() {} }, { showWhitespace: true, pushState: true });
expect(window.history.pushState).toHaveBeenCalled();
});
});
});
spec/javascripts/diffs/store/mutations_spec.js
View file @ 2f40aa68
......@@ -650,4 +650,28 @@ describe('DiffsStoreMutations', () => {
expect(state.tree).toEqual(['tree']);
});
});
describe('SET_RENDER_TREE_LIST', () => {
it('sets renderTreeList', () => {
const state = {
renderTreeList: true,
};
mutations[types.SET_RENDER_TREE_LIST](state, false);
expect(state.renderTreeList).toBe(false);
});
});
describe('SET_SHOW_WHITESPACE', () => {
it('sets showWhitespace', () => {
const state = {
showWhitespace: true,
};
mutations[types.SET_SHOW_WHITESPACE](state, false);
expect(state.showWhitespace).toBe(false);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7