Web IDE markdown preview

4 files changed, 127 insertions, 11 deletions

diff --git a/spec/javascripts/ide/components/repo_file_buttons_spec.js b/spec/javascripts/ide/components/ide_file_buttons_spec.js
index c86bdb132b4..8ac8d1b2acf 100644
--- a/spec/javascripts/ide/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/ide/components/ide_file_buttons_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import repoFileButtons from '~/ide/components/repo_file_buttons.vue';
+import repoFileButtons from '~/ide/components/ide_file_buttons.vue';
 import createVueComponent from '../../helpers/vue_mount_component_helper';
 import { file } from '../helpers';
 
@@ -23,7 +23,7 @@ describe('RepoFileButtons', () => {
     vm.$destroy();
   });
 
-  it('renders Raw, Blame, History, Permalink and Preview toggle', done => {
+  it('renders Raw, Blame, History and Permalink', done => {
     vm = createComponent();
 
     vm.$nextTick(() => {
@@ -32,16 +32,30 @@ describe('RepoFileButtons', () => {
       const history = vm.$el.querySelector('.history');
 
       expect(raw.href).toMatch(`/${activeFile.rawPath}`);
-      expect(raw.textContent.trim()).toEqual('Raw');
+      expect(raw.getAttribute('data-original-title')).toEqual('Raw');
       expect(blame.href).toMatch(`/${activeFile.blamePath}`);
-      expect(blame.textContent.trim()).toEqual('Blame');
+      expect(blame.getAttribute('data-original-title')).toEqual('Blame');
       expect(history.href).toMatch(`/${activeFile.commitsPath}`);
-      expect(history.textContent.trim()).toEqual('History');
-      expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual(
+      expect(history.getAttribute('data-original-title')).toEqual('History');
+      expect(vm.$el.querySelector('.permalink').getAttribute('data-original-title')).toEqual(
         'Permalink',
       );
 
       done();
     });
   });
+
+  it('renders Download', done => {
+    activeFile.binary = true;
+    vm = createComponent();
+
+    vm.$nextTick(() => {
+      const raw = vm.$el.querySelector('.raw');
+
+      expect(raw.href).toMatch(`/${activeFile.rawPath}`);
+      expect(raw.getAttribute('data-original-title')).toEqual('Download');
+
+      done();
+    });
+  });
 });
diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js
index 9d3fa1280f4..e79b85050b2 100644
--- a/spec/javascripts/ide/components/repo_editor_spec.js
+++ b/spec/javascripts/ide/components/repo_editor_spec.js
@@ -19,7 +19,6 @@ describe('RepoEditor', () => {
 
     f.active = true;
     f.tempFile = true;
-    f.html = 'testing';
     vm.$store.state.openFiles.push(f);
     vm.$store.state.entries[f.path] = f;
     vm.monaco = true;
@@ -47,6 +46,61 @@ describe('RepoEditor', () => {
     });
   });
 
+  it('renders only an edit tab', done => {
+    Vue.nextTick(() => {
+      const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li');
+      expect(tabs.length).toBe(1);
+      expect(tabs[0].textContent.trim()).toBe('Edit');
+
+      done();
+    });
+  });
+
+  describe('when file is markdown', () => {
+    beforeEach(done => {
+      vm.file.previewMode = {
+        id: 'markdown',
+        previewTitle: 'Preview Markdown',
+      };
+
+      vm.$nextTick(done);
+    });
+
+    it('renders an Edit and a Preview Tab', done => {
+      Vue.nextTick(() => {
+        const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li');
+        expect(tabs.length).toBe(2);
+        expect(tabs[0].textContent.trim()).toBe('Edit');
+        expect(tabs[1].textContent.trim()).toBe('Preview Markdown');
+
+        done();
+      });
+    });
+  });
+
+  describe('when file is markdown and viewer mode is review', () => {
+    beforeEach(done => {
+      vm.file.previewMode = {
+        id: 'markdown',
+        previewTitle: 'Preview Markdown',
+      };
+      vm.$store.state.viewer = 'diff';
+
+      vm.$nextTick(done);
+    });
+
+    it('renders an Edit and a Preview Tab', done => {
+      Vue.nextTick(() => {
+        const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li');
+        expect(tabs.length).toBe(2);
+        expect(tabs[0].textContent.trim()).toBe('Review');
+        expect(tabs[1].textContent.trim()).toBe('Preview Markdown');
+
+        done();
+      });
+    });
+  });
+
   describe('when open file is binary and not raw', () => {
     beforeEach(done => {
       vm.file.binary = true;
@@ -57,10 +111,6 @@ describe('RepoEditor', () => {
     it('does not render the IDE', () => {
       expect(vm.shouldHideEditor).toBeTruthy();
     });
-
-    it('shows activeFile html', () => {
-      expect(vm.$el.textContent).toContain('testing');
-    });
   });
 
   describe('createEditorInstance', () => {
diff --git a/spec/javascripts/ide/stores/mutations/file_spec.js b/spec/javascripts/ide/stores/mutations/file_spec.js
index 88285ee409f..bf9d5166d0a 100644
--- a/spec/javascripts/ide/stores/mutations/file_spec.js
+++ b/spec/javascripts/ide/stores/mutations/file_spec.js
@@ -194,6 +194,17 @@ describe('IDE store file mutations', () => {
     });
   });
 
+  describe('SET_FILE_VIEWMODE', () => {
+    it('updates file view mode', () => {
+      mutations.SET_FILE_VIEWMODE(localState, {
+        file: localFile,
+        viewMode: 'preview',
+      });
+
+      expect(localFile.viewMode).toBe('preview');
+    });
+  });
+
   describe('ADD_PENDING_TAB', () => {
     beforeEach(() => {
       const f = {
diff --git a/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js
new file mode 100644
index 00000000000..c7c454a0b45
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import contentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('ContentViewer', () => {
+  let vm;
+  let mock;
+
+  function createComponent(props) {
+    const ContentViewer = Vue.extend(contentViewer);
+    vm = mountComponent(ContentViewer, props);
+  }
+
+  afterEach(() => {
+    vm.$destroy();
+    if (mock) mock.restore();
+  });
+
+  it('markdown preview renders + loads rendered markdown from server', done => {
+    mock = new MockAdapter(axios);
+    mock.onPost(`${gon.relative_url_root}/testproject/preview_markdown`).reply(200, {
+      body: '<b>testing</b>',
+    });
+
+    createComponent({
+      path: 'test.md',
+      content: '*  Test',
+      projectPath: 'testproject',
+    });
+
+    const previewContainer = vm.$el.querySelector('.md-previewer');
+
+    setTimeout(() => {
+      expect(previewContainer.textContent).toContain('testing');
+
+      done();
+    });
+  });
+});