1 files changed, 136 insertions, 0 deletions
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
new file mode 100644
index 00000000000..90616ae13ca
--- /dev/null
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -0,0 +1,136 @@
+import Vue from 'vue';
+import repoFile from '~/repo/components/repo_file.vue';
+
+describe('RepoFile', () => {
+  const updated = 'updated';
+  const file = {
+    icon: 'icon',
+    url: 'url',
+    name: 'name',
+    lastCommitMessage: 'message',
+    lastCommitUpdate: Date.now(),
+    level: 10,
+  };
+  const activeFile = {
+    url: 'url',
+  };
+
+  function createComponent(propsData) {
+    const RepoFile = Vue.extend(repoFile);
+
+    return new RepoFile({
+      propsData,
+    }).$mount();
+  }
+
+  beforeEach(() => {
+    spyOn(repoFile.mixins[0].methods, 'timeFormated').and.returnValue(updated);
+  });
+
+  it('renders link, icon, name and last commit details', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+    });
+    const name = vm.$el.querySelector('.repo-file-name');
+    const fileIcon = vm.$el.querySelector('.file-icon');
+
+    expect(vm.$el.classList.contains('active')).toBeTruthy();
+    expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
+    expect(name.title).toEqual(file.url);
+    expect(name.href).toMatch(`/${file.url}`);
+    expect(name.textContent).toEqual(file.name);
+    expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
+    expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated);
+    expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
+    expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
+  });
+
+  it('does render if hasFiles is true and is loading tree', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
+  });
+
+  it('renders a spinner if the file is loading', () => {
+    file.loading = true;
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`);
+  });
+
+  it('does not render if loading tree', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not render commit message and datetime if mini', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      isMini: true,
+    });
+
+    expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
+    expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
+  });
+
+  it('does not set active class if file is active file', () => {
+    const vm = createComponent({
+      file,
+      activeFile: {},
+    });
+
+    expect(vm.$el.classList.contains('active')).toBeFalsy();
+  });
+
+  it('fires linkClicked when the link is clicked', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+    });
+
+    spyOn(vm, 'linkClicked');
+
+    vm.$el.querySelector('.repo-file-name').click();
+
+    expect(vm.linkClicked).toHaveBeenCalledWith(file);
+  });
+
+  describe('methods', () => {
+    describe('linkClicked', () => {
+      const vm = jasmine.createSpyObj('vm', ['$emit']);
+
+      it('$emits linkclicked with file obj', () => {
+        const theFile = {};
+
+        repoFile.methods.linkClicked.call(vm, theFile);
+
+        expect(vm.$emit).toHaveBeenCalledWith('linkclicked', theFile);
+      });
+    });
+  });
+});