Add tests and move empty file message into own component

app/assets/javascripts/diffs/components/diff_content.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import EmptyFileViewer from '~/vue_shared/components/diff_viewer/viewers/empty_file.vue';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
 import NoteForm from '../../notes/components/note_form.vue';
@@ -17,6 +18,7 @@ export default {
     NoteForm,
     DiffDiscussions,
     ImageDiffOverlay,
+    EmptyFileViewer,
   },
   props: {
     diffFile: {
@@ -69,8 +71,8 @@ export default {
 <template>
   <div class="diff-content">
     <div class="diff-viewer">
-      <div v-if="diffFile.empty" class="nothing-here-block">{{ __('Empty file') }}</div>
-      <template v-else-if="isTextFile">
+      <template v-if="isTextFile">
+        <empty-file-viewer v-if="diffFile.empty" />
         <inline-diff-view
           v-if="isInlineView"
           :diff-file="diffFile"

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue

+<template>
+  <div class="nothing-here-block">{{ __('Empty file') }}</div>
+</template>

spec/javascripts/diffs/components/diff_content_spec.js

@@ -49,6 +49,37 @@ 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 => {
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-viewer .nothing-here-block')).not.toBe(null);
+        expect(
+          vm.$el.querySelector('.diff-viewer .nothing-here-block').textContent.trim(),
+        ).toContain('Empty file');
+
+        done();
+      });
+    });
+
+    it('should not display multiple messages', done => {
+      vm.diffFile.mode_changed = true;
+      vm.diffFile.b_mode = '100755';
+      vm.diffFile.viewer.name = 'mode_changed';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelectorAll('.nothing-here-block').length).toBe(1);
+
+        done();
+      });
+    });
+  });
+
   describe('Non-Text diffs', () => {
     beforeEach(() => {
       vm.diffFile.viewer.name = 'image';

spec/lib/gitlab/diff/file_spec.rb

@@ -583,6 +583,12 @@ describe Gitlab::Diff::File do
       end
     end
 
+    describe '#empty?' do
+      it 'returns true' do
+        expect(diff_file.empty?).to be_truthy
+      end
+    end
+
     describe '#different_type?' do
       it 'returns false' do
         expect(diff_file).not_to be_different_type
@@ -662,4 +668,87 @@ describe Gitlab::Diff::File do
       end
     end
   end
+
+  describe '#empty?' do
+    let(:project) do
+      create(:project, :custom_repo, files: {})
+    end
+    let(:branch_name) { 'master' }
+
+    def create_file(file_name, content)
+      Files::CreateService.new(
+        project,
+        project.owner,
+        commit_message: 'Update',
+        start_branch: branch_name,
+        branch_name: branch_name,
+        file_path: file_name,
+        file_content: content
+      ).execute
+
+      return project.commit(branch_name).diffs.diff_files.first
+    end
+
+    def update_file(file_name, content)
+      Files::UpdateService.new(
+        project,
+        project.owner,
+        commit_message: 'Update',
+        start_branch: branch_name,
+        branch_name: branch_name,
+        file_path: file_name,
+        file_content: content
+      ).execute
+
+      return project.commit(branch_name).diffs.diff_files.first
+    end
+
+    def delete_file(file_name)
+      Files::DeleteService.new(
+        project,
+        project.owner,
+        commit_message: 'Update',
+        start_branch: branch_name,
+        branch_name: branch_name,
+        file_path: file_name
+      ).execute
+
+      return project.commit(branch_name).diffs.diff_files.first
+    end
+
+    context 'when empty file is created' do
+      it 'returns true' do
+        diff_file = create_file('empty.md', '')
+
+        expect(diff_file.empty?).to be_truthy
+      end
+    end
+
+    context 'when empty file is deleted' do
+      it 'returns true' do
+        create_file('empty.md', '')
+        diff_file = delete_file('empty.md')
+
+        expect(diff_file.empty?).to be_truthy
+      end
+    end
+
+    context 'when file with content is truncated' do
+      it 'returns false' do
+        create_file('with-content.md', 'file content')
+        diff_file = update_file('with-content.md', '')
+
+        expect(diff_file.empty?).to be_falsey
+      end
+    end
+
+    context 'when empty file has content added' do
+      it 'returns false' do
+        create_file('empty.md', '')
+        diff_file = update_file('empty.md', 'new content')
+
+        expect(diff_file.empty?).to be_falsey
+      end
+    end
+  end
 end

spec/support/shared_examples/serializers/diff_file_entity_examples.rb

@@ -32,7 +32,7 @@ shared_examples 'diff file entity' do
   it 'exposes correct attributes' do
     expect(subject).to include(:too_large, :added_lines, :removed_lines,
                                :context_lines_path, :highlighted_diff_lines,
-                               :parallel_diff_lines)
+                               :parallel_diff_lines, :empty)
   end
 
   it 'includes viewer' do