fixed failing specs

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

@@ -6,11 +6,11 @@ import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
 
 export default {
-  destroyed() {
+  beforeDestroy() {
     this.editor.dispose();
   },
   mounted() {
-    if (this.monaco) {
+    if (this.editor && monaco) {
       this.initMonaco();
     } else {
       monacoLoader(['vs/editor/editor.main'], () => {
@@ -32,7 +32,7 @@ export default {
 
       this.getRawFileData(this.activeFile)
         .then(() => {
-          this.editor.createInstance(this.$el);
+          this.editor.createInstance(this.$refs.editor);
         })
         .then(() => this.setupEditor())
         .catch(() => flash('Error setting up monaco. Please try again.'));
@@ -76,9 +76,14 @@ export default {
     class="blob-viewer-container blob-editor-container"
   >
     <div
-      v-if="shouldHideEditor"
+      v-show="shouldHideEditor"
       v-html="activeFile.html"
     >
     </div>
+    <div
+      v-show="!shouldHideEditor"
+      ref="editor"
+    >
+    </div>
   </div>
 </template>

package.json

@@ -75,7 +75,8 @@
     "vuex": "^3.0.1",
     "webpack": "^3.5.5",
     "webpack-bundle-analyzer": "^2.8.2",
-    "webpack-stats-plugin": "^0.1.5"
+    "webpack-stats-plugin": "^0.1.5",
+    "worker-loader": "^1.1.0"
   },
   "devDependencies": {
     "@gitlab-org/gitlab-svgs": "^1.1.1",
@@ -98,7 +99,6 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
     "nodemon": "^1.11.0",
-    "webpack-dev-server": "^2.6.1",
-    "worker-loader": "^1.1.0"
+    "webpack-dev-server": "^2.6.1"
   }
 }

spec/javascripts/repo/components/repo_editor_spec.js

 import Vue from 'vue';
 import store from '~/repo/stores';
 import repoEditor from '~/repo/components/repo_editor.vue';
+import monacoLoader from '~/repo/monaco_loader';
 import { file, resetStore } from '../helpers';
 
 describe('RepoEditor', () => {
   let vm;
 
-  beforeEach(() => {
+  beforeEach((done) => {
     const f = file();
     const RepoEditor = Vue.extend(repoEditor);
 
@@ -21,6 +22,10 @@ describe('RepoEditor', () => {
     vm.monaco = true;
 
     vm.$mount();
+
+    monacoLoader(['vs/editor/editor.main'], () => {
+      setTimeout(done, 0);
+    });
   });
 
   afterEach(() => {
@@ -32,7 +37,6 @@ describe('RepoEditor', () => {
   it('renders an ide container', (done) => {
     Vue.nextTick(() => {
       expect(vm.shouldHideEditor).toBeFalsy();
-      expect(vm.$el.textContent.trim()).toBe('');
 
       done();
     });
@@ -50,7 +54,7 @@ describe('RepoEditor', () => {
     });
 
     it('shows activeFile html', () => {
-      expect(vm.$el.textContent.trim()).toBe('testing');
+      expect(vm.$el.textContent).toContain('testing');
     });
   });
 });