Merge branch 'mr-file-list' into 'master'

Add list mode to file browser in diffs

Closes #51859

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

3 files changed, 128 insertions, 2 deletions

diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 08e25d2004e..fc94d0bab5b 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -53,7 +53,7 @@ describe('Diffs tree list component', () => {
           fileHash: 'test',
           key: 'index.js',
           name: 'index.js',
-          path: 'index.js',
+          path: 'app/index.js',
           removedLines: 0,
           tempFile: true,
           type: 'blob',
@@ -104,7 +104,55 @@ describe('Diffs tree list component', () => {
 
       vm.$el.querySelector('.file-row').click();
 
-      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'index.js');
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'app/index.js');
+    });
+
+    it('renders as file list when renderTreeList is false', done => {
+      vm.renderTreeList = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelectorAll('.file-row').length).toBe(1);
+
+        done();
+      });
+    });
+
+    it('renders file paths when renderTreeList is false', done => {
+      vm.renderTreeList = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-row').textContent).toContain('app/index.js');
+
+        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);
     });
   });
 
@@ -117,4 +165,24 @@ 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/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index ef367fc09fa..f49dee3696d 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -445,6 +445,14 @@ describe('DiffsStoreUtils', () => {
           fileHash: 'test',
         },
         {
+          newPath: 'app/test/filepathneedstruncating.js',
+          deletedFile: false,
+          newFile: true,
+          removedLines: 0,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+        {
           newPath: 'package.json',
           deletedFile: true,
           newFile: false,
@@ -498,6 +506,19 @@ describe('DiffsStoreUtils', () => {
                   type: 'blob',
                   tree: [],
                 },
+                {
+                  addedLines: 0,
+                  changed: true,
+                  deleted: false,
+                  fileHash: 'test',
+                  key: 'app/test/filepathneedstruncating.js',
+                  name: 'filepathneedstruncating.js',
+                  path: 'app/test/filepathneedstruncating.js',
+                  removedLines: 0,
+                  tempFile: true,
+                  type: 'blob',
+                  tree: [],
+                },
               ],
             },
           ],
@@ -527,6 +548,7 @@ describe('DiffsStoreUtils', () => {
         'app/index.js',
         'app/test',
         'app/test/index.js',
+        'app/test/filepathneedstruncating.js',
         'package.json',
       ]);
     });
diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js
index 9914c0b70f3..67752c1c455 100644
--- a/spec/javascripts/vue_shared/components/file_row_spec.js
+++ b/spec/javascripts/vue_shared/components/file_row_spec.js
@@ -71,4 +71,40 @@ describe('RepoFile', () => {
 
     expect(vm.$el.querySelector('.file-row-name').style.marginLeft).toBe('32px');
   });
+
+  describe('outputText', () => {
+    beforeEach(done => {
+      createComponent({
+        file: {
+          ...file(),
+          path: 'app/assets/index.js',
+        },
+        level: 0,
+      });
+
+      vm.displayTextKey = 'path';
+
+      vm.$nextTick(done);
+    });
+
+    it('returns text if truncateStart is 0', done => {
+      vm.truncateStart = 0;
+
+      vm.$nextTick(() => {
+        expect(vm.outputText).toBe('app/assets/index.js');
+
+        done();
+      });
+    });
+
+    it('returns text truncated at start', done => {
+      vm.truncateStart = 5;
+
+      vm.$nextTick(() => {
+        expect(vm.outputText).toBe('...ssets/index.js');
+
+        done();
+      });
+    });
+  });
 });