editor & vuex specs

ee/app/assets/javascripts/ide/lib/editor.js

@@ -7,7 +7,9 @@ import editorOptions from './editor_options';
 
 import gitlabTheme from 'ee/ide/lib/themes/gl_theme'; // eslint-disable-line import/first
 
-const clearDomElement = (el) => {
+export const clearDomElement = (el) => {
+  if (!el || !el.firstChild) return;
+
   while (el.firstChild) {
     el.removeChild(el.firstChild);
   }

spec/javascripts/ide/components/commit_sidebar/list_item_spec.js

@@ -36,6 +36,7 @@ describe('Multi-file editor commit sidebar list item', () => {
 
   it('opens a closed file in the editor when clicking the file path', () => {
     spyOn(vm, 'openFileInEditor').and.callThrough();
+    spyOn(vm, 'updateViewer');
     spyOn(router, 'push');
 
     vm.$el.querySelector('.multi-file-commit-list-path').click();
@@ -44,6 +45,16 @@ describe('Multi-file editor commit sidebar list item', () => {
     expect(router.push).toHaveBeenCalled();
   });
 
+  it('calls updateViewer with diff when clicking file', () => {
+    spyOn(vm, 'openFileInEditor').and.callThrough();
+    spyOn(vm, 'updateViewer');
+    spyOn(router, 'push');
+
+    vm.$el.querySelector('.multi-file-commit-list-path').click();
+
+    expect(vm.updateViewer).toHaveBeenCalledWith('diff');
+  });
+
   describe('computed', () => {
     describe('iconName', () => {
       it('returns modified when not a tempFile', () => {

spec/javascripts/ide/components/repo_editor_spec.js

@@ -61,6 +61,34 @@ describe('RepoEditor', () => {
     });
   });
 
+  describe('createEditorInstance', () => {
+    it('calls createInstance when viewer is editor', (done) => {
+      spyOn(vm.editor, 'createInstance').and.callThrough();
+
+      vm.createEditorInstance();
+
+      vm.$nextTick(() => {
+        expect(vm.editor.createInstance).toHaveBeenCalled();
+
+        done();
+      });
+    });
+
+    it('calls createDiffInstance when viewer is diff', (done) => {
+      vm.$store.state.viewer = 'diff';
+
+      spyOn(vm.editor, 'createDiffInstance').and.callThrough();
+
+      vm.createEditorInstance();
+
+      vm.$nextTick(() => {
+        expect(vm.editor.createDiffInstance).toHaveBeenCalled();
+
+        done();
+      });
+    });
+  });
+
   describe('setupEditor', () => {
     it('creates new model', () => {
       spyOn(vm.editor, 'createModel').and.callThrough();

spec/javascripts/ide/components/repo_tabs_spec.js

@@ -7,15 +7,17 @@ describe('RepoTabs', () => {
   const openedFiles = [file('open1'), file('open2')];
   let vm;
 
-  function createComponent() {
+  function createComponent(el = null) {
     const RepoTabs = Vue.extend(repoTabs);
 
     return new RepoTabs({
       store,
-    }).$mount();
+    }).$mount(el);
   }
 
   afterEach(() => {
+    vm.$destroy();
+
     resetStore(vm.$store);
   });
 
@@ -34,4 +36,44 @@ describe('RepoTabs', () => {
       done();
     });
   });
+
+  describe('updated', () => {
+    it('sets showShadow as true when scroll width is larger than width', (done) => {
+      const el = document.createElement('div');
+      el.innerHTML = '<div id="test-app"></div>';
+      document.body.appendChild(el);
+
+      const style = document.createElement('style');
+      style.innerText = `
+        .multi-file-tabs {
+          width: 100px;
+        }
+
+        .multi-file-tabs .list-unstyled {
+          display: flex;
+          overflow-x: auto;
+        }
+      `;
+      document.head.appendChild(style);
+
+      vm = createComponent('#test-app');
+      openedFiles[0].active = true;
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.showShadow).toBeFalsy();
+
+          vm.$store.state.openFiles = openedFiles;
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.showShadow).toBeTruthy();
+
+          style.remove();
+          el.remove();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });

spec/javascripts/ide/lib/common/model_manager_spec.js

 /* global monaco */
+import eventHub from 'ee/ide/eventhub';
 import monacoLoader from 'ee/ide/monaco_loader';
 import ModelManager from 'ee/ide/lib/common/model_manager';
 import { file } from '../../helpers';
@@ -47,6 +48,15 @@ describe('Multi-file editor library model manager', () => {
 
       expect(instance.models.get).toHaveBeenCalled();
     });
+
+    it('adds eventHub listener', () => {
+      const f = file();
+      spyOn(eventHub, '$on').and.callThrough();
+
+      instance.addModel(f);
+
+      expect(eventHub.$on).toHaveBeenCalledWith(`editor.update.model.dispose.${f.path}`, jasmine.anything());
+    });
   });
 
   describe('hasCachedModel', () => {
@@ -69,6 +79,30 @@ describe('Multi-file editor library model manager', () => {
     });
   });
 
+  describe('removeCachedModel', () => {
+    let f;
+
+    beforeEach(() => {
+      f = file();
+
+      instance.addModel(f);
+    });
+
+    it('clears cached model', () => {
+      instance.removeCachedModel(f);
+
+      expect(instance.models.size).toBe(0);
+    });
+
+    it('removes eventHub listener', () => {
+      spyOn(eventHub, '$off').and.callThrough();
+
+      instance.removeCachedModel(f);
+
+      expect(eventHub.$off).toHaveBeenCalledWith(`editor.update.model.dispose.${f.path}`, jasmine.anything());
+    });
+  });
+
   describe('dispose', () => {
     it('clears cached models', () => {
       instance.addModel(file());

spec/javascripts/ide/lib/common/model_spec.js

 /* global monaco */
+import eventHub from 'ee/ide/eventhub';
 import monacoLoader from 'ee/ide/monaco_loader';
 import Model from 'ee/ide/lib/common/model';
 import { file } from '../../helpers';
@@ -7,6 +8,8 @@ describe('Multi-file editor library model', () => {
   let model;
 
   beforeEach((done) => {
+    spyOn(eventHub, '$on').and.callThrough();
+
     monacoLoader(['vs/editor/editor.main'], () => {
       model = new Model(monaco, file('path'));
 
@@ -23,6 +26,10 @@ describe('Multi-file editor library model', () => {
     expect(model.model).not.toBeNull();
   });
 
+  it('adds eventHub listener', () => {
+    expect(eventHub.$on).toHaveBeenCalledWith(`editor.update.model.dispose.${model.file.path}`, jasmine.anything());
+  });
+
   describe('path', () => {
     it('returns file path', () => {
       expect(model.path).toBe('path');
@@ -88,5 +95,13 @@ describe('Multi-file editor library model', () => {
 
       expect(model.events.size).toBe(0);
     });
+
+    it('removes eventHub listener', () => {
+      spyOn(eventHub, '$off').and.callThrough();
+
+      model.dispose();
+
+      expect(eventHub.$off).toHaveBeenCalledWith(`editor.update.model.dispose.${model.file.path}`, jasmine.anything());
+    });
   });
 });

spec/javascripts/ide/lib/editor_spec.js

@@ -54,6 +54,24 @@ describe('Multi-file editor library', () => {
     });
   });
 
+  describe('createDiffInstance', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+    });
+
+    it('creates editor instance', () => {
+      spyOn(instance.monaco.editor, 'createDiffEditor').and.callThrough();
+
+      instance.createDiffInstance(el);
+
+      expect(instance.monaco.editor.createDiffEditor).toHaveBeenCalledWith(el, {
+        readOnly: true,
+      });
+    });
+  });
+
   describe('createModel', () => {
     it('calls model manager addModel', () => {
       spyOn(instance.modelManager, 'addModel');
@@ -64,7 +82,7 @@ describe('Multi-file editor library', () => {
     });
   });
 
-  describe('attachModel', () => {
+  fdescribe('attachModel', () => {
     let model;
 
     beforeEach(() => {
@@ -87,6 +105,18 @@ describe('Multi-file editor library', () => {
       expect(instance.instance.setModel).toHaveBeenCalledWith(model.getModel());
     });
 
+    it('sets original & modified when diff editor', () => {
+      spyOn(instance.instance, 'getEditorType').and.returnValue('vs.editor.IDiffEditor');
+      spyOn(instance.instance, 'setModel');
+
+      instance.attachModel(model);
+
+      expect(instance.instance.setModel).toHaveBeenCalledWith({
+        original: model.getOriginalModel(),
+        modified: model.getModel(),
+      });
+    });
+
     it('attaches the model to the dirty diff controller', () => {
       spyOn(instance.dirtyDiffController, 'attachModel');
 

spec/javascripts/ide/stores/actions_spec.js

@@ -210,4 +210,15 @@ describe('Multi-file store actions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('updateViewer', () => {
+    it('updates viewer state', (done) => {
+      store.dispatch('updateViewer', 'diff')
+        .then(() => {
+          expect(store.state.viewer).toBe('diff');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });

spec/javascripts/ide/stores/mutations_spec.js

@@ -106,4 +106,12 @@ describe('Multi-file store mutations', () => {
       expect(localState.rightPanelCollapsed).toBeFalsy();
     });
   });
+
+  describe('UPDATE_VIEWER', () => {
+    it('sets viewer state', () => {
+      mutations.UPDATE_VIEWER(localState, 'diff');
+
+      expect(localState.viewer).toBe('diff');
+    });
+  });
 });