Replaced part of diff file properties with diff viewer

- replaced file.too_large
- replaced file.text
- replaced file.collapsed

3 files changed, 50 insertions, 36 deletions

diff --git a/spec/javascripts/diffs/components/diff_content_spec.js b/spec/javascripts/diffs/components/diff_content_spec.js
index 9e158327a77..a1bb51963d6 100644
--- a/spec/javascripts/diffs/components/diff_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_content_spec.js
@@ -6,6 +6,7 @@ import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import '~/behaviors/markdown/render_gfm';
 import diffFileMockData from '../mock_data/diff_file';
 import discussionsMockData from '../mock_data/diff_discussions';
+import { diffViewerModes } from '~/ide/constants';
 
 describe('DiffContent', () => {
   const Component = Vue.extend(DiffContentComponent);
@@ -52,26 +53,39 @@ describe('DiffContent', () => {
 
   describe('empty files', () => {
     beforeEach(() => {
-      vm.diffFile.empty = true;
       vm.diffFile.highlighted_diff_lines = [];
       vm.diffFile.parallel_diff_lines = [];
     });
 
-    it('should render a message', done => {
+    it('should render a no preview message if viewer returns no preview', done => {
+      vm.diffFile.viewer.name = diffViewerModes.no_preview;
       vm.$nextTick(() => {
         const block = vm.$el.querySelector('.diff-viewer .nothing-here-block');
 
         expect(block).not.toBe(null);
-        expect(block.textContent.trim()).toContain('Empty file');
+        expect(block.textContent.trim()).toContain('No preview for this file type');
+
+        done();
+      });
+    });
+
+    it('should render a not diffable message if viewer returns not diffable', done => {
+      vm.diffFile.viewer.name = diffViewerModes.not_diffable;
+      vm.$nextTick(() => {
+        const block = vm.$el.querySelector('.diff-viewer .nothing-here-block');
+
+        expect(block).not.toBe(null);
+        expect(block.textContent.trim()).toContain(
+          'This diff was suppressed by a .gitattributes entry',
+        );
 
         done();
       });
     });
 
     it('should not render multiple messages', done => {
-      vm.diffFile.mode_changed = true;
       vm.diffFile.b_mode = '100755';
-      vm.diffFile.viewer.name = 'mode_changed';
+      vm.diffFile.viewer.name = diffViewerModes.mode_changed;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelectorAll('.nothing-here-block').length).toBe(1);
@@ -81,6 +95,7 @@ describe('DiffContent', () => {
     });
 
     it('should not render diff table', done => {
+      vm.diffFile.viewer.name = diffViewerModes.no_preview;
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('table')).toBe(null);
 
@@ -157,6 +172,7 @@ describe('DiffContent', () => {
         vm.diffFile.new_sha = 'DEF';
         vm.diffFile.old_path = 'test.abc';
         vm.diffFile.old_sha = 'ABC';
+        vm.diffFile.viewer.name = diffViewerModes.added;
 
         vm.$nextTick(() => {
           expect(el.querySelectorAll('.js-diff-inline-view').length).toEqual(0);
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 787a81fd88f..005a4751ea1 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -4,15 +4,15 @@ import diffsModule from '~/diffs/store/modules';
 import notesModule from '~/notes/stores/modules';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffDiscussionsMockData from '../mock_data/diff_discussions';
+import { diffViewerModes } from '~/ide/constants';
 
 Vue.use(Vuex);
 
-const discussionFixture = 'merge_requests/diff_discussion.json';
-
 describe('diff_file_header', () => {
   let vm;
   let props;
-  const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
+  const diffDiscussionMock = diffDiscussionsMockData;
   const Component = Vue.extend(DiffFileHeader);
 
   const store = new Vuex.Store({
@@ -303,13 +303,13 @@ describe('diff_file_header', () => {
       });
 
       it('displays old and new path if the file was renamed', () => {
-        props.diffFile.renamed_file = true;
+        props.diffFile.viewer.name = diffViewerModes.renamed;
 
         vm = mountComponentWithStore(Component, { props, store });
 
         expect(filePaths()).toHaveLength(2);
-        expect(filePaths()[0]).toHaveText(props.diffFile.old_path);
-        expect(filePaths()[1]).toHaveText(props.diffFile.new_path);
+        expect(filePaths()[0]).toHaveText(props.diffFile.old_path_html);
+        expect(filePaths()[1]).toHaveText(props.diffFile.new_path_html);
       });
     });
 
@@ -319,14 +319,12 @@ describe('diff_file_header', () => {
       const button = vm.$el.querySelector('.btn-clipboard');
 
       expect(button).not.toBe(null);
-      expect(button.dataset.clipboardText).toBe(
-        '{"text":"files/ruby/popen.rb","gfm":"`files/ruby/popen.rb`"}',
-      );
+      expect(button.dataset.clipboardText).toBe('{"text":"CHANGELOG.rb","gfm":"`CHANGELOG.rb`"}');
     });
 
     describe('file mode', () => {
       it('it displays old and new file mode if it changed', () => {
-        props.diffFile.mode_changed = true;
+        props.diffFile.viewer.name = diffViewerModes.mode_changed;
 
         vm = mountComponentWithStore(Component, { props, store });
 
@@ -338,7 +336,7 @@ describe('diff_file_header', () => {
       });
 
       it('does not display the file mode if it has not changed', () => {
-        props.diffFile.mode_changed = false;
+        props.diffFile.viewer.name = diffViewerModes.text;
 
         vm = mountComponentWithStore(Component, { props, store });
 
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index 1af49282c36..d16bc21022f 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
+import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import store from '~/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
@@ -27,8 +28,8 @@ describe('DiffFile', () => {
       expect(el.querySelector('.file-title-name').innerText.indexOf(file_path)).toBeGreaterThan(-1);
       expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
 
-      expect(vm.file.renderIt).toEqual(false);
-      vm.file.renderIt = true;
+      expect(vm.renderIt).toEqual(false);
+      vm.renderIt = true;
 
       vm.$nextTick(() => {
         expect(el.querySelectorAll('.line_content').length).toBeGreaterThan(5);
@@ -38,9 +39,9 @@ describe('DiffFile', () => {
     describe('collapsed', () => {
       it('should not have file content', done => {
         expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(1);
-        expect(vm.file.collapsed).toEqual(false);
-        vm.file.collapsed = true;
-        vm.file.renderIt = true;
+        expect(vm.isCollapsed).toEqual(false);
+        vm.isCollapsed = true;
+        vm.renderIt = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(0);
@@ -50,9 +51,8 @@ describe('DiffFile', () => {
       });
 
       it('should have collapsed text and link', done => {
-        vm.file.renderIt = true;
-        vm.file.collapsed = false;
-        vm.file.highlighted_diff_lines = null;
+        vm.renderIt = true;
+        vm.isCollapsed = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).toContain('This diff is collapsed');
@@ -63,8 +63,8 @@ describe('DiffFile', () => {
       });
 
       it('should have collapsed text and link even before rendered', done => {
-        vm.file.renderIt = false;
-        vm.file.collapsed = true;
+        vm.renderIt = false;
+        vm.isCollapsed = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).toContain('This diff is collapsed');
@@ -75,10 +75,10 @@ describe('DiffFile', () => {
       });
 
       it('should be collapsed for renamed files', done => {
-        vm.file.renderIt = true;
-        vm.file.collapsed = false;
+        vm.renderIt = true;
+        vm.isCollapsed = false;
         vm.file.highlighted_diff_lines = null;
-        vm.file.renamed_file = true;
+        vm.file.viewer.name = diffViewerModes.renamed;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).not.toContain('This diff is collapsed');
@@ -88,10 +88,10 @@ describe('DiffFile', () => {
       });
 
       it('should be collapsed for mode changed files', done => {
-        vm.file.renderIt = true;
-        vm.file.collapsed = false;
+        vm.renderIt = true;
+        vm.isCollapsed = false;
         vm.file.highlighted_diff_lines = null;
-        vm.file.mode_changed = true;
+        vm.file.viewer.name = diffViewerModes.mode_changed;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).not.toContain('This diff is collapsed');
@@ -101,7 +101,7 @@ describe('DiffFile', () => {
       });
 
       it('should have loading icon while loading a collapsed diffs', done => {
-        vm.file.collapsed = true;
+        vm.isCollapsed = true;
         vm.isLoadingCollapsedDiff = true;
 
         vm.$nextTick(() => {
@@ -116,7 +116,7 @@ describe('DiffFile', () => {
   describe('too large diff', () => {
     it('should have too large warning and blob link', done => {
       const BLOB_LINK = '/file/view/path';
-      vm.file.too_large = true;
+      vm.file.viewer.error = diffViewerErrors.too_large;
       vm.file.view_path = BLOB_LINK;
 
       vm.$nextTick(() => {
@@ -140,11 +140,11 @@ describe('DiffFile', () => {
 
       vm.file.highlighted_diff_lines = undefined;
       vm.file.parallel_diff_lines = [];
-      vm.file.collapsed = true;
+      vm.isCollapsed = true;
 
       vm.$nextTick()
         .then(() => {
-          vm.file.collapsed = false;
+          vm.isCollapsed = false;
 
           return vm.$nextTick();
         })