Merge branch '324314-client-side-solution-for-empty-viewer' into 'master'

Blob refactor: Create empty viewer

See merge request gitlab-org/gitlab!65438

app/assets/javascripts/repository/components/blob_viewers/empty_viewer.vue

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

app/assets/javascripts/repository/components/blob_viewers/index.js

 export const loadViewer = (type) => {
   switch (type) {
     case 'empty':
-      // TODO (follow-up): import the empty viewer
-      return null; // () => import(/* webpackChunkName: 'blob_empty_viewer' */ './empty_viewer.vue');
+      return () => import(/* webpackChunkName: 'blob_empty_viewer' */ './empty_viewer.vue');
     case 'text':
       // TODO (follow-up): import the text viewer
       return null; // () => import(/* webpackChunkName: 'blob_text_viewer' */ './text_viewer.vue');

spec/frontend/repository/components/blob_viewers/__snapshots__/empty_viewer_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty Viewer matches the snapshot 1`] = `
+<div
+  class="nothing-here-block"
+>
+  Empty file
+</div>
+`;

spec/frontend/repository/components/blob_viewers/empty_viewer_spec.js

+import { shallowMount } from '@vue/test-utils';
+import EmptyViewer from '~/repository/components/blob_viewers/empty_viewer.vue';
+
+describe('Empty Viewer', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(EmptyViewer);
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});