Decouple file row from IDE

This makes the file row component re-usable ouside of the Web IDE

Pre-request for https://gitlab.com/gitlab-org/gitlab-ce/issues/14249

3 files changed, 233 insertions, 145 deletions

diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js
new file mode 100644
index 00000000000..60dabe28045
--- /dev/null
+++ b/spec/javascripts/ide/components/file_row_extra_spec.js
@@ -0,0 +1,159 @@
+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import FileRowExtra from '~/ide/components/file_row_extra.vue';
+import { file, resetStore } from '../helpers';
+
+describe('IDE extra file row component', () => {
+  let Component;
+  let vm;
+  let unstagedFilesCount = 0;
+  let stagedFilesCount = 0;
+  let changesCount = 0;
+
+  beforeAll(() => {
+    Component = Vue.extend(FileRowExtra);
+  });
+
+  beforeEach(() => {
+    vm = createComponentWithStore(Component, createStore(), {
+      file: {
+        ...file('test'),
+      },
+      mouseOver: false,
+    });
+
+    spyOnProperty(vm, 'getUnstagedFilesCountForPath').and.returnValue(() => unstagedFilesCount);
+    spyOnProperty(vm, 'getStagedFilesCountForPath').and.returnValue(() => stagedFilesCount);
+    spyOnProperty(vm, 'getChangesInFolder').and.returnValue(() => changesCount);
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    resetStore(vm.$store);
+
+    stagedFilesCount = 0;
+    unstagedFilesCount = 0;
+    changesCount = 0;
+  });
+
+  describe('folderChangesTooltip', () => {
+    it('returns undefined when changes count is 0', () => {
+      expect(vm.folderChangesTooltip).toBe(undefined);
+    });
+
+    it('returns unstaged changes text', () => {
+      changesCount = 1;
+      unstagedFilesCount = 1;
+
+      expect(vm.folderChangesTooltip).toBe('1 unstaged change');
+    });
+
+    it('returns staged changes text', () => {
+      changesCount = 1;
+      stagedFilesCount = 1;
+
+      expect(vm.folderChangesTooltip).toBe('1 staged change');
+    });
+
+    it('returns staged and unstaged changes text', () => {
+      changesCount = 1;
+      stagedFilesCount = 1;
+      unstagedFilesCount = 1;
+
+      expect(vm.folderChangesTooltip).toBe('1 unstaged and 1 staged changes');
+    });
+  });
+
+  describe('show tree changes count', () => {
+    it('does not show for blobs', () => {
+      vm.file.type = 'blob';
+
+      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+    });
+
+    it('does not show when changes count is 0', () => {
+      vm.file.type = 'tree';
+
+      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+    });
+
+    it('does not show when tree is open', done => {
+      vm.file.type = 'tree';
+      vm.file.opened = true;
+      changesCount = 1;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+
+        done();
+      });
+    });
+
+    it('shows for trees with changes', done => {
+      vm.file.type = 'tree';
+      vm.file.opened = false;
+      changesCount = 1;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-tree-changes')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  describe('changes file icon', () => {
+    it('hides when file is not changed', () => {
+      expect(vm.$el.querySelector('.ide-file-changed-icon')).toBe(null);
+    });
+
+    it('shows when file is changed', done => {
+      vm.file.changed = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('shows when file is staged', done => {
+      vm.file.staged = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('shows when file is a tempFile', done => {
+      vm.file.tempFile = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  describe('merge request icon', () => {
+    it('hides when not a merge request change', () => {
+      expect(vm.$el.querySelector('.ic-git-merge')).toBe(null);
+    });
+
+    it('shows when a merge request change', done => {
+      vm.file.mrChange = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ic-git-merge')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/repo_file_spec.js b/spec/javascripts/ide/components/repo_file_spec.js
deleted file mode 100644
index fc639a672e2..00000000000
--- a/spec/javascripts/ide/components/repo_file_spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoFile from '~/ide/components/repo_file.vue';
-import router from '~/ide/ide_router';
-import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { file } from '../helpers';
-
-describe('RepoFile', () => {
-  let vm;
-
-  function createComponent(propsData) {
-    const RepoFile = Vue.extend(repoFile);
-
-    vm = createComponentWithStore(RepoFile, store, propsData);
-
-    vm.$mount();
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders link, icon and name', () => {
-    createComponent({
-      file: file('t4'),
-      level: 0,
-    });
-
-    const name = vm.$el.querySelector('.ide-file-name');
-
-    expect(name.href).toMatch('');
-    expect(name.textContent.trim()).toEqual(vm.file.name);
-  });
-
-  it('fires clickFile when the link is clicked', done => {
-    spyOn(router, 'push');
-    createComponent({
-      file: file('t3'),
-      level: 0,
-    });
-
-    vm.$el.querySelector('.file-name').click();
-
-    setTimeout(() => {
-      expect(router.push).toHaveBeenCalledWith(`/project${vm.file.url}`);
-
-      done();
-    });
-  });
-
-  describe('folder', () => {
-    it('renders changes count inside folder', () => {
-      const f = {
-        ...file('folder'),
-        path: 'testing',
-        type: 'tree',
-        branchId: 'master',
-        projectId: 'project',
-      };
-
-      store.state.changedFiles.push({
-        ...file('fileName'),
-        path: 'testing/fileName',
-      });
-
-      createComponent({
-        file: f,
-        level: 0,
-      });
-
-      const treeChangesEl = vm.$el.querySelector('.ide-tree-changes');
-
-      expect(treeChangesEl).not.toBeNull();
-      expect(treeChangesEl.textContent).toContain('1');
-    });
-
-    it('renders action dropdown', done => {
-      createComponent({
-        file: {
-          ...file('t4'),
-          type: 'tree',
-          branchId: 'master',
-          projectId: 'project',
-        },
-        level: 0,
-      });
-
-      setTimeout(() => {
-        expect(vm.$el.querySelector('.ide-new-btn')).not.toBeNull();
-
-        done();
-      });
-    });
-  });
-
-  describe('locked file', () => {
-    let f;
-
-    beforeEach(() => {
-      f = file('locked file');
-      f.file_lock = {
-        user: {
-          name: 'testuser',
-          updated_at: new Date(),
-        },
-      };
-
-      createComponent({
-        file: f,
-        level: 0,
-      });
-    });
-
-    it('renders lock icon', () => {
-      expect(vm.$el.querySelector('.file-status-icon')).not.toBeNull();
-    });
-
-    it('renders a tooltip', () => {
-      expect(
-        vm.$el.querySelector('.ide-file-name span:nth-child(2)').dataset.originalTitle,
-      ).toContain('Locked by testuser');
-    });
-  });
-
-  it('calls scrollIntoView if made active', done => {
-    createComponent({
-      file: {
-        ...file(),
-        type: 'blob',
-        active: false,
-      },
-      level: 0,
-    });
-
-    spyOn(vm, 'scrollIntoView');
-
-    vm.file.active = true;
-
-    vm.$nextTick(() => {
-      expect(vm.scrollIntoView).toHaveBeenCalled();
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js
new file mode 100644
index 00000000000..9914c0b70f3
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/file_row_spec.js
@@ -0,0 +1,74 @@
+import Vue from 'vue';
+import FileRow from '~/vue_shared/components/file_row.vue';
+import { file } from 'spec/ide/helpers';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('RepoFile', () => {
+  let vm;
+
+  function createComponent(propsData) {
+    const FileRowComponent = Vue.extend(FileRow);
+
+    vm = mountComponent(FileRowComponent, propsData);
+  }
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders name', () => {
+    createComponent({
+      file: file('t4'),
+      level: 0,
+    });
+
+    const name = vm.$el.querySelector('.file-row-name');
+
+    expect(name.textContent.trim()).toEqual(vm.file.name);
+  });
+
+  it('emits toggleTreeOpen on click', () => {
+    createComponent({
+      file: {
+        ...file('t3'),
+        type: 'tree',
+      },
+      level: 0,
+    });
+    spyOn(vm, '$emit').and.stub();
+
+    vm.$el.querySelector('.file-row').click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('toggleTreeOpen', vm.file.path);
+  });
+
+  it('calls scrollIntoView if made active', done => {
+    createComponent({
+      file: {
+        ...file(),
+        type: 'blob',
+        active: false,
+      },
+      level: 0,
+    });
+
+    spyOn(vm, 'scrollIntoView').and.stub();
+
+    vm.file.active = true;
+
+    vm.$nextTick(() => {
+      expect(vm.scrollIntoView).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  it('indents row based on level', () => {
+    createComponent({
+      file: file('t4'),
+      level: 2,
+    });
+
+    expect(vm.$el.querySelector('.file-row-name').style.marginLeft).toBe('32px');
+  });
+});