Merge branch 'ide' of gitlab.com:gitlab-org/gitlab-ce into ide fix commits

app/assets/javascripts/repo/repo_file.vue

@@ -16,7 +16,7 @@ const RepoFile = {
     loading: {
       type: Object,
       required: false,
-      default: {},
+      default() { return { tree: false }; },
     },
     hasFiles: {
       type: Boolean,

spec/javascripts/repo/repo_file_options_spec.js

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,107 @@
+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 link, icon, name and last commit details', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+    });
+    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 render if hasFiles is true and is loading tree', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+  });
+
+  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,
+    });
+    const commitMessage = vm.$el.querySelector('.commit-message');
+    const commitUpdate = vm.$el.querySelector('.commit-update');
+
+    expect(commitMessage).toBeFalsy();
+    expect(commitUpdate).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).toHaveBeenCalled();
+  });
+});