Started on repo_file spec

app/assets/javascripts/repo/repo_file.vue

@@ -13,7 +13,7 @@ const RepoFile = {
     loading: {
       type: Object,
       required: false,
-      default: {},
+      default() { return {}; },
     },
     hasFiles: {
       type: Boolean,
@@ -48,7 +48,7 @@ export default RepoFile;
   </td>
 
   <td v-if="!isMini" class="hidden-xs">
-    <span>{{file.lastCommitUpdate}}</span>
+    <span class="commit-update">{{file.lastCommitUpdate}}</span>
   </td>
 </tr>
 </template>

spec/javascripts/repo/repo_file_options_spec.js

+import Vue from 'vue';
+import repoFileOptions from '~/repo/repo_file_options.vue';
+
+describe('RepoFileOptions', () => {
+  const RepoFileOptions = Vue.extend(repoFileOptions);
+  const projectName = 'projectName';
+
+  function createComponent(propsData) {
+    return new RepoFileOptions({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders the title and new file/folder buttons if isMini is true', () => {
+    const vm = createComponent({
+      isMini: true,
+      projectName,
+    });
+    const title = vm.$el.querySelector('.title');
+
+    expect(vm.$el.classList.contains('repo-file-options')).toBeTruthy();
+    expect(title).toBeTruthy();
+    expect(title.textContent).toEqual(projectName);
+    expect(vm.$el.querySelector('a[title="New File"]')).toBeTruthy();
+    expect(vm.$el.querySelector('a[title="New Folder"]')).toBeTruthy();
+  });
+
+  it('does not render if isMini is false', () => {
+    const vm = createComponent({
+      isMini: false,
+      projectName,
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+});

spec/javascripts/repo/repo_file_spec.js

+import Vue from 'vue';
+import repoFile from '~/repo/repo_file.vue';
+
+describe('RepoFile', () => {
+  const RepoFile = Vue.extend(repoFile);
+  const file = {
+    icon: 'icon',
+    url: 'url',
+    name: 'name',
+    lastCommitMessage: 'message',
+    lastCommitUpdate: 'update',
+    level: 10,
+  };
+  const activeFile = {
+    url: 'url',
+  };
+
+  function createComponent(propsData) {
+    return new RepoFile({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders if not loading tree and has files', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      isMini: false,
+    });
+    const icon = vm.$el.querySelector(`.${file.icon}`);
+    const name = vm.$el.querySelector('.repo-file-name');
+    const commitMessage = vm.$el.querySelector('.commit-message');
+    const commitUpdate = vm.$el.querySelector('.commit-update');
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.classList.contains('active')).toBeTruthy();
+    expect(icon).toBeTruthy();
+    expect(icon.style.marginLeft).toEqual('100px');
+    expect(name).toBeTruthy();
+    expect(name.title).toEqual(file.url);
+    expect(name.href).toMatch(`/${file.url}`);
+    expect(name.textContent).toEqual(file.name);
+    expect(commitMessage).toBeTruthy();
+    expect(commitMessage.textContent).toBe(file.lastCommitMessage);
+    expect(commitUpdate).toBeTruthy();
+    expect(commitUpdate.textContent).toBe(file.lastCommitUpdate);
+  });
+
+  it('does not render if loading tree or has no files', () => {});
+
+  it('does not render commit message and datetime if mini', () => {});
+
+  it('does not set active class if file is active file', () => {});
+});