Add tests and move empty file message into own component

2 files changed, 7 insertions, 2 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index e9e9c8a5ec9..452938a2200 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -1,6 +1,7 @@
 <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"
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue
new file mode 100644
index 00000000000..53210cbcc93
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="nothing-here-block">{{ __('Empty file') }}</div>
+</template>