Merge branch 'diff-settings-dropdown' into 'master'

Added dropdown for diff settings

Closes #55491

See merge request gitlab-org/gitlab-ce!24460

5 files changed, 246 insertions, 83 deletions

diff --git a/spec/javascripts/diffs/components/compare_versions_spec.js b/spec/javascripts/diffs/components/compare_versions_spec.js
index a976c6b837f..2f0385454d7 100644
--- a/spec/javascripts/diffs/components/compare_versions_spec.js
+++ b/spec/javascripts/diffs/components/compare_versions_spec.js
@@ -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;
diff --git a/spec/javascripts/diffs/components/settings_dropdown_spec.js b/spec/javascripts/diffs/components/settings_dropdown_spec.js
new file mode 100644
index 00000000000..5031846cff0
--- /dev/null
+++ b/spec/javascripts/diffs/components/settings_dropdown_spec.js
@@ -0,0 +1,167 @@
+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,
+      );
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 0a903bb7519..08b0b4f9e45 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -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);
-    });
-  });
 });
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index 033b5e86dbe..b53ae4cecfd 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -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();
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index c595c38ef55..a6f3f9b9dc3 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -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);
+    });
+  });
 });