Add repo file buttons spec

app/assets/javascripts/repo/repo_file_buttons.vue

@@ -11,7 +11,7 @@ const RepoFileButtons = {
 
   computed: {
     editableBorder() {
-      return this.editMode ? '1px solid #1F78D1' : '1px solid #f0f0f0';
+      return this.editMode ? '1px solid rgb(31, 120, 209)' : '1px solid rgb(240,240,240)';
     },
 
     canPreview() {
@@ -22,11 +22,11 @@ const RepoFileButtons = {
       return Helper.getRawURLFromBlobURL(this.activeFile.url);
     },
 
-    blameFileUrl() {
+    blameFileURL() {
       return Helper.getBlameURLFromBlobURL(this.activeFile.url);
     },
 
-    historyFileUrl() {
+    historyFileURL() {
       return Helper.getHistoryURLFromBlobURL(this.activeFile.url);
     },
   },
@@ -41,21 +41,19 @@ export default RepoFileButtons;
 
 <template>
 <div id="repo-file-buttons" v-if="isMini" :style="{'border-bottom': editableBorder}">
-  <a :href="rawFileURL" target="_blank" class="btn btn-default">Raw</a>
+  <a :href="rawFileURL" target="_blank" class="btn btn-default raw">Raw</a>
 
   <div class="btn-group" role="group" aria-label="File actions">
-    <a :href="blameFileUrl" class="btn btn-default">Blame</a>
-    <a :href="historyFileUrl" class="btn btn-default">History</a>
-    <a href="#" class="btn btn-default">Permalink</a>
-    <a href="#" class="btn btn-default">Lock</a>
+    <a :href="blameFileURL" class="btn btn-default blame">Blame</a>
+    <a :href="historyFileURL" class="btn btn-default history">History</a>
+    <a href="#" class="btn btn-default permalink">Permalink</a>
+    <a href="#" class="btn btn-default lock">Lock</a>
   </div>
 
-  <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default">
-    {{activeFileLabel}}
-  </a>
+  <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>
 
-  <button type="button" class="btn btn-default" data-target="#modal-upload-blob" data-toggle="modal">Replace</button>
+  <button type="button" class="btn btn-default replace" data-target="#modal-upload-blob" data-toggle="modal">Replace</button>
 
-  <a href="#" class="btn btn-danger">Delete</a>
+  <a href="#" class="btn btn-danger delete">Delete</a>
 </div>
 </template>

spec/javascripts/repo/repo_editor_spec.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import repoEditor from '~/repo/repo_editor.vue';
 
-fdescribe('RepoEditor', () => {
+describe('RepoEditor', () => {
   const RepoEditor = Vue.extend(repoEditor);
 
   function createComponent() {
@@ -11,8 +11,6 @@ fdescribe('RepoEditor', () => {
   it('renders an ide container', () => {
     const vm = createComponent();
 
-    vm.$nextTick(() => {
-      expect(vm.$el.getElementById('ide')).toBeTruthy();
-    });
+    expect(vm.$el.id).toEqual('ide');
   });
 });

spec/javascripts/repo/repo_file_buttons_spec.js

@@ -1,18 +1,78 @@
 import Vue from 'vue';
 import repoFileButtons from '~/repo/repo_file_buttons.vue';
+import RepoStore from '~/repo/repo_store';
 
-fdescribe('RepoFileButtons', () => {
-  const RepoFileButtons = Vue.extend(repoFileButtons);
-
+describe('RepoFileButtons', () => {
   function createComponent() {
+    const RepoFileButtons = Vue.extend(repoFileButtons);
+
     return new RepoFileButtons().$mount();
   }
 
-  it('does not render if not isMini', () => {
-    const vm = createComponent({});
+  it('renders Raw, Blame, History, Permalink, Lock, Preview toggle, Replace and Delete', () => {
+    const activeFile = {
+      extension: 'md',
+      url: 'url',
+    };
+    const activeFileLabel = 'activeFileLabel';
+    RepoStore.openedFiles = new Array(1);
+    RepoStore.activeFile = activeFile;
+    RepoStore.activeFileLabel = activeFileLabel;
+    RepoStore.editMode = true;
 
-    vm.$nextTick(() => {
-      expect(vm.$el.getElementById('ide')).toBeTruthy();
-    });
+    const vm = createComponent();
+    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(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');
+  });
+
+  it('does not render preview toggle if not canPreview', () => {
+    const activeFile = {
+      extension: 'abcd',
+      url: 'url',
+    };
+    RepoStore.openedFiles = new Array(1);
+    RepoStore.activeFile = activeFile;
+
+    const vm = createComponent();
+
+    expect(vm.$el.querySelector('.preview')).toBeFalsy();
+  });
+
+  it('does not render if not isMini', () => {
+    RepoStore.openedFiles = [];
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeFalsy();
   });
 });