Merge branch 'ide-markdown-temp-file-fix' into 'master'

Fixed markdown preview in IDE not working for new files

See merge request gitlab-org/gitlab-ce!18287

3 files changed, 50 insertions, 12 deletions

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 6aa44ca2c11..711bafa17a9 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -22,7 +22,7 @@ export default {
     ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
     ...mapGetters(['currentMergeRequest']),
     shouldHideEditor() {
-      return this.file && this.file.binary && !this.file.raw;
+      return this.file && this.file.binary && !this.file.content;
     },
     editTabCSS() {
       return {
@@ -212,7 +212,7 @@ export default {
     <content-viewer
       v-if="shouldHideEditor || file.viewMode === 'preview'"
       :content="file.content || file.raw"
-      :path="file.rawPath"
+      :path="file.rawPath || file.path"
       :file-size="file.size"
       :project-path="file.projectId"/>
   </div>
diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js
index 63a3d2c6cd5..310d222377f 100644
--- a/spec/javascripts/ide/components/repo_editor_spec.js
+++ b/spec/javascripts/ide/components/repo_editor_spec.js
@@ -1,9 +1,12 @@
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import store from '~/ide/stores';
 import repoEditor from '~/ide/components/repo_editor.vue';
 import monacoLoader from '~/ide/monaco_loader';
 import Editor from '~/ide/lib/editor';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 import { file, resetStore } from '../helpers';
 
 describe('RepoEditor', () => {
@@ -35,7 +38,7 @@ describe('RepoEditor', () => {
 
     resetStore(vm.$store);
 
-    Editor.editorInstance.modelManager.dispose();
+    Editor.editorInstance.dispose();
   });
 
   it('renders an ide container', done => {
@@ -79,16 +82,30 @@ describe('RepoEditor', () => {
   });
 
   describe('when file is markdown and viewer mode is review', () => {
+    let mock;
+
     beforeEach(done => {
+      mock = new MockAdapter(axios);
+
+      vm.file.projectId = 'namespace/project';
       vm.file.previewMode = {
         id: 'markdown',
         previewTitle: 'Preview Markdown',
       };
+      vm.file.content = 'testing 123';
       vm.$store.state.viewer = 'diff';
 
+      mock.onPost(/(.*)\/preview_markdown/).reply(200, {
+        body: '<p>testing 123</p>',
+      });
+
       vm.$nextTick(done);
     });
 
+    afterEach(() => {
+      mock.restore();
+    });
+
     it('renders an Edit and a Preview Tab', done => {
       Vue.nextTick(() => {
         const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li');
@@ -99,6 +116,26 @@ describe('RepoEditor', () => {
         done();
       });
     });
+
+    it('renders markdown for tempFile', done => {
+      vm.file.tempFile = true;
+      vm.file.path = `${vm.file.path}.md`;
+      vm.$store.state.entries[vm.file.path] = vm.file;
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelectorAll('.ide-mode-tabs .nav-links a')[1].click();
+        })
+        .then(setTimeoutPromise)
+        .then(() => {
+          expect(vm.$el.querySelector('.preview-container').innerHTML).toContain(
+            '<p>testing 123</p>',
+          );
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 
   describe('when open file is binary and not raw', () => {
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index d158786e484..f595feec949 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -22,7 +22,7 @@ Vue.config.warnHandler = (msg, vm, trace) => {
 };
 
 let hasVueErrors = false;
-Vue.config.errorHandler = function (err) {
+Vue.config.errorHandler = function(err) {
   hasVueErrors = true;
   fail(err);
 };
@@ -43,10 +43,11 @@ window.gl = window.gl || {};
 window.gl.TEST_HOST = TEST_HOST;
 window.gon = window.gon || {};
 window.gon.test_env = true;
+gon.relative_url_root = '';
 
 let hasUnhandledPromiseRejections = false;
 
-window.addEventListener('unhandledrejection', (event) => {
+window.addEventListener('unhandledrejection', event => {
   hasUnhandledPromiseRejections = true;
   console.error('Unhandled promise rejection:');
   console.error(event.reason.stack || event.reason);
@@ -71,13 +72,13 @@ const axiosDefaultAdapter = getDefaultAdapter();
 
 // render all of our tests
 const testsContext = require.context('.', true, /_spec$/);
-testsContext.keys().forEach(function (path) {
+testsContext.keys().forEach(function(path) {
   try {
     testsContext(path);
   } catch (err) {
     console.error('[ERROR] Unable to load spec: ', path);
-    describe('Test bundle', function () {
-      it(`includes '${path}'`, function () {
+    describe('Test bundle', function() {
+      it(`includes '${path}'`, function() {
         expect(err).toBeNull();
       });
     });
@@ -85,7 +86,7 @@ testsContext.keys().forEach(function (path) {
 });
 
 describe('test errors', () => {
-  beforeAll((done) => {
+  beforeAll(done => {
     if (hasUnhandledPromiseRejections || hasVueWarnings || hasVueErrors) {
       setTimeout(done, 1000);
     } else {
@@ -149,18 +150,18 @@ if (process.env.BABEL_ENV === 'coverage') {
     './issue_show/index.js',
   ];
 
-  describe('Uncovered files', function () {
+  describe('Uncovered files', function() {
     const sourceFiles = require.context('~', true, /\.js$/);
 
     $.holdReady(true);
 
-    sourceFiles.keys().forEach(function (path) {
+    sourceFiles.keys().forEach(function(path) {
       // ignore if there is a matching spec file
       if (testsContext.keys().indexOf(`${path.replace(/\.js$/, '')}_spec`) > -1) {
         return;
       }
 
-      it(`includes '${path}'`, function () {
+      it(`includes '${path}'`, function() {
         try {
           sourceFiles(path);
         } catch (err) {