Use PDF Viewer when vewing a PDF blob

Created a PDF blob viewer

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

@@ -12,6 +12,8 @@ export const loadViewer = (type) => {
       return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue');
     case 'video':
       return () => import(/* webpackChunkName: 'blob_video_viewer' */ './video_viewer.vue');
+    case 'pdf':
+      return () => import(/* webpackChunkName: 'blob_pdf_viewer' */ './pdf_viewer.vue');
     default:
       return null;
   }
@@ -36,5 +38,8 @@ export const viewerProps = (type, blob) => {
     video: {
       url: blob.rawPath,
     },
+    pdf: {
+      url: blob.rawPath,
+    },
   }[type];
 };

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

+<script>
+import PdfViewer from '~/blob/pdf/pdf_viewer.vue';
+
+export default {
+  components: { PdfViewer },
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <pdf-viewer :pdf="url" />
+</template>

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

+import { shallowMount } from '@vue/test-utils';
+import Component from '~/repository/components/blob_viewers/pdf_viewer.vue';
+import PdfViewer from '~/blob/pdf/pdf_viewer.vue';
+
+describe('PDF Viewer', () => {
+  let wrapper;
+
+  const propsData = { url: 'some/pdf_blob.pdf' };
+
+  const createComponent = () => {
+    wrapper = shallowMount(Component, { propsData });
+  };
+
+  const findPDFViewer = () => wrapper.findComponent(PdfViewer);
+
+  it('renders a PDF Viewer component', () => {
+    createComponent();
+
+    expect(findPDFViewer().exists()).toBe(true);
+    expect(findPDFViewer().props('pdf')).toBe(propsData.url);
+  });
+});