2 files changed, 98 insertions, 0 deletions

diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 08e25d2004e..86e2b03292d 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -54,6 +54,7 @@ describe('Diffs tree list component', () => {
           key: 'index.js',
           name: 'index.js',
           path: 'index.js',
+          truncatedPath: '../index.js',
           removedLines: 0,
           tempFile: true,
           type: 'blob',
@@ -106,6 +107,55 @@ describe('Diffs tree list component', () => {
 
       expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', '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('../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);
+    });
   });
 
   describe('clearSearch', () => {
@@ -117,4 +167,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..6a0a69967fa 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,
@@ -462,6 +470,7 @@ describe('DiffsStoreUtils', () => {
         {
           key: 'app',
           path: 'app',
+          truncatedPath: 'app',
           name: 'app',
           type: 'tree',
           tree: [
@@ -473,6 +482,7 @@ describe('DiffsStoreUtils', () => {
               key: 'app/index.js',
               name: 'index.js',
               path: 'app/index.js',
+              truncatedPath: 'app/index.js',
               removedLines: 10,
               tempFile: false,
               type: 'blob',
@@ -481,6 +491,7 @@ describe('DiffsStoreUtils', () => {
             {
               key: 'app/test',
               path: 'app/test',
+              truncatedPath: 'app/test',
               name: 'test',
               type: 'tree',
               opened: true,
@@ -493,6 +504,21 @@ describe('DiffsStoreUtils', () => {
                   key: 'app/test/index.js',
                   name: 'index.js',
                   path: 'app/test/index.js',
+                  truncatedPath: 'app/test/index.js',
+                  removedLines: 0,
+                  tempFile: true,
+                  type: 'blob',
+                  tree: [],
+                },
+                {
+                  addedLines: 0,
+                  changed: true,
+                  deleted: false,
+                  fileHash: 'test',
+                  key: 'app/test/filepathneedstruncating.js',
+                  name: 'filepathneedstruncating.js',
+                  path: 'app/test/filepathneedstruncating.js',
+                  truncatedPath: '...est/filepathneedstruncating.js',
                   removedLines: 0,
                   tempFile: true,
                   type: 'blob',
@@ -506,6 +532,7 @@ describe('DiffsStoreUtils', () => {
         {
           key: 'package.json',
           path: 'package.json',
+          truncatedPath: 'package.json',
           name: 'package.json',
           type: 'blob',
           changed: true,
@@ -527,6 +554,7 @@ describe('DiffsStoreUtils', () => {
         'app/index.js',
         'app/test',
         'app/test/index.js',
+        'app/test/filepathneedstruncating.js',
         'package.json',
       ]);
     });