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

spec/javascripts/repo/repo_file_spec.js

@@ -102,6 +102,6 @@ describe('RepoFile', () => {
 
     vm.$el.querySelector('.repo-file-name').click();
 
-    expect(vm.linkClicked).toHaveBeenCalled();
+    expect(vm.linkClicked).toHaveBeenCalledWith(file);
   });
 });

spec/javascripts/repo/repo_loading_file_spec.js

+import Vue from 'vue';
+import repoLoadingFile from '~/repo/repo_loading_file.vue';
+
+describe('RepoLoadingFile', () => {
+  const RepoLoadingFile = Vue.extend(repoLoadingFile);
+
+  function createComponent(propsData) {
+    return new RepoLoadingFile({
+      propsData,
+    }).$mount();
+  }
+
+  function assertLines(lines) {
+    lines.forEach((line, n) => {
+      const index = n + 1;
+      expect(line.classList.contains(`line-of-code-${index}`)).toBeTruthy();
+    });
+  }
+
+  function assertColumns(columns) {
+    columns.forEach((column) => {
+      const container = column.querySelector('.animation-container');
+      const lines = [...container.querySelectorAll(':scope > div')];
+
+      expect(container).toBeTruthy();
+      expect(lines.length).toEqual(6);
+      assertLines(lines);
+    });
+  }
+
+  it('renders 3 columns of animated LoC', () => {
+    const vm = createComponent({
+      loading: {
+        tree: true,
+      },
+      hasFiles: false,
+    });
+    const columns = [...vm.$el.querySelectorAll('td')];
+
+    expect(columns.length).toEqual(3);
+    assertColumns(columns);
+  });
+
+  it('renders 1 column of animated LoC if isMini', () => {
+    const vm = createComponent({
+      loading: {
+        tree: true,
+      },
+      hasFiles: false,
+      isMini: true,
+    });
+    const columns = [...vm.$el.querySelectorAll('td')];
+
+    expect(columns.length).toEqual(1);
+    assertColumns(columns);
+  });
+
+  it('does not render if tree is not loading', () => {
+    const vm = createComponent({
+      loading: {
+        tree: false,
+      },
+      hasFiles: false,
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not render if hasFiles is true', () => {
+    const vm = createComponent({
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+});

spec/javascripts/repo/repo_prev_directory_spec.js

+import Vue from 'vue';
+import repoPrevDirectory from '~/repo/repo_prev_directory.vue';
+
+describe('RepoPrevDirectory', () => {
+  const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
+
+  function createComponent(propsData) {
+    return new RepoPrevDirectory({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders a prev dir link', () => {
+    const prevUrl = 'prevUrl';
+    const vm = createComponent({
+      prevUrl,
+    });
+    const link = vm.$el.querySelector('a');
+
+    spyOn(vm, 'linkClicked');
+
+    expect(link).toBeTruthy();
+    expect(link.href).toMatch(`/${prevUrl}`);
+    expect(link.textContent).toEqual('..');
+
+    link.click();
+
+    expect(vm.linkClicked).toHaveBeenCalledWith(prevUrl);
+  });
+});

spec/javascripts/repo/repo_tab_spec.js

+import Vue from 'vue';
+import repoTab from '~/repo/repo_tab.vue';
+
+describe('RepoTab', () => {
+  const RepoTab = Vue.extend(repoTab);
+
+  function createComponent(propsData) {
+    return new RepoTab({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders a close link and a name link', () => {
+    const tab = {
+      loading: false,
+      url: 'url',
+      name: 'name',
+    };
+    const vm = createComponent({
+      tab,
+    });
+    const close = vm.$el.querySelector('.close');
+    const name = vm.$el.querySelector(`a[title="${tab.url}"]`)
+
+    spyOn(vm, 'xClicked');
+    spyOn(vm, 'tabClicked');
+
+    expect(close).toBeTruthy();
+    expect(close.querySelector('.fa-times')).toBeTruthy();
+    expect(name).toBeTruthy();
+    expect(name.textContent).toEqual(tab.name);
+
+    close.click();
+    name.click();
+
+    expect(vm.xClicked).toHaveBeenCalledWith(tab);
+    expect(vm.tabClicked).toHaveBeenCalledWith(tab);
+  });
+
+  it('renders a spinner if tab is loading', () => {
+    const tab = {
+      loading: true,
+      url: 'url',
+    };
+    const vm = createComponent({
+      tab,
+    });
+    const close = vm.$el.querySelector('.close');
+    const name = vm.$el.querySelector(`a[title="${tab.url}"]`);
+
+    expect(close).toBeFalsy();
+    expect(name).toBeFalsy();
+    expect(vm.$el.querySelector('.fa.fa-spinner.fa-spin')).toBeTruthy();
+  });
+
+  it('renders an fa-circle icon if tab is changed', () => {
+    const tab = {
+      loading: false,
+      url: 'url',
+      name: 'name',
+      changed: true,
+    };
+    const vm = createComponent({
+      tab,
+    });
+    const close = vm.$el.querySelector('.close');
+
+    expect(close.querySelector('.fa-circle')).toBeTruthy();
+  });
+});