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

app/assets/javascripts/api.js

@@ -103,16 +103,15 @@ const Api = {
     return $.ajax({
       url,
       headers: {
-        'PRIVATE_TOKEN': token,
+        PRIVATE_TOKEN: token,
       },
       type: 'POST',
-      contentType: "application/json; charset=utf-8",
+      contentType: 'application/json; charset=utf-8',
       data: JSON.stringify(data),
       dataType: 'json',
     })
       .done(commitData => callback(commitData))
       .fail(message => callback(message.responseJSON));
-
   },
 
   // Return text for a specific license

app/assets/javascripts/project.js

@@ -77,7 +77,7 @@ import Cookies from 'js-cookie';
               },
               dataType: "json"
             }).done(function(refs) {
-              console.log(refs)
+              console.log(refs);
               return callback(refs);
             });
           },

app/assets/javascripts/repo/index.js

@@ -19,12 +19,12 @@ function initRepo() {
   Store.service.url = repo.dataset.url;
   Store.projectName = repo.dataset.projectName;
   Store.service.refsUrl = repo.dataset.refsUrl;
-  Store.currentBranch = $("button.dropdown-menu-toggle").attr('data-ref');
+  Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
   Store.checkIsCommitable();
   Store.projectId = repo.dataset.projectId;
   Store.tempPrivateToken = repo.dataset.tempToken;
 
-  new Vue({
+  this.vm = new Vue({
     el: repo,
     data: () => Store,
     template: `
@@ -45,7 +45,7 @@ function initRepo() {
       'repo-file-buttons': RepoFileButtons,
       'repo-binary-viewer': RepoBinaryViewer,
       'repo-editor': RepoEditor,
-      'repo-commit-section': RepoCommitSection
+      'repo-commit-section': RepoCommitSection,
     },
   });
 

app/assets/javascripts/repo/repo_binary_viewer.vue

 <script>
-import Vue from 'vue';
 import Store from './repo_store';
 import RepoHelper from './repo_helper';
 

app/assets/javascripts/repo/repo_commit_section.vue

 <script>
-import Vue from 'vue';
+/* global Flash */
 import Store from './repo_store';
-import Api from '../api'
+import Api from '../api';
 
 const RepoCommitSection = {
   data: () => Store,
@@ -9,9 +9,9 @@ const RepoCommitSection = {
   methods: {
     makeCommit() {
       // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
-      const branch = $("button.dropdown-menu-toggle").attr('data-ref');
+      const branch = $('button.dropdown-menu-toggle').attr('data-ref');
       const commitMessage = this.commitMessage;
-      const actions = this.changedFiles.map(f => {
+      const actions = this.changedFiles.map((f) => {
         const filePath = f.url.split(branch)[1];
         return {
           action: 'update',
@@ -20,10 +20,10 @@ const RepoCommitSection = {
         };
       });
       const payload = {
-        branch: branch,
+        branch,
         commit_message: commitMessage,
-        actions: actions,
-      }
+        actions,
+      };
       Store.submitCommitsLoading = true;
       Api.commitMultiple(Store.projectId, payload, (data) => {
         Store.submitCommitsLoading = false;
@@ -36,7 +36,7 @@ const RepoCommitSection = {
         this.editMode = false;
         $('html, body').animate({ scrollTop: 0 }, 'fast');
       }, Store.tempPrivateToken);
-    }
+    },
   },
 
   computed: {
@@ -46,7 +46,7 @@ const RepoCommitSection = {
       return changedFileList;
     },
   },
-}
+};
 
 export default RepoCommitSection;
 </script>
@@ -59,7 +59,7 @@ export default RepoCommitSection;
         <label class="col-md-4 control-label">Staged files ({{changedFiles.length}})</label>
         <div class="col-md-4">
           <ul class="list-unstyled">
-            <li v-for="file in changedFiles">
+            <li v-for="file in changedFiles" :key="file.id">
               <span class="help-block">
                 {{file.url}}
               </span>

app/assets/javascripts/repo/repo_editor.vue

 <script>
 /* global monaco */
-import Vue from 'vue';
 import Store from './repo_store';
 import Helper from './repo_helper';
 import monacoLoader from './monaco_loader';
@@ -28,7 +27,7 @@ const RepoEditor = {
         const newModel = monaco.editor.createModel(this.blobRaw, 'plaintext');
 
         this.monacoInstance.setModel(newModel);
-      });
+      }).catch(Helper.loadingError);
     });
   },
 
@@ -55,7 +54,7 @@ const RepoEditor = {
         location.hash = `L${e.target.position.lineNumber}`;
         Store.activeLine = e.target.position.lineNumber;
       }
-    }
+    },
   },
 
   watch: {

app/assets/javascripts/repo/repo_file.vue

@@ -40,7 +40,7 @@ export default RepoFile;
 </script>
 
 <template>
-<tr v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
+<tr class="file" v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
   <td @click.prevent="linkClicked(file)">
     <i class="fa" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
     <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>

app/assets/javascripts/repo/repo_file_buttons.vue

 <script>
-import Vue from 'vue';
 import Store from './repo_store';
 import Helper from './repo_helper';
 import RepoMiniMixin from './repo_mini_mixin';

app/assets/javascripts/repo/repo_helper.js

@@ -27,8 +27,8 @@ const RepoHelper = {
   },
 
   setDirectoryOpen(tree) {
-    let file = tree;
-    if (!file) return;
+    const file = tree;
+    if (!file) return undefined;
 
     file.opened = true;
     file.icon = 'fa-folder-open';
@@ -91,14 +91,12 @@ const RepoHelper = {
     return oldList;
   },
 
-  compareFilesCaseInsensitive(a,b) {
+  compareFilesCaseInsensitive(a, b) {
     const aName = a.name.toLowerCase();
     const bName = b.name.toLowerCase();
-    if(a.level > 0) return 0;
-    if (aName < bName)
-      return -1;
-    if (aName > bName)
-      return 1;
+    if (a.level > 0) return 0;
+    if (aName < bName) { return -1; }
+    if (aName > bName) { return 1; }
     return 0;
   },
 
@@ -109,7 +107,7 @@ const RepoHelper = {
     .then((response) => {
       const data = response.data;
       // RepoHelper.setLoading(false, loadingData);
-      if(cb) cb();
+      if (cb) cb();
       Store.isTree = RepoHelper.isTree(data);
       if (!Store.isTree) {
         if (!file) file = data;
@@ -187,15 +185,13 @@ const RepoHelper = {
     };
   },
 
-
-
   scrollTabsRight() {
     // wait for the transition. 0.1 seconds.
     setTimeout(() => {
       const tabs = document.getElementById('tabs');
-      if(!tabs) return;
+      if (!tabs) return;
       tabs.scrollLeft = 12000;
-    }, 200)
+    }, 200);
   },
 
   dataToListOfFiles(data) {

app/assets/javascripts/repo/repo_loading_file.vue

@@ -29,7 +29,7 @@ export default RepoLoadingFile;
 </script>
 
 <template>
-<tr v-if="loading.tree && !hasFiles">
+<tr v-if="loading.tree && !hasFiles" class="loading-file">
   <td>
     <div class="animation-container animation-container-small">
       <div v-for="n in 6" :class="lineOfCode(n)"></div>

app/assets/javascripts/repo/repo_prev_directory.vue

@@ -18,7 +18,7 @@ export default RepoPreviousDirectory;
 </script>
 
 <template>
-<tr>
+<tr class="prev-directory">
   <td colspan="3">
     <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
   </td>

app/assets/javascripts/repo/repo_service.js

-import Store from './repo_store';
 import axios from 'axios';
+import Store from './repo_store';
 
 const RepoService = {
   url: '',
@@ -12,10 +12,10 @@ const RepoService = {
 
   checkCurrentBranchIsCommitable() {
     const url = Store.service.refsUrl;
-    return axios.get(url, {params: {
+    return axios.get(url, { params: {
       ref: Store.currentBranch,
-        search: Store.currentBranch
-      }});
+      search: Store.currentBranch,
+    } });
   },
 
   buildParams(url = this.url) {

app/assets/javascripts/repo/repo_sidebar.vue

 <script>
-import Vue from 'vue';
 import Service from './repo_service';
 import Helper from './repo_helper';
 import Store from './repo_store';
@@ -73,18 +72,9 @@ export default RepoSidebar;
   <table class="table">
     <thead v-if="!isMini">
       <tr>
-        <th v-if="!isMini">
-          Name
-        </th>
-        <th v-else>
-          Project
-        </th>
-        <th class="hidden-sm hidden-xs" v-if="!isMini">
-          Last Commit
-        </th>
-        <th class="hidden-xs" v-if="!isMini">
-          Last Update
-        </th>
+        <th class="name">Name</th>
+        <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
+        <th class="hidden-xs last-update">Last Update</th>
       </tr>
     </thead>
     <tbody>
@@ -96,6 +86,7 @@ export default RepoSidebar;
         @linkclicked="linkClicked(prevURL)"/>
       <repo-loading-file
         v-for="n in 5"
+        :key="n"
         :loading="loading"
         :has-files="!!files.length"
         :is-mini="isMini"/>

app/assets/javascripts/repo/repo_store.js

+/* global Flash */
 import RepoHelper from './repo_helper';
 
 const RepoStore = {
@@ -38,7 +39,7 @@ const RepoStore = {
     raw: false,
     newContent: '',
     changed: false,
-    loading: false
+    loading: false,
   },
   activeFileIndex: 0,
   activeLine: 0,
@@ -66,11 +67,11 @@ const RepoStore = {
     RepoStore.service.checkCurrentBranchIsCommitable()
       .then((data) => {
         // you shouldn't be able to make commits on commits or tags.
-        let {Branches, Commits, Tags} = data.data;
-        if(Branches && Branches.length) RepoStore.isCommitable = true;
-        if(Commits && Commits.length) RepoStore.isCommitable = false;
-        if(Tags && Tags.length) RepoStore.isCommitable = false;
-      });
+        const { Branches, Commits, Tags } = data.data;
+        if (Branches && Branches.length) RepoStore.isCommitable = true;
+        if (Commits && Commits.length) RepoStore.isCommitable = false;
+        if (Tags && Tags.length) RepoStore.isCommitable = false;
+      }).catch(() => Flash('Failed to check if branch can be committed to.'));
   },
 
   addFilesToDirectory(inDirectory, currentList, newList) {
@@ -127,11 +128,11 @@ const RepoStore = {
     RepoStore.files = RepoStore.files.filter((file) => {
       const isItTheTreeWeWant = file.url === treeToClose.url;
       // if it's the next tree
-      if(foundTree && file.type === 'tree' && !isItTheTreeWeWant && file.level === treeToClose.level) {
+      if (foundTree && file.type === 'tree' && !isItTheTreeWeWant && file.level === treeToClose.level) {
         wereDone = true;
         return true;
       }
-      if(wereDone) return true;
+      if (wereDone) return true;
 
       if (isItTheTreeWeWant) foundTree = true;
 

app/assets/javascripts/repo/repo_tabs.vue

@@ -16,7 +16,7 @@ const RepoTabs = {
   methods: {
     isOverflow() {
       return this.$el.scrollWidth > this.$el.offsetWidth;
-    }
+    },
   },
 
   watch: {
@@ -24,9 +24,9 @@ const RepoTabs = {
       Vue.nextTick(() => {
         this.tabsOverflow = this.isOverflow();
       });
-    }
-  }
-}
+    },
+  },
+};
 
 export default RepoTabs;
 </script>

app/assets/javascripts/repo/repo_view_toggler.js

-import Vue from 'vue';
-import Store from './repo_store';
-
-export default class RepoViewToggler {
-  constructor() {
-    this.initVue();
-  }
-
-  initVue() {
-    this.vue = new Vue({
-      el: '#view-toggler',
-
-      data: () => Store,
-    });
-  }
-}

app/assets/stylesheets/pages/repo.scss

@@ -120,7 +120,6 @@
     #repo-file-buttons {
       background: $gray-light;
       border-bottom: 1px solid $white-normal;
-      padding: 5px;
       padding: 10px 5px;
       position: relative;
       border-top: 1px solid $white-normal;
@@ -333,12 +332,14 @@
 
 @keyframes swipeRightAppear {
   0% {
-    transform:  scaleX(0.00) ;
+    transform: scaleX(0.00);
   }
+
   45% {
-    transform:  scaleX(0.26) ;
+    transform: scaleX(0.26);
   }
+
   100% {
-    transform:  scaleX(1.00) ;
+    transform: scaleX(1.00);
   }
 }

spec/javascripts/repo/index_spec.js

-// import Tabs from '~/repo/repo_tabs';
-// import Sidebar from '~/repo/repo_sidebar';
-// import Editor from '~/repo/repo_editor';
-// import FileButtons from '~/repo/repo_file_buttons';
-// import EditButton from '~/repo/repo_edit_button';
-// import BinaryViewer from '~/repo/repo_binary_viewer';
-// import CommitSection from '~/repo/repo_commit_section';
-// import Service from '~/repo/repo_service';
-// import Store from '~/repo/repo_store';
-// import Helper from '~/repo/repo_helper';
-
-// describe('initRepo', () => {
-//   const url = 'url';
-
-//   it('should select all elements, set store service and url, init all needed classes and getContent', () => {
-//     spyOn(Helper, 'getContent');
-//     spyOn(document, 'getElementById').and.callFake((selector) => {
-//       const element = document.createElement('div');
-
-//       if (selector === 'ide') element.dataset.url = url;
-
-//       return element;
-//     });
-
-//     require('~/repo/index'); // eslint-disable-line global-require
-
-//     expect(document.getElementById).toHaveBeenCalledWith('ide');
-//     expect(document.getElementById).toHaveBeenCalledWith('tabs');
-//     expect(document.getElementById).toHaveBeenCalledWith('sidebar');
-//     expect(document.getElementById).toHaveBeenCalledWith('repo-file-buttons');
-//     expect(document.getElementById).toHaveBeenCalledWith('editable-mode');
-//     expect(document.getElementById).toHaveBeenCalledWith('commit-area');
-//     expect(document.getElementById).toHaveBeenCalledWith('binary-viewer');
-//     expect(Store.service).toBe(Service);
-//     expect(Store.service.url).toBe(url);
-//     expect(Store.tabs instanceof Tabs).toBe(true);
-//     expect(Store.sidebar instanceof Sidebar).toBe(true);
-//     expect(Store.editor instanceof Editor).toBe(true);
-//     expect(Store.buttons instanceof FileButtons).toBe(true);
-//     expect(Store.editButton instanceof EditButton).toBe(true);
-//     expect(Store.commitSection instanceof CommitSection).toBe(true);
-//     expect(Store.binaryViewer instanceof BinaryViewer).toBe(true);
-//     expect(Helper.getContent).toHaveBeenCalled();
-//   });
-// });

spec/javascripts/repo/repo_binary_viewer_spec.js

@@ -3,9 +3,9 @@ import Store from '~/repo/repo_store';
 import repoBinaryViewer from '~/repo/repo_binary_viewer.vue';
 
 describe('RepoBinaryViewer', () => {
+  function createComponent() {
     const RepoBinaryViewer = Vue.extend(repoBinaryViewer);
 
-  function createComponent() {
     return new RepoBinaryViewer().$mount();
   }
 
@@ -24,7 +24,6 @@ describe('RepoBinaryViewer', () => {
     const vm = createComponent();
     const img = vm.$el.querySelector(':scope > img');
 
-    expect(img).toBeTruthy();
     expect(img.src).toMatch(`/${uri}`);
     expect(img.alt).toEqual(activeFile.name);
   });
@@ -40,10 +39,8 @@ describe('RepoBinaryViewer', () => {
     Store.binaryTypes = binaryTypes;
     Store.activeFile = activeFile;
     const vm = createComponent();
-    const markdown = vm.$el.querySelector(':scope > div');
 
-    expect(markdown).toBeTruthy();
-    expect(markdown.innerHTML).toEqual(activeFile.html);
+    expect(vm.$el.querySelector(':scope > div')).toEqual(activeFile.html);
   });
 
   it('does not render if no binary', () => {

spec/javascripts/repo/repo_editor_spec.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import repoEditor from '~/repo/repo_editor.vue';
 
 describe('RepoEditor', () => {
+  function createComponent() {
     const RepoEditor = Vue.extend(repoEditor);
 
-  function createComponent() {
     return new RepoEditor().$mount();
   }
 

spec/javascripts/repo/repo_file_buttons_spec.js

@@ -24,35 +24,23 @@ describe('RepoFileButtons', () => {
     const raw = vm.$el.querySelector('.raw');
     const blame = vm.$el.querySelector('.blame');
     const history = vm.$el.querySelector('.history');
-    const permalink = vm.$el.querySelector('.permalink');
-    const lock = vm.$el.querySelector('.lock');
-    const preview = vm.$el.querySelector('.preview');
     const replace = vm.$el.querySelector('.replace');
-    const deleteBtn = vm.$el.querySelector('.delete');
 
     expect(vm.$el.id).toEqual('repo-file-buttons');
     expect(vm.$el.style.borderBottom).toEqual('1px solid rgb(31, 120, 209)');
-    expect(raw).toBeTruthy();
     expect(raw.href).toMatch(`/${activeFile.url}`);
     expect(raw.textContent).toEqual('Raw');
-    expect(blame).toBeTruthy();
     expect(blame.href).toMatch(`/${activeFile.url}`);
     expect(blame.textContent).toEqual('Blame');
-    expect(history).toBeTruthy();
     expect(history.href).toMatch(`/${activeFile.url}`);
     expect(history.textContent).toEqual('History');
-    expect(permalink).toBeTruthy();
-    expect(permalink.textContent).toEqual('Permalink');
-    expect(lock).toBeTruthy();
-    expect(lock.textContent).toEqual('Lock');
-    expect(preview).toBeTruthy();
-    expect(preview.textContent).toEqual(activeFileLabel);
-    expect(replace).toBeTruthy();
+    expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink');
+    expect(vm.$el.querySelector('.lock').textContent).toEqual('Lock');
+    expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel);
     expect(replace.dataset.target).toEqual('#modal-upload-blob');
     expect(replace.dataset.toggle).toEqual('modal');
     expect(replace.textContent).toEqual('Replace');
-    expect(deleteBtn).toBeTruthy();
-    expect(deleteBtn.textContent).toEqual('Delete');
+    expect(vm.$el.querySelector('.delete').textContent).toEqual('Delete');
   });
 
   it('renders a white border if not editMode', () => {

spec/javascripts/repo/repo_file_options_spec.js

@@ -2,10 +2,11 @@ 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) {
+    const RepoFileOptions = Vue.extend(repoFileOptions);
+
     return new RepoFileOptions({
       propsData,
     }).$mount();
@@ -16,11 +17,9 @@ describe('RepoFileOptions', () => {
       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('.title').textContent).toEqual(projectName);
     expect(vm.$el.querySelector('a[title="New File"]')).toBeTruthy();
     expect(vm.$el.querySelector('a[title="New Folder"]')).toBeTruthy();
   });

spec/javascripts/repo/repo_file_spec.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import repoFile from '~/repo/repo_file.vue';
 
 describe('RepoFile', () => {
-  const RepoFile = Vue.extend(repoFile);
   const file = {
     icon: 'icon',
     url: 'url',
@@ -16,6 +15,8 @@ describe('RepoFile', () => {
   };
 
   function createComponent(propsData) {
+    const RepoFile = Vue.extend(repoFile);
+
     return new RepoFile({
       propsData,
     }).$mount();
@@ -26,23 +27,15 @@ describe('RepoFile', () => {
       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(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(commitMessage).toBeTruthy();
-    expect(commitMessage.textContent).toBe(file.lastCommitMessage);
-    expect(commitUpdate).toBeTruthy();
-    expect(commitUpdate.textContent).toBe(file.lastCommitUpdate);
+    expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
+    expect(vm.$el.querySelector('.commit-update').textContent).toBe(file.lastCommitUpdate);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
@@ -76,11 +69,9 @@ describe('RepoFile', () => {
       activeFile,
       isMini: true,
     });
-    const commitMessage = vm.$el.querySelector('.commit-message');
-    const commitUpdate = vm.$el.querySelector('.commit-update');
 
-    expect(commitMessage).toBeFalsy();
-    expect(commitUpdate).toBeFalsy();
+    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', () => {

spec/javascripts/repo/repo_loading_file_spec.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import repoLoadingFile from '~/repo/repo_loading_file.vue';
 
 describe('RepoLoadingFile', () => {
+  function createComponent(propsData) {
     const RepoLoadingFile = Vue.extend(repoLoadingFile);
 
-  function createComponent(propsData) {
     return new RepoLoadingFile({
       propsData,
     }).$mount();

spec/javascripts/repo/repo_prev_directory_spec.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import repoPrevDirectory from '~/repo/repo_prev_directory.vue';
 
 describe('RepoPrevDirectory', () => {
+  function createComponent(propsData) {
     const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
 
-  function createComponent(propsData) {
     return new RepoPrevDirectory({
       propsData,
     }).$mount();
@@ -19,7 +19,6 @@ describe('RepoPrevDirectory', () => {
 
     spyOn(vm, 'linkClicked');
 
-    expect(link).toBeTruthy();
     expect(link.href).toMatch(`/${prevUrl}`);
     expect(link.textContent).toEqual('..');
 

spec/javascripts/repo/repo_sidebar_spec.js

+import Vue from 'vue';
+import RepoStore from '~/repo/repo_store';
+import repoSidebar from '~/repo/repo_sidebar.vue';
+
+describe('RepoSidebar', () => {
+  function createComponent() {
+    const RepoSidebar = Vue.extend(repoSidebar);
+
+    return new RepoSidebar().$mount();
+  }
+
+  it('renders a sidebar', () => {
+    RepoStore.files = [{
+      id: 0,
+    }];
+    const vm = createComponent();
+    const thead = vm.$el.querySelector('thead');
+    const tbody = vm.$el.querySelector('tbody');
+
+    expect(vm.$el.id).toEqual('sidebar');
+    expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
+    expect(thead.querySelector('.name').textContent).toEqual('Name');
+    expect(thead.querySelector('.last-commit').textContent).toEqual('Last Commit');
+    expect(thead.querySelector('.last-update').textContent).toEqual('Last Update');
+    expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
+    expect(tbody.querySelector('.prev-directory')).toBeTruthy();
+    expect(tbody.querySelector('.loading-file')).toBeFalsy();
+    expect(tbody.querySelector('.file')).toBeTruthy();
+  });
+
+  it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', () => {
+    RepoStore.openedFiles = [{
+      id: 0,
+    }];
+    const vm = createComponent();
+
+    expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
+    expect(vm.$el.querySelector('thead')).toBeFalsy();
+    expect(vm.$el.querySelector('tbody .repo-file-options')).toBeTruthy();
+  });
+
+  it('renders 5 loading files if tree is loading and not hasFiles', () => {
+    RepoStore.loading = {
+      tree: true,
+    };
+    RepoStore.files = [];
+    const vm = createComponent();
+
+    expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
+  });
+});

spec/javascripts/repo/repo_tab_spec.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import repoTab from '~/repo/repo_tab.vue';
 
 describe('RepoTab', () => {
+  function createComponent(propsData) {
     const RepoTab = Vue.extend(repoTab);
 
-  function createComponent(propsData) {
     return new RepoTab({
       propsData,
     }).$mount();
@@ -20,14 +20,12 @@ describe('RepoTab', () => {
       tab,
     });
     const close = vm.$el.querySelector('.close');
-    const name = vm.$el.querySelector(`a[title="${tab.url}"]`)
+    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();
@@ -63,8 +61,7 @@ describe('RepoTab', () => {
     const vm = createComponent({
       tab,
     });
-    const close = vm.$el.querySelector('.close');
 
-    expect(close.querySelector('.fa-circle')).toBeTruthy();
+    expect(vm.$el.querySelector('.close .fa-circle')).toBeTruthy();
   });
 });

spec/javascripts/repo/repo_tabs_spec.js

 import Vue from 'vue';
+import RepoStore from '~/repo/repo_store';
 import repoTabs from '~/repo/repo_tabs.vue';
 
-describe('RepoTabss', () => {
-  const RepoTabs = Vue.extend(repoTabs);
+describe('RepoTabs', () => {
+  const openedFiles = [{
+    id: 0,
+    active: true,
+  }, {
+    id: 1,
+  }];
 
   function createComponent() {
+    const RepoTabs = Vue.extend(repoTabs);
+
     return new RepoTabs().$mount();
   }
 
   it('renders a list of tabs', () => {
+    RepoStore.openedFiles = openedFiles;
+    RepoStore.tabsOverflow = true;
+
+    const vm = createComponent();
+    const tabs = [...vm.$el.querySelectorAll(':scope > li')];
+
+    expect(vm.$el.id).toEqual('tabs');
+    expect(vm.$el.classList.contains('overflown')).toBeTruthy();
+    expect(tabs.length).toEqual(2);
+    expect(tabs[0].classList.contains('active')).toBeTruthy();
+    expect(tabs[1].classList.contains('active')).toBeFalsy();
   });
 
-  it('does not render a tabs list if no isMini', () => {
+  it('does not render a tabs list if not isMini', () => {
+    RepoStore.openedFiles = [];
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not apply overflown class if not tabsOverflow', () => {
+    RepoStore.openedFiles = openedFiles;
+    RepoStore.tabsOverflow = false;
+
+    const vm = createComponent();
+
+    expect(vm.$el.classList.contains('overflown')).toBeFalsy();
   });
 });