fixed failing karma specs

added specs for new mutations, actions and getters

7 files changed, 416 insertions, 24 deletions

diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js
index 07e9347add5..65072f4d196 100644
--- a/app/assets/javascripts/repo/stores/actions/file.js
+++ b/app/assets/javascripts/repo/stores/actions/file.js
@@ -112,20 +112,20 @@ export const createTempFile = ({ state, commit, dispatch }, { tree, name, conten
 };
 
 export const getFileHTML = ({ commit, getters }, file) => {
-  const currentViewer = file[file.currentViewer];
+  const currentViewer = getters.activeFileCurrentViewer;
 
   if (currentViewer.html !== '') return;
 
-  commit(types.TOGGLE_FILE_VIEWER_LOADING, getters.activeFileCurrentViewer);
+  commit(types.TOGGLE_FILE_VIEWER_LOADING, currentViewer);
 
   service.getFileHTML(currentViewer.path)
     .then(res => res.json())
     .then((data) => {
-      commit(types.TOGGLE_FILE_VIEWER_LOADING, getters.activeFileCurrentViewer);
+      commit(types.TOGGLE_FILE_VIEWER_LOADING, currentViewer);
       commit(types.SET_FILE_VIEWER_DATA, { file, data });
     })
     .catch(() => {
-      commit(types.TOGGLE_FILE_VIEWER_LOADING, getters.activeFileCurrentViewer);
+      commit(types.TOGGLE_FILE_VIEWER_LOADING, currentViewer);
       flash('Error fetching file viewer. Please try again.');
     });
 };
diff --git a/app/assets/javascripts/repo/stores/mutations/file.js b/app/assets/javascripts/repo/stores/mutations/file.js
index 28dcf63da84..a699c0b144a 100644
--- a/app/assets/javascripts/repo/stores/mutations/file.js
+++ b/app/assets/javascripts/repo/stores/mutations/file.js
@@ -36,10 +36,12 @@ export default {
       });
     }
 
-    Object.assign(file.simple, {
-      path: data.simple_viewer.path,
-      icon: data.simple_viewer.switcher_icon,
-    });
+    if (data.simple_viewer) {
+      Object.assign(file.simple, {
+        path: data.simple_viewer.path,
+        icon: data.simple_viewer.switcher_icon,
+      });
+    }
   },
   [types.SET_FILE_RAW_DATA](state, { file, raw }) {
     Object.assign(file, {
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index d6e255e4810..5d8bc825237 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -4,16 +4,21 @@ import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoFileButtons', () => {
-  const activeFile = file();
+  let activeFile;
   let vm;
 
   function createComponent() {
     const RepoFileButtons = Vue.extend(repoFileButtons);
 
-    activeFile.rawPath = 'test';
-    activeFile.blamePath = 'test';
-    activeFile.commitsPath = 'test';
-    activeFile.active = true;
+    activeFile = file();
+    Object.assign(activeFile, {
+      rawPath: 'test',
+      blamePath: 'test',
+      commitsPath: 'test',
+      active: true,
+      rich: { path: 'test' },
+      simple: { path: 'test' },
+    });
     store.state.openFiles.push(activeFile);
 
     return new RepoFileButtons({
@@ -36,14 +41,33 @@ describe('RepoFileButtons', () => {
       const history = vm.$el.querySelector('.history');
 
       expect(raw.href).toMatch(`/${activeFile.rawPath}`);
-      expect(raw.textContent.trim()).toEqual('Raw');
+      expect(raw.querySelector('.fa').classList.contains('fa-file-code-o')).toBeTruthy();
       expect(blame.href).toMatch(`/${activeFile.blamePath}`);
       expect(blame.textContent.trim()).toEqual('Blame');
       expect(history.href).toMatch(`/${activeFile.commitsPath}`);
       expect(history.textContent.trim()).toEqual('History');
       expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
+      expect(vm.$el.querySelector('.fa-clipboard')).not.toBeNull();
 
       done();
     });
   });
+
+  describe('binary file', () => {
+    beforeEach((done) => {
+      vm = createComponent();
+
+      activeFile.binary = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('renders download icon when binary', () => {
+      expect(vm.$el.querySelector('.raw .fa').classList.contains('fa-download')).toBeTruthy();
+    });
+
+    it('does not render clipboard button when binary', () => {
+      expect(vm.$el.querySelector('.fa-clipboard')).toBeNull();
+    });
+  });
 });
diff --git a/spec/javascripts/repo/components/repo_preview_spec.js b/spec/javascripts/repo/components/repo_preview_spec.js
index 8d1a87494cf..0b6321a1b82 100644
--- a/spec/javascripts/repo/components/repo_preview_spec.js
+++ b/spec/javascripts/repo/components/repo_preview_spec.js
@@ -6,7 +6,7 @@ import { file, resetStore } from '../helpers';
 describe('RepoPreview', () => {
   let vm;
 
-  function createComponent() {
+  function createComponent(currentViewer = 'rich') {
     const f = file();
     const RepoPreview = Vue.extend(repoPreview);
 
@@ -14,8 +14,12 @@ describe('RepoPreview', () => {
       store,
     });
 
-    f.active = true;
-    f.html = 'test';
+    Object.assign(f, {
+      active: true,
+      currentViewer,
+      rich: { html: 'richHTML' },
+      simple: { html: 'simpleHTML' },
+    });
 
     comp.$store.state.openFiles.push(f);
 
@@ -28,10 +32,27 @@ describe('RepoPreview', () => {
     resetStore(vm.$store);
   });
 
-  it('renders a div with the activeFile html', () => {
-    vm = createComponent();
+  describe('rich', () => {
+    beforeEach((done) => {
+      vm = createComponent();
+
+      Vue.nextTick(done);
+    });
+
+    it('renders activeFile rich html', () => {
+      expect(vm.$el.textContent.trim()).toContain('richHTML');
+    });
+  });
+
+  describe('simple', () => {
+    beforeEach((done) => {
+      vm = createComponent('simple');
 
-    expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.innerHTML).toContain('test');
+      Vue.nextTick(done);
+    });
+
+    it('renders activeFile rich html', () => {
+      expect(vm.$el.textContent.trim()).toContain('simpleHTML');
+    });
   });
 });
diff --git a/spec/javascripts/repo/stores/actions/file_spec.js b/spec/javascripts/repo/stores/actions/file_spec.js
index 099c0556e71..8eeae19755d 100644
--- a/spec/javascripts/repo/stores/actions/file_spec.js
+++ b/spec/javascripts/repo/stores/actions/file_spec.js
@@ -190,6 +190,7 @@ describe('Multi-file store file actions', () => {
     let localFile = file();
 
     beforeEach(() => {
+      spyOn(history, 'pushState');
       spyOn(service, 'getFileData').and.returnValue(Promise.resolve({
         headers: {
           'page-title': 'testing getFileData',
@@ -200,7 +201,6 @@ describe('Multi-file store file actions', () => {
           permalink: 'permalink',
           raw_path: 'raw_path',
           binary: false,
-          html: '123',
           render_error: '',
         }),
       }));
@@ -271,6 +271,22 @@ describe('Multi-file store file actions', () => {
           done();
         }).catch(done.fail);
     });
+
+    it('calls getFileHTML with current active file', (done) => {
+      const oldGetFileHTML = store._actions.getFileHTML; // eslint-disable-line
+      const getFileHTMLSpy = jasmine.createSpy('getFileHTML');
+      store._actions.getFileHTML = [getFileHTMLSpy]; // eslint-disable-line
+
+      store.dispatch('getFileData', localFile)
+        .then(Vue.nextTick)
+        .then(() => {
+          expect(getFileHTMLSpy).toHaveBeenCalledWith(localFile);
+
+          store._actions.getFileHTML = oldGetFileHTML; // eslint-disable-line
+
+          done();
+        }).catch(done.fail);
+    });
   });
 
   describe('getRawFileData', () => {
@@ -414,4 +430,149 @@ describe('Multi-file store file actions', () => {
       }).catch(done.fail);
     });
   });
+
+  describe('getFileHTML', () => {
+    let localFile;
+
+    beforeEach(() => {
+      localFile = file();
+      Object.assign(localFile, {
+        active: true,
+        opened: true,
+        rich: Object.assign(localFile.rich, { path: 'richPath' }),
+      });
+
+      store.state.openFiles.push(localFile);
+    });
+
+    describe('success', () => {
+      beforeEach(() => {
+        spyOn(service, 'getFileHTML').and.returnValue(Promise.resolve({
+          json: () => Promise.resolve({
+            html: 'fileHTML',
+          }),
+        }));
+      });
+
+      it('calls service', (done) => {
+        store.dispatch('getFileHTML', localFile)
+          .then(() => {
+            expect(service.getFileHTML).toHaveBeenCalledWith('richPath');
+
+            done();
+          }).catch(done.fail);
+      });
+
+      it('does not call service if already has HTML', (done) => {
+        localFile.rich.html = 'testing';
+
+        store.dispatch('getFileHTML', localFile)
+          .then(() => {
+            expect(service.getFileHTML).not.toHaveBeenCalled();
+
+            done();
+          }).catch(done.fail);
+      });
+
+      it('sets viewer as loading', (done) => {
+        store.dispatch('getFileHTML', localFile)
+          .then(() => {
+            expect(localFile.rich.loading).toBeTruthy();
+
+            return Vue.nextTick();
+          })
+          .then(() => {
+            expect(localFile.rich.loading).toBeFalsy();
+
+            done();
+          }).catch(done.fail);
+      });
+
+      it('updates file data', (done) => {
+        store.dispatch('getFileHTML', localFile)
+          .then(Vue.nextTick)
+          .then(() => {
+            expect(localFile.rich.html).toBe('fileHTML');
+
+            done();
+          }).catch(done.fail);
+      });
+    });
+
+    describe('failed', () => {
+      beforeEach(() => {
+        spyOn(service, 'getFileHTML').and.returnValue(Promise.reject());
+
+        document.body.innerHTML += '<div class="flash-container"></div>';
+      });
+
+      afterEach(() => {
+        document.querySelector('.flash-container').remove();
+      });
+
+      it('shows flash message', (done) => {
+        store.dispatch('getFileHTML', localFile)
+          .then(Vue.nextTick)
+          .then(() => {
+            expect(document.querySelector('.flash-alert')).not.toBeNull();
+            expect(
+              document.querySelector('.flash-alert').textContent.trim(),
+            ).toBe('Error fetching file viewer. Please try again.');
+
+            done();
+          }).catch(done.fail);
+      });
+    });
+  });
+
+  describe('changeFileViewer', () => {
+    let localFile;
+    let oldGetFileHTML;
+    let getFileHTMLSpy;
+
+    beforeEach(() => {
+      oldGetFileHTML = store._actions.getFileHTML; // eslint-disable-line
+      getFileHTMLSpy = jasmine.createSpy('getFileHTML');
+      store._actions.getFileHTML = [getFileHTMLSpy]; // eslint-disable-line
+
+      localFile = file();
+    });
+
+    afterEach(() => {
+      store._actions.getFileHTML = oldGetFileHTML; // eslint-disable-line
+    });
+
+    it('calls getFileHTML', (done) => {
+      store.dispatch('changeFileViewer', {
+        file: localFile,
+        type: 'simple',
+      }).then(() => {
+        expect(getFileHTMLSpy).toHaveBeenCalledWith(localFile);
+
+        done();
+      }).catch(done.fail);
+    });
+
+    it('does not call getFileHTML if current view matches passed in type', (done) => {
+      store.dispatch('changeFileViewer', {
+        file: localFile,
+        type: 'rich',
+      }).then(() => {
+        expect(getFileHTMLSpy).not.toHaveBeenCalled();
+
+        done();
+      }).catch(done.fail);
+    });
+
+    it('sets current viewer type', (done) => {
+      store.dispatch('changeFileViewer', {
+        file: localFile,
+        type: 'simple',
+      }).then(() => {
+        expect(localFile.currentViewer).toBe('simple');
+
+        done();
+      }).catch(done.fail);
+    });
+  });
 });
diff --git a/spec/javascripts/repo/stores/getters_spec.js b/spec/javascripts/repo/stores/getters_spec.js
index a204b2386cd..edddebae157 100644
--- a/spec/javascripts/repo/stores/getters_spec.js
+++ b/spec/javascripts/repo/stores/getters_spec.js
@@ -116,4 +116,92 @@ describe('Multi-file store getters', () => {
       expect(getters.canEditFile(localState)).toBeFalsy();
     });
   });
+
+  describe('activeFileCurrentViewer', () => {
+    let f;
+
+    beforeEach(() => {
+      f = file();
+
+      Object.assign(f, {
+        active: true,
+        rich: Object.assign(f.rich, { html: 'richHTML' }),
+        simple: Object.assign(f.simple, { html: 'simpleHTML' }),
+      });
+
+      localState.openFiles.push(f);
+    });
+
+    describe('rich', () => {
+      it('returns rich viewer', () => {
+        const viewer = getters.activeFileCurrentViewer(localState);
+
+        expect(viewer.html).toBe('richHTML');
+      });
+    });
+
+    describe('simple', () => {
+      it('returns simple viewer', () => {
+        f.currentViewer = 'simple';
+
+        const viewer = getters.activeFileCurrentViewer(localState);
+
+        expect(viewer.html).toBe('simpleHTML');
+      });
+    });
+  });
+
+  describe('activeFileHTML', () => {
+    it('returns currents viewer HTML', () => {
+      const f = file();
+
+      Object.assign(f, {
+        active: true,
+        rich: Object.assign(f.rich, { html: 'richHTML' }),
+      });
+
+      localState.openFiles.push(f);
+
+      expect(getters.activeFileHTML(localState)).toBe('richHTML');
+    });
+  });
+
+  describe('canActiveFileSwitchViewer', () => {
+    it('returns false if file is binary', () => {
+      const f = file();
+
+      Object.assign(f, {
+        binary: true,
+        active: true,
+      });
+
+      localState.openFiles.push(f);
+
+      expect(getters.canActiveFileSwitchViewer(localState)).toBeFalsy();
+    });
+
+    it('returns false if rich & simple path are blank', () => {
+      const f = file();
+
+      f.active = true;
+
+      localState.openFiles.push(f);
+
+      expect(getters.canActiveFileSwitchViewer(localState)).toBeFalsy();
+    });
+
+    it('returns true if rich & simple path are not blank', () => {
+      const f = file();
+
+      Object.assign(f, {
+        active: true,
+        rich: { path: 'test' },
+        simple: { path: 'test' },
+      });
+
+      localState.openFiles.push(f);
+
+      expect(getters.canActiveFileSwitchViewer(localState)).toBeTruthy();
+    });
+  });
 });
diff --git a/spec/javascripts/repo/stores/mutations/file_spec.js b/spec/javascripts/repo/stores/mutations/file_spec.js
index 2f2835dde1f..8ec404faed5 100644
--- a/spec/javascripts/repo/stores/mutations/file_spec.js
+++ b/spec/javascripts/repo/stores/mutations/file_spec.js
@@ -49,7 +49,6 @@ describe('Multi-file store file mutations', () => {
           permalink: 'permalink',
           raw_path: 'raw',
           binary: true,
-          html: 'html',
           render_error: 'render_error',
         },
         file: localFile,
@@ -60,9 +59,50 @@ describe('Multi-file store file mutations', () => {
       expect(localFile.permalink).toBe('permalink');
       expect(localFile.rawPath).toBe('raw');
       expect(localFile.binary).toBeTruthy();
-      expect(localFile.html).toBe('html');
       expect(localFile.renderError).toBe('render_error');
     });
+
+    it('sets rich viewer data', () => {
+      mutations.SET_FILE_DATA(localState, {
+        data: {
+          blame_path: 'blame',
+          commits_path: 'commits',
+          permalink: 'permalink',
+          raw_path: 'raw',
+          binary: true,
+          render_error: 'render_error',
+          rich_viewer: {
+            path: 'richPath',
+            switcher_icon: 'richIcon',
+          },
+        },
+        file: localFile,
+      });
+
+      expect(localFile.rich.path).toBe('richPath');
+      expect(localFile.rich.icon).toBe('richIcon');
+    });
+
+    it('sets simple viewer data', () => {
+      mutations.SET_FILE_DATA(localState, {
+        data: {
+          blame_path: 'blame',
+          commits_path: 'commits',
+          permalink: 'permalink',
+          raw_path: 'raw',
+          binary: true,
+          render_error: 'render_error',
+          simple_viewer: {
+            path: 'simplePath',
+            switcher_icon: 'simpleIcon',
+          },
+        },
+        file: localFile,
+      });
+
+      expect(localFile.simple.path).toBe('simplePath');
+      expect(localFile.simple.icon).toBe('simpleIcon');
+    });
   });
 
   describe('SET_FILE_RAW_DATA', () => {
@@ -128,4 +168,60 @@ describe('Multi-file store file mutations', () => {
       expect(localFile.tree[0].name).toBe(f.name);
     });
   });
+
+  describe('SET_FILE_VIEWER_DATA', () => {
+    describe('rich viewer', () => {
+      it('sets current viewers HTML', () => {
+        const f = file();
+
+        mutations.SET_FILE_VIEWER_DATA(localState, {
+          file: f,
+          data: { html: 'fileHTML' },
+        });
+
+        expect(f.rich.html).toBe('fileHTML');
+      });
+    });
+
+    describe('simple viewer', () => {
+      it('sets current viewers HTML', () => {
+        const f = file();
+        f.currentViewer = 'simple';
+
+        mutations.SET_FILE_VIEWER_DATA(localState, {
+          file: f,
+          data: { html: 'fileHTML' },
+        });
+
+        expect(f.simple.html).toBe('fileHTML');
+      });
+    });
+  });
+
+  describe('SET_CURRENT_FILE_VIEWER', () => {
+    it('sets the files current viewer', () => {
+      const f = file();
+
+      mutations.SET_CURRENT_FILE_VIEWER(localState, {
+        file: f,
+        type: 'rich',
+      });
+
+      expect(f.currentViewer).toBe('rich');
+    });
+  });
+
+  describe('TOGGLE_FILE_VIEWER_LOADING', () => {
+    it('toggles viewer loading', () => {
+      const f = file();
+
+      mutations.TOGGLE_FILE_VIEWER_LOADING(localState, f.rich);
+
+      expect(f.rich.loading).toBeTruthy();
+
+      mutations.TOGGLE_FILE_VIEWER_LOADING(localState, f.rich);
+
+      expect(f.rich.loading).toBeFalsy();
+    });
+  });
 });