Merge branch 'master' into bootstrap4

7 files changed, 564 insertions, 9 deletions

diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
new file mode 100644
index 00000000000..4f208e946d2
--- /dev/null
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -0,0 +1,308 @@
+import Vue from 'vue';
+import store from '~/ide/stores';
+import FindFileComponent from '~/ide/components/file_finder/index.vue';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
+import router from '~/ide/ide_router';
+import { file, resetStore } from '../../helpers';
+import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE File finder item spec', () => {
+  const Component = Vue.extend(FindFileComponent);
+  let vm;
+
+  beforeEach(done => {
+    setFixtures('<div id="app"></div>');
+
+    vm = mountComponentWithStore(Component, {
+      store,
+      el: '#app',
+      props: {
+        index: 0,
+      },
+    });
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  describe('with entries', () => {
+    beforeEach(done => {
+      Vue.set(vm.$store.state.entries, 'folder', {
+        ...file('folder'),
+        path: 'folder',
+        type: 'folder',
+      });
+
+      Vue.set(vm.$store.state.entries, 'index.js', {
+        ...file('index.js'),
+        path: 'index.js',
+        type: 'blob',
+        url: '/index.jsurl',
+      });
+
+      Vue.set(vm.$store.state.entries, 'component.js', {
+        ...file('component.js'),
+        path: 'component.js',
+        type: 'blob',
+      });
+
+      setTimeout(done);
+    });
+
+    it('renders list of blobs', () => {
+      expect(vm.$el.textContent).toContain('index.js');
+      expect(vm.$el.textContent).toContain('component.js');
+      expect(vm.$el.textContent).not.toContain('folder');
+    });
+
+    it('filters entries', done => {
+      vm.searchText = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.textContent).toContain('index.js');
+        expect(vm.$el.textContent).not.toContain('component.js');
+
+        done();
+      });
+    });
+
+    it('shows clear button when searchText is not empty', done => {
+      vm.searchText = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-input-clear').classList).toContain('show');
+        expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden');
+
+        done();
+      });
+    });
+
+    it('clear button resets searchText', done => {
+      vm.searchText = 'index';
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.dropdown-input-clear').click();
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.searchText).toBe('');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('clear button focues search input', done => {
+      spyOn(vm.$refs.searchInput, 'focus');
+      vm.searchText = 'index';
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.dropdown-input-clear').click();
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    describe('listShowCount', () => {
+      it('returns 1 when no filtered entries exist', done => {
+        vm.searchText = 'testing 123';
+
+        vm.$nextTick(() => {
+          expect(vm.listShowCount).toBe(1);
+
+          done();
+        });
+      });
+
+      it('returns entries length when not filtered', () => {
+        expect(vm.listShowCount).toBe(2);
+      });
+    });
+
+    describe('listHeight', () => {
+      it('returns 55 when entries exist', () => {
+        expect(vm.listHeight).toBe(55);
+      });
+
+      it('returns 33 when entries dont exist', done => {
+        vm.searchText = 'testing 123';
+
+        vm.$nextTick(() => {
+          expect(vm.listHeight).toBe(33);
+
+          done();
+        });
+      });
+    });
+
+    describe('filteredBlobsLength', () => {
+      it('returns length of filtered blobs', done => {
+        vm.searchText = 'index';
+
+        vm.$nextTick(() => {
+          expect(vm.filteredBlobsLength).toBe(1);
+
+          done();
+        });
+      });
+    });
+
+    describe('watches', () => {
+      describe('searchText', () => {
+        it('resets focusedIndex when updated', done => {
+          vm.focusedIndex = 1;
+          vm.searchText = 'test';
+
+          vm.$nextTick(() => {
+            expect(vm.focusedIndex).toBe(0);
+
+            done();
+          });
+        });
+      });
+
+      describe('fileFindVisible', () => {
+        it('returns searchText when false', done => {
+          vm.searchText = 'test';
+          vm.$store.state.fileFindVisible = true;
+
+          vm
+            .$nextTick()
+            .then(() => {
+              vm.$store.state.fileFindVisible = false;
+            })
+            .then(vm.$nextTick)
+            .then(() => {
+              expect(vm.searchText).toBe('');
+            })
+            .then(done)
+            .catch(done.fail);
+        });
+      });
+    });
+
+    describe('openFile', () => {
+      beforeEach(() => {
+        spyOn(router, 'push');
+        spyOn(vm, 'toggleFileFinder');
+      });
+
+      it('closes file finder', () => {
+        vm.openFile(vm.$store.state.entries['index.js']);
+
+        expect(vm.toggleFileFinder).toHaveBeenCalled();
+      });
+
+      it('pushes to router', () => {
+        vm.openFile(vm.$store.state.entries['index.js']);
+
+        expect(router.push).toHaveBeenCalledWith('/project/index.jsurl');
+      });
+    });
+
+    describe('onKeyup', () => {
+      it('opens file on enter key', done => {
+        const event = new CustomEvent('keyup');
+        event.keyCode = ENTER_KEY_CODE;
+
+        spyOn(vm, 'openFile');
+
+        vm.$refs.searchInput.dispatchEvent(event);
+
+        vm.$nextTick(() => {
+          expect(vm.openFile).toHaveBeenCalledWith(vm.$store.state.entries['index.js']);
+
+          done();
+        });
+      });
+
+      it('closes file finder on esc key', done => {
+        const event = new CustomEvent('keyup');
+        event.keyCode = ESC_KEY_CODE;
+
+        spyOn(vm, 'toggleFileFinder');
+
+        vm.$refs.searchInput.dispatchEvent(event);
+
+        vm.$nextTick(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+
+          done();
+        });
+      });
+    });
+
+    describe('onKeyDown', () => {
+      let el;
+
+      beforeEach(() => {
+        el = vm.$refs.searchInput;
+      });
+
+      describe('up key', () => {
+        const event = new CustomEvent('keydown');
+        event.keyCode = UP_KEY_CODE;
+
+        it('resets to last index when at top', () => {
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(1);
+        });
+
+        it('minus 1 from focusedIndex', () => {
+          vm.focusedIndex = 1;
+
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(0);
+        });
+      });
+
+      describe('down key', () => {
+        const event = new CustomEvent('keydown');
+        event.keyCode = DOWN_KEY_CODE;
+
+        it('resets to first index when at bottom', () => {
+          vm.focusedIndex = 1;
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(0);
+        });
+
+        it('adds 1 to focusedIndex', () => {
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(1);
+        });
+      });
+    });
+  });
+
+  describe('without entries', () => {
+    it('renders loading text when loading', done => {
+      store.state.loading = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.textContent).toContain('Loading...');
+
+        done();
+      });
+    });
+
+    it('renders no files text', () => {
+      expect(vm.$el.textContent).toContain('No files found.');
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/file_finder/item_spec.js b/spec/javascripts/ide/components/file_finder/item_spec.js
new file mode 100644
index 00000000000..0f1116c6912
--- /dev/null
+++ b/spec/javascripts/ide/components/file_finder/item_spec.js
@@ -0,0 +1,140 @@
+import Vue from 'vue';
+import ItemComponent from '~/ide/components/file_finder/item.vue';
+import { file } from '../../helpers';
+import createComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE File finder item spec', () => {
+  const Component = Vue.extend(ItemComponent);
+  let vm;
+  let localFile;
+
+  beforeEach(() => {
+    localFile = {
+      ...file(),
+      name: 'test file',
+      path: 'test/file',
+    };
+
+    vm = createComponent(Component, {
+      file: localFile,
+      focused: true,
+      searchText: '',
+      index: 0,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders file name & path', () => {
+    expect(vm.$el.textContent).toContain('test file');
+    expect(vm.$el.textContent).toContain('test/file');
+  });
+
+  describe('focused', () => {
+    it('adds is-focused class', () => {
+      expect(vm.$el.classList).toContain('is-focused');
+    });
+
+    it('does not have is-focused class when not focused', done => {
+      vm.focused = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.classList).not.toContain('is-focused');
+
+        done();
+      });
+    });
+  });
+
+  describe('changed file icon', () => {
+    it('does not render when not a changed or temp file', () => {
+      expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null);
+    });
+
+    it('renders when a changed file', done => {
+      vm.file.changed = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('renders when a temp file', done => {
+      vm.file.tempFile = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  it('emits event when clicked', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('click', vm.file);
+  });
+
+  describe('path', () => {
+    let el;
+
+    beforeEach(done => {
+      vm.searchText = 'file';
+
+      el = vm.$el.querySelector('.diff-changed-file-path');
+
+      vm.$nextTick(done);
+    });
+
+    it('highlights text', () => {
+      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+    });
+
+    it('adds ellipsis to long text', done => {
+      vm.file.path = new Array(70)
+        .fill()
+        .map((_, i) => `${i}-`)
+        .join('');
+
+      vm.$nextTick(() => {
+        expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`);
+        done();
+      });
+    });
+  });
+
+  describe('name', () => {
+    let el;
+
+    beforeEach(done => {
+      vm.searchText = 'file';
+
+      el = vm.$el.querySelector('.diff-changed-file-name');
+
+      vm.$nextTick(done);
+    });
+
+    it('highlights text', () => {
+      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+    });
+
+    it('does not add ellipsis to long text', done => {
+      vm.file.name = new Array(70)
+        .fill()
+        .map((_, i) => `${i}-`)
+        .join('');
+
+      vm.$nextTick(() => {
+        expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/ide_spec.js b/spec/javascripts/ide/components/ide_spec.js
index 5bd890094cc..7bfcfc90572 100644
--- a/spec/javascripts/ide/components/ide_spec.js
+++ b/spec/javascripts/ide/components/ide_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import Mousetrap from 'mousetrap';
 import store from '~/ide/stores';
 import ide from '~/ide/components/ide.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
@@ -38,4 +39,68 @@ describe('ide component', () => {
       done();
     });
   });
+
+  describe('file finder', () => {
+    beforeEach(done => {
+      spyOn(vm, 'toggleFileFinder');
+
+      vm.$store.state.fileFindVisible = true;
+
+      vm.$nextTick(done);
+    });
+
+    it('calls toggleFileFinder on `t` key press', done => {
+      Mousetrap.trigger('t');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls toggleFileFinder on `command+p` key press', done => {
+      Mousetrap.trigger('command+p');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls toggleFileFinder on `ctrl+p` key press', done => {
+      Mousetrap.trigger('ctrl+p');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('always allows `command+p` to trigger toggleFileFinder', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'command+p'),
+      ).toBe(false);
+    });
+
+    it('always allows `ctrl+p` to trigger toggleFileFinder', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'ctrl+p'),
+      ).toBe(false);
+    });
+
+    it('onlys handles `t` when focused in input-field', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 't'),
+      ).toBe(true);
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/actions_spec.js b/spec/javascripts/ide/stores/actions_spec.js
index 22a7441ba92..b6eadf56f9d 100644
--- a/spec/javascripts/ide/stores/actions_spec.js
+++ b/spec/javascripts/ide/stores/actions_spec.js
@@ -1,6 +1,5 @@
-import * as urlUtils from '~/lib/utils/url_utility';
+import actions, { stageAllChanges, unstageAllChanges, toggleFileFinder } from '~/ide/stores/actions';
 import store from '~/ide/stores';
-import * as actions from '~/ide/stores/actions';
 import * as types from '~/ide/stores/mutation_types';
 import router from '~/ide/ide_router';
 import { resetStore, file } from '../helpers';
@@ -17,12 +16,12 @@ describe('Multi-file store actions', () => {
 
   describe('redirectToUrl', () => {
     it('calls visitUrl', done => {
-      spyOn(urlUtils, 'visitUrl');
+      const visitUrl = spyOnDependency(actions, 'visitUrl');
 
       store
         .dispatch('redirectToUrl', 'test')
         .then(() => {
-          expect(urlUtils.visitUrl).toHaveBeenCalledWith('test');
+          expect(visitUrl).toHaveBeenCalledWith('test');
 
           done();
         })
@@ -298,7 +297,7 @@ describe('Multi-file store actions', () => {
       store.state.changedFiles.push(file(), file('new'));
 
       testAction(
-        actions.stageAllChanges,
+        stageAllChanges,
         null,
         store.state,
         [
@@ -316,7 +315,7 @@ describe('Multi-file store actions', () => {
       store.state.stagedFiles.push(file(), file('new'));
 
       testAction(
-        actions.unstageAllChanges,
+        unstageAllChanges,
         null,
         store.state,
         [
@@ -340,4 +339,17 @@ describe('Multi-file store actions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('toggleFileFinder', () => {
+    it('commits TOGGLE_FILE_FINDER', done => {
+      testAction(
+        toggleFileFinder,
+        true,
+        null,
+        [{ type: 'TOGGLE_FILE_FINDER', payload: true }],
+        [],
+        done,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/getters_spec.js b/spec/javascripts/ide/stores/getters_spec.js
index 8d04b83928c..b6b4dd28729 100644
--- a/spec/javascripts/ide/stores/getters_spec.js
+++ b/spec/javascripts/ide/stores/getters_spec.js
@@ -64,4 +64,24 @@ describe('IDE store getters', () => {
       expect(getters.currentMergeRequest(localState)).toBeNull();
     });
   });
+
+  describe('allBlobs', () => {
+    beforeEach(() => {
+      Object.assign(localState.entries, {
+        index: { type: 'blob', name: 'index', lastOpenedAt: 0 },
+        app: { type: 'blob', name: 'blob', lastOpenedAt: 0 },
+        folder: { type: 'folder', name: 'folder', lastOpenedAt: 0 },
+      });
+    });
+
+    it('returns only blobs', () => {
+      expect(getters.allBlobs(localState).length).toBe(2);
+    });
+
+    it('returns list sorted by lastOpenedAt', () => {
+      localState.entries.app.lastOpenedAt = new Date().getTime();
+
+      expect(getters.allBlobs(localState)[0].name).toBe('blob');
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/modules/commit/actions_spec.js b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
index 116967208e0..b2b4b85ca42 100644
--- a/spec/javascripts/ide/stores/modules/commit/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
@@ -1,7 +1,7 @@
+import actions from '~/ide/stores/actions';
 import store from '~/ide/stores';
 import service from '~/ide/services';
 import router from '~/ide/ide_router';
-import * as urlUtils from '~/lib/utils/url_utility';
 import eventHub from '~/ide/eventhub';
 import * as consts from '~/ide/stores/modules/commit/constants';
 import { resetStore, file } from 'spec/ide/helpers';
@@ -307,8 +307,10 @@ describe('IDE commit module actions', () => {
   });
 
   describe('commitChanges', () => {
+    let visitUrl;
+
     beforeEach(() => {
-      spyOn(urlUtils, 'visitUrl');
+      visitUrl = spyOnDependency(actions, 'visitUrl');
 
       document.body.innerHTML += '<div class="flash-container"></div>';
 
@@ -461,7 +463,7 @@ describe('IDE commit module actions', () => {
           store
             .dispatch('commit/commitChanges')
             .then(() => {
-              expect(urlUtils.visitUrl).toHaveBeenCalledWith(
+              expect(visitUrl).toHaveBeenCalledWith(
                 `webUrl/merge_requests/new?merge_request[source_branch]=${
                   store.getters['commit/newBranchName']
                 }&merge_request[target_branch]=master`,
diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js
index 26e7ed4535e..575039e755e 100644
--- a/spec/javascripts/ide/stores/mutations_spec.js
+++ b/spec/javascripts/ide/stores/mutations_spec.js
@@ -86,4 +86,12 @@ describe('Multi-file store mutations', () => {
       expect(localState.viewer).toBe('diff');
     });
   });
+
+  describe('TOGGLE_FILE_FINDER', () => {
+    it('updates fileFindVisible', () => {
+      mutations.TOGGLE_FILE_FINDER(localState, true);
+
+      expect(localState.fileFindVisible).toBe(true);
+    });
+  });
 });