Spec updates

Updated as best as possible, a lot of tests still change the store
and never reset the state back which can cause some issues with other
tests.

app/assets/javascripts/repo/components/repo_file.vue

@@ -58,7 +58,7 @@
     </td>
 
     <template v-if="!isMini">
-      <td class="hidden-sm hidden-xs">
+      <td class="commit-message hidden-sm hidden-xs">
         <a
           @click.stop
           :href="file.lastCommit.url"
@@ -67,7 +67,7 @@
         </a>
       </td>
 
-      <td class="hidden-xs text-right">
+      <td class="commit-update hidden-xs text-right">
         <span :title="tooltipTitle(file.lastCommit.updatedAt)">
           {{ timeFormated(file.lastCommit.updatedAt) }}
         </span>

app/assets/javascripts/repo/components/repo_loading_file.vue

@@ -26,29 +26,28 @@
         </div>
       </div>
     </td>
-
-    <td
-      v-if="!isMini"
-      class="hidden-sm hidden-xs">
-      <div class="animation-container">
-        <div
-          v-for="n in 6"
-          :key="n"
-          :class="lineOfCode(n)">
+    <template v-if="!isMini">
+      <td
+        class="hidden-sm hidden-xs">
+        <div class="animation-container">
+          <div
+            v-for="n in 6"
+            :key="n"
+            :class="lineOfCode(n)">
+          </div>
         </div>
-      </div>
-    </td>
+      </td>
 
-    <td
-      v-if="!isMini"
-      class="hidden-xs">
-      <div class="animation-container animation-container-small animation-container-right">
-        <div
-          v-for="n in 6"
-          :key="n"
-          :class="lineOfCode(n)">
+      <td
+        class="hidden-xs">
+        <div class="animation-container animation-container-small animation-container-right">
+          <div
+            v-for="n in 6"
+            :key="n"
+            :class="lineOfCode(n)">
+          </div>
         </div>
-      </div>
-    </td>
+      </td>
+    </template>
   </tr>
 </template>

app/assets/javascripts/repo/components/repo_sidebar.vue

 <script>
+import _ from 'underscore';
 import Service from '../services/repo_service';
 import Helper from '../helpers/repo_helper';
 import Store from '../stores/repo_store';
@@ -31,7 +32,7 @@ export default {
   computed: {
     flattendFiles() {
       const map = (arr) => {
-        if (arr && arr.tree.length === 0) {
+        if (arr && arr.tree && arr.tree.length === 0) {
           return [];
         }
 
@@ -79,13 +80,12 @@ export default {
         Store.setActiveLine(lineNumber);
       } else {
         const openFile = Helper.getFileFromPath(file.url);
-        file.loading = true;
 
         if (openFile) {
-          file.loading = false;
           Store.setActiveFiles(openFile);
           Store.setActiveLine(lineNumber);
         } else {
+          file.loading = true;
           Service.url = file.url;
           Helper.getContent(file)
             .then(() => {

spec/javascripts/repo/components/repo_commit_section_spec.js

@@ -134,6 +134,7 @@ describe('RepoCommitSection', () => {
     afterEach(() => {
       vm.$destroy();
       el.remove();
+      RepoStore.openedFiles = [];
     });
 
     it('shows commit message', () => {

spec/javascripts/repo/components/repo_edit_button_spec.js

@@ -9,6 +9,10 @@ describe('RepoEditButton', () => {
     return new RepoEditButton().$mount();
   }
 
+  afterEach(() => {
+    RepoStore.openedFiles = [];
+  });
+
   it('renders an edit button that toggles the view state', (done) => {
     RepoStore.isCommitable = true;
     RepoStore.changedFiles = [];
@@ -38,12 +42,4 @@ describe('RepoEditButton', () => {
 
     expect(vm.$el.innerHTML).toBeUndefined();
   });
-
-  describe('methods', () => {
-    describe('editCancelClicked', () => {
-      it('sets dialog to open when there are changedFiles');
-
-      it('toggles editMode and calls toggleBlobView');
-    });
-  });
 });

spec/javascripts/repo/components/repo_editor_spec.js

 import Vue from 'vue';
+import RepoStore from '~/repo/stores/repo_store';
 import repoEditor from '~/repo/components/repo_editor.vue';
 
 describe('RepoEditor', () => {
@@ -8,6 +9,10 @@ describe('RepoEditor', () => {
     this.vm = new RepoEditor().$mount();
   });
 
+  afterEach(() => {
+    RepoStore.openedFiles = [];
+  });
+
   it('renders an ide container', (done) => {
     this.vm.openedFiles = ['idiidid'];
     this.vm.binary = false;

spec/javascripts/repo/components/repo_file_buttons_spec.js

@@ -9,6 +9,10 @@ describe('RepoFileButtons', () => {
     return new RepoFileButtons().$mount();
   }
 
+  afterEach(() => {
+    RepoStore.openedFiles = [];
+  });
+
   it('renders Raw, Blame, History, Permalink and Preview toggle', () => {
     const activeFile = {
       extension: 'md',

spec/javascripts/repo/components/repo_file_spec.js

 import Vue from 'vue';
 import repoFile from '~/repo/components/repo_file.vue';
 import RepoStore from '~/repo/stores/repo_store';
+import eventHub from '~/repo/event_hub';
+import { file } from '../mock_data';
 
 describe('RepoFile', () => {
   const updated = 'updated';
-  const file = {
-    icon: 'icon',
-    url: 'url',
-    name: 'name',
-    lastCommitMessage: 'message',
-    lastCommitUpdate: Date.now(),
-    level: 10,
-  };
-  const activeFile = {
-    pageTitle: 'pageTitle',
-    url: 'url',
-  };
   const otherFile = {
     html: '<p class="file-content">html</p>',
     pageTitle: 'otherpageTitle',
@@ -29,12 +19,15 @@ describe('RepoFile', () => {
     }).$mount();
   }
 
+  beforeEach(() => {
+    RepoStore.openedFiles = [];
+  });
+
   it('renders link, icon, name and last commit details', () => {
     const RepoFile = Vue.extend(repoFile);
     const vm = new RepoFile({
       propsData: {
-        file,
-        activeFile,
+        file: file(),
       },
     });
     spyOn(vm, 'timeFormated').and.returnValue(updated);
@@ -43,28 +36,20 @@ describe('RepoFile', () => {
     const name = vm.$el.querySelector('.repo-file-name');
     const fileIcon = vm.$el.querySelector('.file-icon');
 
-    expect(vm.$el.classList.contains('active')).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.trim()).toEqual(file.name);
-    expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(file.lastCommitMessage);
+    expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px');
+    expect(name.href).toMatch(`/${vm.file.url}`);
+    expect(name.textContent.trim()).toEqual(vm.file.name);
+    expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(vm.file.lastCommit.message);
     expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated);
-    expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
-    expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
+    expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy();
+    expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
     const vm = createComponent({
-      file,
-      activeFile,
-      loading: {
-        tree: true,
-      },
-      hasFiles: true,
+      file: file(),
     });
 
-    expect(vm.$el.innerHTML).toBeTruthy();
     expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
   });
 
@@ -75,75 +60,51 @@ describe('RepoFile', () => {
   });
 
   it('renders a spinner if the file is loading', () => {
-    file.loading = true;
-    const vm = createComponent({
-      file,
-      activeFile,
-      loading: {
-        tree: true,
-      },
-      hasFiles: true,
-    });
-
-    expect(vm.$el.innerHTML).toBeTruthy();
-    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`);
-  });
-
-  it('does not render if loading tree', () => {
+    const f = file();
+    f.loading = true;
     const vm = createComponent({
-      file,
-      activeFile,
-      loading: {
-        tree: true,
-      },
+      file: f,
     });
 
-    expect(vm.$el.innerHTML).toBeFalsy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).not.toBeNull();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${vm.file.level * 16}px`);
   });
 
   it('does not render commit message and datetime if mini', () => {
+    RepoStore.openedFiles.push(file());
+
     const vm = createComponent({
-      file,
-      activeFile,
-      isMini: true,
+      file: file(),
     });
 
     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', () => {
-    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,
+      file: file(),
     });
 
     spyOn(vm, 'linkClicked');
 
-    vm.$el.querySelector('.repo-file-name').click();
+    vm.$el.click();
 
-    expect(vm.linkClicked).toHaveBeenCalledWith(file);
+    expect(vm.linkClicked).toHaveBeenCalledWith(vm.file);
   });
 
   describe('methods', () => {
     describe('linkClicked', () => {
-      const vm = jasmine.createSpyObj('vm', ['$emit']);
-
       it('$emits linkclicked with file obj', () => {
-        const theFile = {};
+        spyOn(eventHub, '$emit');
+
+        const vm = createComponent({
+          file: file(),
+        });
 
-        repoFile.methods.linkClicked.call(vm, theFile);
+        vm.linkClicked(vm.file);
 
-        expect(vm.$emit).toHaveBeenCalledWith('linkclicked', theFile);
+        expect(eventHub.$emit).toHaveBeenCalledWith('linkclicked', vm.file);
       });
     });
   });

spec/javascripts/repo/components/repo_loading_file_spec.js

 import Vue from 'vue';
+import RepoStore from '~/repo/stores/repo_store';
 import repoLoadingFile from '~/repo/components/repo_loading_file.vue';
 
 describe('RepoLoadingFile', () => {
@@ -28,6 +29,10 @@ describe('RepoLoadingFile', () => {
     });
   }
 
+  afterEach(() => {
+    RepoStore.openedFiles = [];
+  });
+
   it('renders 3 columns of animated LoC', () => {
     const vm = createComponent({
       loading: {
@@ -42,38 +47,16 @@ describe('RepoLoadingFile', () => {
   });
 
   it('renders 1 column of animated LoC if isMini', () => {
+    RepoStore.openedFiles = new Array(1);
     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/components/repo_prev_directory_spec.js

 import Vue from 'vue';
 import repoPrevDirectory from '~/repo/components/repo_prev_directory.vue';
+import eventHub from '~/repo/event_hub';
 
 describe('RepoPrevDirectory', () => {
   function createComponent(propsData) {
@@ -20,7 +21,7 @@ describe('RepoPrevDirectory', () => {
     spyOn(vm, 'linkClicked');
 
     expect(link.href).toMatch(`/${prevUrl}`);
-    expect(link.textContent).toEqual('..');
+    expect(link.textContent).toEqual('...');
 
     link.click();
 
@@ -29,14 +30,17 @@ describe('RepoPrevDirectory', () => {
 
   describe('methods', () => {
     describe('linkClicked', () => {
-      const vm = jasmine.createSpyObj('vm', ['$emit']);
+      it('$emits linkclicked with prevUrl', () => {
+        const prevUrl = 'prevUrl';
+        const vm = createComponent({
+          prevUrl,
+        });
 
-      it('$emits linkclicked with file obj', () => {
-        const file = {};
+        spyOn(eventHub, '$emit');
 
-        repoPrevDirectory.methods.linkClicked.call(vm, file);
+        vm.linkClicked(prevUrl);
 
-        expect(vm.$emit).toHaveBeenCalledWith('linkclicked', file);
+        expect(eventHub.$emit).toHaveBeenCalledWith('goToPreviousDirectoryClicked', prevUrl);
       });
     });
   });

spec/javascripts/repo/components/repo_sidebar_spec.js

@@ -3,6 +3,7 @@ import Helper from '~/repo/helpers/repo_helper';
 import RepoService from '~/repo/services/repo_service';
 import RepoStore from '~/repo/stores/repo_store';
 import repoSidebar from '~/repo/components/repo_sidebar.vue';
+import { file } from '../mock_data';
 
 describe('RepoSidebar', () => {
   let vm;
@@ -15,14 +16,15 @@ describe('RepoSidebar', () => {
 
   afterEach(() => {
     vm.$destroy();
+
+    RepoStore.files = [];
+    RepoStore.openedFiles = [];
   });
 
   it('renders a sidebar', () => {
-    RepoStore.files = [{
-      id: 0,
-    }];
+    RepoStore.files = [file()];
     RepoStore.openedFiles = [];
-    RepoStore.isRoot = false;
+    RepoStore.isRoot = true;
 
     vm = createComponent();
     const thead = vm.$el.querySelector('thead');
@@ -30,9 +32,9 @@ describe('RepoSidebar', () => {
 
     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(thead.querySelector('.name').textContent.trim()).toEqual('Name');
+    expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit');
+    expect(thead.querySelector('.last-update').textContent.trim()).toEqual('Last update');
     expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
     expect(tbody.querySelector('.prev-directory')).toBeFalsy();
     expect(tbody.querySelector('.loading-file')).toBeFalsy();
@@ -46,25 +48,21 @@ describe('RepoSidebar', () => {
     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();
+    expect(vm.$el.querySelector('thead')).toBeTruthy();
+    expect(vm.$el.querySelector('thead .repo-file-options')).toBeTruthy();
   });
 
   it('renders 5 loading files if tree is loading and not hasFiles', () => {
-    RepoStore.loading = {
-      tree: true,
-    };
+    RepoStore.loading.tree = true;
     RepoStore.files = [];
     vm = createComponent();
 
     expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
   });
 
-  it('renders a prev directory if isRoot', () => {
-    RepoStore.files = [{
-      id: 0,
-    }];
-    RepoStore.isRoot = true;
+  it('renders a prev directory if is not root', () => {
+    RepoStore.files = [file()];
+    RepoStore.isRoot = false;
     vm = createComponent();
 
     expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
@@ -74,48 +72,36 @@ describe('RepoSidebar', () => {
     describe('fileClicked', () => {
       it('should fetch data for new file', () => {
         spyOn(Helper, 'getContent').and.callThrough();
-        const file1 = {
-          id: 0,
-          url: '',
-        };
-        RepoStore.files = [file1];
+        RepoStore.files = [file()];
         RepoStore.isRoot = true;
         vm = createComponent();
 
-        vm.fileClicked(file1);
+        vm.fileClicked(RepoStore.files[0]);
 
-        expect(Helper.getContent).toHaveBeenCalledWith(file1);
+        expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[0]);
       });
 
       it('should not fetch data for already opened files', () => {
-        const file = {
-          id: 42,
-          url: 'foo',
-        };
-
-        spyOn(Helper, 'getFileFromPath').and.returnValue(file);
+        const f = file();
+        spyOn(Helper, 'getFileFromPath').and.returnValue(f);
         spyOn(RepoStore, 'setActiveFiles');
         vm = createComponent();
-        vm.fileClicked(file);
+        vm.fileClicked(f);
 
-        expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(file);
+        expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(f);
       });
 
       it('should hide files in directory if already open', () => {
-        spyOn(RepoStore, 'removeChildFilesOfTree').and.callThrough();
-        const file1 = {
-          id: 0,
-          type: 'tree',
-          url: '',
-          opened: true,
-        };
-        RepoStore.files = [file1];
-        RepoStore.isRoot = true;
+        spyOn(Helper, 'setDirectoryToClosed').and.callThrough();
+        const f = file();
+        f.opened = true;
+        f.type = 'tree';
+        RepoStore.files = [f];
         vm = createComponent();
 
-        vm.fileClicked(file1);
+        vm.fileClicked(RepoStore.files[0]);
 
-        expect(RepoStore.removeChildFilesOfTree).toHaveBeenCalledWith(file1);
+        expect(Helper.setDirectoryToClosed).toHaveBeenCalledWith(RepoStore.files[0]);
       });
     });
 
@@ -131,36 +117,31 @@ describe('RepoSidebar', () => {
     });
 
     describe('back button', () => {
-      const file1 = {
-        id: 1,
-        url: 'file1',
-      };
-      const file2 = {
-        id: 2,
-        url: 'file2',
-      };
-      RepoStore.files = [file1, file2];
-      RepoStore.openedFiles = [file1, file2];
-      RepoStore.isRoot = true;
-
-      vm = createComponent();
-      vm.fileClicked(file1);
+      beforeEach(() => {
+        const f = file();
+        const file2 = Object.assign({}, file());
+        file2.url = 'test';
+        RepoStore.files = [f, file2];
+        RepoStore.openedFiles = [];
+        RepoStore.isRoot = true;
+
+        vm = createComponent();
+      });
 
       it('render previous file when using back button', () => {
         spyOn(Helper, 'getContent').and.callThrough();
 
-        vm.fileClicked(file2);
-        expect(Helper.getContent).toHaveBeenCalledWith(file2);
-        Helper.getContent.calls.reset();
+        vm.fileClicked(RepoStore.files[1]);
+        expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[1]);
 
         history.pushState({
           key: Math.random(),
-        }, '', file1.url);
+        }, '', RepoStore.files[1].url);
         const popEvent = document.createEvent('Event');
         popEvent.initEvent('popstate', true, true);
         window.dispatchEvent(popEvent);
 
-        expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(file1.url);
+        expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(RepoStore.files[1].url);
 
         window.history.pushState({}, null, '/');
       });

spec/javascripts/repo/components/repo_tab_spec.js

 import Vue from 'vue';
 import repoTab from '~/repo/components/repo_tab.vue';
+import RepoStore from '~/repo/stores/repo_store';
 
 describe('RepoTab', () => {
   function createComponent(propsData) {
@@ -18,7 +19,7 @@ describe('RepoTab', () => {
     const vm = createComponent({
       tab,
     });
-    const close = vm.$el.querySelector('.close');
+    const close = vm.$el.querySelector('.close-btn');
     const name = vm.$el.querySelector(`a[title="${tab.url}"]`);
 
     spyOn(vm, 'closeTab');
@@ -44,26 +45,43 @@ describe('RepoTab', () => {
       tab,
     });
 
-    expect(vm.$el.querySelector('.close .fa-circle')).toBeTruthy();
+    expect(vm.$el.querySelector('.close-btn .fa-circle')).toBeTruthy();
   });
 
   describe('methods', () => {
     describe('closeTab', () => {
-      const vm = jasmine.createSpyObj('vm', ['$emit']);
-
       it('returns undefined and does not $emit if file is changed', () => {
-        const file = { changed: true };
-        const returnVal = repoTab.methods.closeTab.call(vm, file);
+        const tab = {
+          url: 'url',
+          name: 'name',
+          changed: true,
+        };
+        const vm = createComponent({
+          tab,
+        });
+
+        spyOn(RepoStore, 'removeFromOpenedFiles');
+
+        vm.$el.querySelector('.close-btn').click();
 
-        expect(returnVal).toBeUndefined();
-        expect(vm.$emit).not.toHaveBeenCalled();
+        expect(RepoStore.removeFromOpenedFiles).not.toHaveBeenCalled();
       });
 
       it('$emits tabclosed event with file obj', () => {
-        const file = { changed: false };
-        repoTab.methods.closeTab.call(vm, file);
+        const tab = {
+          url: 'url',
+          name: 'name',
+          changed: false,
+        };
+        const vm = createComponent({
+          tab,
+        });
+
+        spyOn(RepoStore, 'removeFromOpenedFiles');
+
+        vm.$el.querySelector('.close-btn').click();
 
-        expect(vm.$emit).toHaveBeenCalledWith('tabclosed', file);
+        expect(RepoStore.removeFromOpenedFiles).toHaveBeenCalledWith(tab);
       });
     });
   });

spec/javascripts/repo/components/repo_tabs_spec.js

@@ -16,6 +16,10 @@ describe('RepoTabs', () => {
     return new RepoTabs().$mount();
   }
 
+  afterEach(() => {
+    RepoStore.openedFiles = [];
+  });
+
   it('renders a list of tabs', () => {
     RepoStore.openedFiles = openedFiles;
 
@@ -28,18 +32,4 @@ describe('RepoTabs', () => {
     expect(tabs[1].classList.contains('active')).toBeFalsy();
     expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
   });
-
-  describe('methods', () => {
-    describe('tabClosed', () => {
-      it('calls removeFromOpenedFiles with file obj', () => {
-        const file = {};
-
-        spyOn(RepoStore, 'removeFromOpenedFiles');
-
-        repoTabs.methods.tabClosed(file);
-
-        expect(RepoStore.removeFromOpenedFiles).toHaveBeenCalledWith(file);
-      });
-    });
-  });
 });

spec/javascripts/repo/mock_data.js

+import RepoHelper from '~/repo/helpers/repo_helper';
+
+export const file = () => RepoHelper.serializeBlob({
+  icon: 'icon',
+  url: 'url',
+  name: 'name',
+  last_commit: {
+    id: '123',
+    message: 'test',
+    committed_date: '',
+  },
+});