Add specs for repo editor buttons.

2 files changed, 76 insertions, 34 deletions

diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index 1ae44bb37b4..73ad51996d1 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -1,8 +1,4 @@
 <script>
-// TODO: Ask @douwe to confirm v-if="!activeFile.binary" for the copy source button.
-// TODO: Make sure that we implement all possible cases for the button types.
-// FIXME: Preserve preview mode when editor tabs are changed.
-
 import Store from '../stores/repo_store';
 import Service from '../services/repo_service';
 import Helper from '../helpers/repo_helper';
@@ -68,7 +64,7 @@ const RepoFileButtons = {
     blobRaw() {
       this.$refs.clipboardButton.setAttribute('data-clipboard-text', this.blobRaw);
     },
-  }
+  },
 };
 
 export default RepoFileButtons;
@@ -78,7 +74,7 @@ export default RepoFileButtons;
   <div id="repo-file-buttons">
     <div
       v-if="activeFile.rich_viewer && !editMode"
-      class="btn-group"
+      class="btn-group js-viewer-buttons"
       role="group"
       aria-label="File viewer actions">
       <a
@@ -88,7 +84,7 @@ export default RepoFileButtons;
         v-tooltip
         data-container="body"
         target="_blank"
-        class="btn btn-default"
+        class="btn btn-default js-btn-simple-view"
         rel="noopener noreferrer">
         <i
           :class="simpleViewerIconClass"
@@ -101,7 +97,7 @@ export default RepoFileButtons;
         v-tooltip
         data-container="body"
         target="_blank"
-        class="btn btn-default"
+        class="btn btn-default js-btn-rich-view"
         rel="noopener noreferrer">
         <i
           :class="richViewerIconClass"
@@ -128,7 +124,7 @@ export default RepoFileButtons;
       <button
         v-if="!activeFile.binary"
         v-tooltip
-        class="btn btn-default"
+        class="btn btn-default js-btn-copy-clipboard"
         data-container="body"
         ref="clipboardButton"
         data-title="Copy source to clipboard">
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index dfab51710c3..19fd9f7b777 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
 import RepoStore from '~/repo/stores/repo_store';
+import RepoService from '~/repo/services/repo_service';
 
 describe('RepoFileButtons', () => {
   function createComponent() {
@@ -9,7 +10,13 @@ describe('RepoFileButtons', () => {
     return new RepoFileButtons().$mount();
   }
 
-  it('renders Raw, Blame, History, Permalink and Preview toggle', () => {
+  const returnPromise = html => new Promise((resolve) => {
+    resolve({
+      data: { html },
+    });
+  });
+
+  it('renders Raw, Blame, History, Permalink, Copy source buttons', () => {
     const activeFile = {
       extension: 'md',
       url: 'url',
@@ -17,12 +24,15 @@ describe('RepoFileButtons', () => {
       blame_path: 'blame_path',
       commits_path: 'commits_path',
       permalink: 'permalink',
+      previewMode: '',
+      viewerHTML: {},
+      rich_viewer: null,
+      simple_viewer: null,
     };
     const activeFileLabel = 'activeFileLabel';
     RepoStore.openedFiles = new Array(1);
     RepoStore.activeFile = activeFile;
     RepoStore.activeFileLabel = activeFileLabel;
-    RepoStore.editMode = true;
     RepoStore.binary = false;
 
     const vm = createComponent();
@@ -32,44 +42,80 @@ describe('RepoFileButtons', () => {
 
     expect(vm.$el.id).toEqual('repo-file-buttons');
     expect(raw.href).toMatch(`/${activeFile.raw_path}`);
-    expect(raw.textContent.trim()).toEqual('Raw');
     expect(blame.href).toMatch(`/${activeFile.blame_path}`);
     expect(blame.textContent.trim()).toEqual('Blame');
     expect(history.href).toMatch(`/${activeFile.commits_path}`);
     expect(history.textContent.trim()).toEqual('History');
     expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
-    expect(vm.$el.querySelector('.preview').textContent.trim()).toEqual(activeFileLabel);
+    expect(vm.$el.querySelector('.js-btn-copy-clipboard')).toBeTruthy();
+    expect(vm.$el.querySelector('.js-viewer-buttons')).toEqual(null);
   });
 
-  it('triggers rawPreviewToggle on preview click', () => {
-    const activeFile = {
-      extension: 'md',
-      url: 'url',
+  it('renders Display Source and Display Rendered buttons', (done) => {
+    const vm = createComponent();
+
+    RepoStore.activeFile.previewMode = 'rich';
+    RepoStore.activeFile.rich_viewer = {
+      switcher_title: 'rich viewer',
+      switcher_icon: 'rich-icon',
+    };
+    RepoStore.activeFile.simple_viewer = {
+      switcher_title: 'simple viewer',
+      switcher_icon: 'simple-icon',
     };
-    RepoStore.openedFiles = new Array(1);
-    RepoStore.activeFile = activeFile;
-    RepoStore.editMode = true;
 
-    const vm = createComponent();
-    const preview = vm.$el.querySelector('.preview');
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.js-viewer-buttons')).toBeDefined();
+      const simpleViewerBtn = vm.$el.querySelector('.js-btn-simple-view');
+      const richViewerBtn = vm.$el.querySelector('.js-btn-rich-view');
 
-    spyOn(vm, 'rawPreviewToggle');
+      expect(simpleViewerBtn.querySelector('i').classList.contains('fa-simple-icon')).toBeTruthy();
+      expect(simpleViewerBtn.getAttribute('data-original-title')).toEqual('Display simple viewer');
 
-    preview.click();
+      expect(richViewerBtn.querySelector('i').classList.contains('fa-rich-icon')).toBeTruthy();
+      expect(richViewerBtn.classList.contains('active')).toBeTruthy();
 
-    expect(vm.rawPreviewToggle).toHaveBeenCalled();
+      expect(richViewerBtn.getAttribute('data-original-title')).toEqual('Display rich viewer');
+      done();
+    });
   });
 
-  it('does not render preview toggle if not canPreview', () => {
-    const activeFile = {
-      extension: 'abcd',
-      url: 'url',
-    };
-    RepoStore.openedFiles = new Array(1);
-    RepoStore.activeFile = activeFile;
+  describe('toggleViewer', () => {
+    const type = 'simple';
+    const path = '/foo';
+    const html = 'simple viewer html';
 
-    const vm = createComponent();
+    it('should make a request if there is no cached html before', (done) => {
+      const vm = createComponent();
+      spyOn(RepoService, 'getContent').and.returnValue(returnPromise(html));
+
+      vm.toggleViewer(type, path);
+
+      vm.$nextTick(() => {
+        expect(RepoService.getContent).toHaveBeenCalledWith(path);
+        expect(RepoStore.activeFile.html).toEqual(html);
+        expect(RepoStore.activeFile.previewMode).toEqual(type);
+        expect(RepoStore.activeFile.viewerHTML.simple).toEqual(html);
+        done();
+      });
+    });
+
+    it('should not make a request and use cached html', (done) => {
+      const vm = createComponent();
+      spyOn(RepoService, 'getContent').and.returnValue(returnPromise('rich viewer html'));
+
+      vm.toggleViewer('rich', '/foo');
+      vm.$nextTick(() => {
+        expect(RepoStore.activeFile.viewerHTML.rich).toEqual('rich viewer html');
+        expect(RepoService.getContent.calls.count()).toBe(1);
+        vm.toggleViewer(type, path);
 
-    expect(vm.$el.querySelector('.preview')).toBeFalsy();
+        vm.$nextTick(() => {
+          expect(RepoService.getContent.calls.count()).toBe(1);
+          expect(RepoStore.activeFile.html).toEqual(html);
+          done();
+        });
+      });
+    });
   });
 });