Added repo_sidebar_spec

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_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_sidebar.vue

@@ -73,18 +73,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>

spec/javascripts/repo/repo_binary_viewer_spec.js

@@ -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_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

@@ -17,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

@@ -27,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', () => {
@@ -77,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_prev_directory_spec.js

@@ -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

@@ -9,7 +9,43 @@ describe('RepoSidebar', () => {
     return new RepoSidebar().$mount();
   }
 
-  it('renders a list of tabs', () => {
+  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

@@ -25,9 +25,7 @@ describe('RepoTab', () => {
     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();
   });
 });