Add latest changes from gitlab-org/gitlab@master

3 files changed, 126 insertions, 35 deletions

diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index fb5cf4dfd0a..2ad04a7c371 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -11,7 +11,7 @@ import CompareVersions from '~/diffs/components/compare_versions.vue';
 import DiffFile from '~/diffs/components/diff_file.vue';
 import NoChanges from '~/diffs/components/no_changes.vue';
 import findingsDrawer from '~/diffs/components/shared/findings_drawer.vue';
-import TreeList from '~/diffs/components/tree_list.vue';
+import DiffsFileTree from '~/diffs/components/diffs_file_tree.vue';
 
 import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
 import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
@@ -252,34 +252,6 @@ describe('diffs/components/app', () => {
     });
   });
 
-  describe('resizable', () => {
-    afterEach(() => {
-      localStorage.removeItem('mr_tree_list_width');
-    });
-
-    it('sets initial width when no localStorage has been set', () => {
-      createComponent();
-
-      expect(wrapper.vm.treeWidth).toEqual(320);
-    });
-
-    it('sets initial width to localStorage size', () => {
-      localStorage.setItem('mr_tree_list_width', '200');
-
-      createComponent();
-
-      expect(wrapper.vm.treeWidth).toEqual(200);
-    });
-
-    it('sets width of tree list', () => {
-      createComponent({}, ({ state }) => {
-        state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
-      });
-
-      expect(wrapper.find('.js-diff-tree-list').element.style.width).toEqual('320px');
-    });
-  });
-
   it('marks current diff file based on currently highlighted row', async () => {
     window.location.hash = 'ABC_123';
 
@@ -596,18 +568,21 @@ describe('diffs/components/app', () => {
       );
     });
 
-    it("doesn't render tree list when no changes exist", () => {
+    it('should always render diffs file tree', () => {
       createComponent();
-
-      expect(wrapper.findComponent(TreeList).exists()).toBe(false);
+      expect(wrapper.findComponent(DiffsFileTree).exists()).toBe(true);
     });
 
-    it('should render tree list', () => {
+    it('should pass renderDiffFiles to file tree as true when files are present', () => {
       createComponent({}, ({ state }) => {
         state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
       });
+      expect(wrapper.findComponent(DiffsFileTree).props('renderDiffFiles')).toBe(true);
+    });
 
-      expect(wrapper.findComponent(TreeList).exists()).toBe(true);
+    it('should pass renderDiffFiles to file tree as false without files', () => {
+      createComponent();
+      expect(wrapper.findComponent(DiffsFileTree).props('renderDiffFiles')).toBe(false);
     });
   });
 
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index cbbfd88260b..3601f0cc7b0 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -84,7 +84,7 @@ describe('CompareVersions', () => {
       const treeListBtn = wrapper.find('.js-toggle-tree-list');
 
       expect(treeListBtn.exists()).toBe(true);
-      expect(treeListBtn.attributes('title')).toBe('Hide file browser');
+      expect(treeListBtn.attributes('title')).toBe('Hide file browser (or press F)');
       expect(treeListBtn.props('icon')).toBe('file-tree');
     });
 
diff --git a/spec/frontend/diffs/components/diffs_file_tree_spec.js b/spec/frontend/diffs/components/diffs_file_tree_spec.js
new file mode 100644
index 00000000000..a79023a07cb
--- /dev/null
+++ b/spec/frontend/diffs/components/diffs_file_tree_spec.js
@@ -0,0 +1,116 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { Mousetrap } from '~/lib/mousetrap';
+import DiffsFileTree from '~/diffs/components/diffs_file_tree.vue';
+import TreeList from '~/diffs/components/tree_list.vue';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import { SET_SHOW_TREE_LIST } from '~/diffs/store/mutation_types';
+import createDiffsStore from '../create_diffs_store';
+
+describe('DiffsFileTree', () => {
+  let wrapper;
+  let store;
+
+  const createComponent = ({ renderDiffFiles = true, showTreeList = true } = {}) => {
+    store = createDiffsStore();
+    store.commit(`diffs/${SET_SHOW_TREE_LIST}`, showTreeList);
+    wrapper = shallowMount(DiffsFileTree, {
+      store,
+      propsData: {
+        renderDiffFiles,
+      },
+    });
+  };
+
+  describe('visibility', () => {
+    describe('when renderDiffFiles and showTreeList are true', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('tree list is visible', () => {
+        expect(wrapper.findComponent(TreeList).exists()).toBe(true);
+      });
+    });
+
+    describe('when renderDiffFiles and showTreeList are false', () => {
+      beforeEach(() => {
+        createComponent({ renderDiffFiles: false, showTreeList: false });
+      });
+
+      it('tree list is hidden', () => {
+        expect(wrapper.findComponent(TreeList).exists()).toBe(false);
+      });
+    });
+  });
+
+  it('emits toggled event', async () => {
+    createComponent();
+    store.commit(`diffs/${SET_SHOW_TREE_LIST}`, false);
+    await nextTick();
+    expect(wrapper.emitted('toggled')).toStrictEqual([[]]);
+  });
+
+  it('toggles when "f" hotkey is pressed', async () => {
+    createComponent();
+    Mousetrap.trigger('f');
+    await nextTick();
+    expect(wrapper.findComponent(TreeList).exists()).toBe(false);
+  });
+
+  describe('size', () => {
+    const checkWidth = (width) => {
+      expect(wrapper.element.style.width).toEqual(`${width}px`);
+      expect(wrapper.findComponent(PanelResizer).props('startSize')).toEqual(width);
+    };
+
+    afterEach(() => {
+      localStorage.removeItem('mr_tree_list_width');
+    });
+
+    describe('when no localStorage record is set', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('sets initial width when no localStorage has been set', () => {
+        checkWidth(320);
+      });
+    });
+
+    it('sets initial width to localStorage size', () => {
+      localStorage.setItem('mr_tree_list_width', '200');
+      createComponent();
+      checkWidth(200);
+    });
+
+    it('sets width of tree list', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
+      });
+      checkWidth(320);
+    });
+
+    it('updates width', async () => {
+      const WIDTH = 500;
+      createComponent();
+      wrapper.findComponent(PanelResizer).vm.$emit('update:size', WIDTH);
+      await nextTick();
+      checkWidth(WIDTH);
+    });
+
+    it('passes down hideFileStats as true when width is less than 260', async () => {
+      createComponent();
+      wrapper.findComponent(PanelResizer).vm.$emit('update:size', 200);
+      await nextTick();
+      expect(wrapper.findComponent(TreeList).props('hideFileStats')).toBe(true);
+    });
+
+    it('passes down hideFileStats as false when width is bigger than 260', async () => {
+      createComponent();
+      wrapper.findComponent(PanelResizer).vm.$emit('update:size', 300);
+      await nextTick();
+      expect(wrapper.findComponent(TreeList).props('hideFileStats')).toBe(false);
+    });
+  });
+});