Refactor pdf_viewer to sfc

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26894

app/assets/javascripts/blob/pdf/index.js

 import Vue from 'vue';
-import pdfLab from '../../pdf/index.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
+import PdfViewer from './pdf_viewer.vue';
 
 export default () => {
   const el = document.getElementById('js-pdf-viewer');
 
   return new Vue({
     el,
-    components: {
-      pdfLab,
-      GlLoadingIcon,
+    render(createElement) {
+      return createElement(PdfViewer, {
+        props: {
+          pdf: el.dataset.endpoint,
+        },
+      });
     },
-    data() {
-      return {
-        error: false,
-        loadError: false,
-        loading: true,
-        pdf: el.dataset.endpoint,
-      };
-    },
-    methods: {
-      onLoad() {
-        this.loading = false;
-      },
-      onError(error) {
-        this.loading = false;
-        this.loadError = true;
-        this.error = error;
-      },
-    },
-    template: `
-      <div class="js-pdf-viewer container-fluid md prepend-top-default append-bottom-default">
-        <div
-          class="text-center loading"
-          v-if="loading && !error">
-          <gl-loading-icon class="mt-5" size="lg"/>
-        </div>
-        <pdf-lab
-          v-if="!loadError"
-          :pdf="pdf"
-          @pdflabload="onLoad"
-          @pdflaberror="onError" />
-        <p
-          class="text-center"
-          v-if="error">
-          <span v-if="loadError">
-            An error occurred while loading the file. Please try again later.
-          </span>
-          <span v-else>
-            An error occurred while decoding the file.
-          </span>
-        </p>
-      </div>
-    `,
   });
 };

app/assets/javascripts/blob/pdf/pdf_viewer.vue

+<script>
+import PdfLab from '../../pdf/index.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    PdfLab,
+    GlLoadingIcon,
+  },
+  props: {
+    pdf: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      error: false,
+      loadError: false,
+      loading: true,
+    };
+  },
+  methods: {
+    onLoad() {
+      this.loading = false;
+    },
+    onError(error) {
+      this.loading = false;
+      this.loadError = true;
+      this.error = error;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="js-pdf-viewer container-fluid md prepend-top-default append-bottom-default">
+    <div v-if="loading && !error" class="text-center loading">
+      <gl-loading-icon class="mt-5" size="lg" />
+    </div>
+    <pdf-lab v-if="!loadError" :pdf="pdf" @pdflabload="onLoad" @pdflaberror="onError" />
+    <p v-if="error" class="text-center">
+      <span v-if="loadError" ref="loadError">
+        {{ __('An error occurred while loading the file. Please try again later.') }}
+      </span>
+      <span v-else>{{ __('An error occurred while decoding the file.') }}</span>
+    </p>
+  </div>
+</template>

locale/gitlab.pot

@@ -1786,6 +1786,9 @@ msgstr ""
 msgid "An error occurred while committing your changes."
 msgstr ""
 
+msgid "An error occurred while decoding the file."
+msgstr ""
+
 msgid "An error occurred while deleting the approvers group"
 msgstr ""
 
@@ -1927,6 +1930,9 @@ msgstr ""
 msgid "An error occurred while loading the file."
 msgstr ""
 
+msgid "An error occurred while loading the file. Please try again later."
+msgstr ""
+
 msgid "An error occurred while loading the merge request changes."
 msgstr ""
 

spec/javascripts/blob/pdf/index_spec.js → spec/frontend/blob/pdf/pdf_viewer_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+
 import { FIXTURES_PATH } from 'spec/test_constants';
-import renderPDF from '~/blob/pdf';
+import component from '~/blob/pdf/pdf_viewer.vue';
+import PdfLab from '~/pdf/index.vue';
 
 const testPDF = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
 
 describe('PDF renderer', () => {
-  let viewer;
-  let app;
+  let wrapper;
 
-  const checkLoaded = done => {
-    if (app.loading) {
-      setTimeout(() => {
-        checkLoaded(done);
-      }, 100);
-    } else {
-      done();
-    }
+  const mountComponent = () => {
+    wrapper = shallowMount(component, {
+      propsData: {
+        pdf: testPDF,
+      },
+    });
   };
 
-  preloadFixtures('static/pdf_viewer.html');
+  const findLoading = () => wrapper.find(GlLoadingIcon);
+  const findPdfLab = () => wrapper.find(PdfLab);
+  const findLoadError = () => wrapper.find({ ref: 'loadError' });
 
   beforeEach(() => {
-    loadFixtures('static/pdf_viewer.html');
-    viewer = document.getElementById('js-pdf-viewer');
-    viewer.dataset.endpoint = testPDF;
+    mountComponent();
   });
 
-  it('shows loading icon', () => {
-    renderPDF();
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
 
-    expect(document.querySelector('.loading')).not.toBeNull();
+  it('shows loading icon', () => {
+    expect(findLoading().exists()).toBe(true);
   });
 
   describe('successful response', () => {
-    beforeEach(done => {
-      app = renderPDF();
-
-      checkLoaded(done);
+    beforeEach(() => {
+      findPdfLab().vm.$emit('pdflabload');
     });
 
     it('does not show loading icon', () => {
-      expect(document.querySelector('.loading')).toBeNull();
+      expect(findLoading().exists()).toBe(false);
     });
 
     it('renders the PDF', () => {
-      expect(document.querySelector('.pdf-viewer')).not.toBeNull();
-    });
-
-    it('renders the PDF page', () => {
-      expect(document.querySelector('.pdf-page')).not.toBeNull();
+      expect(findPdfLab().exists()).toBe(true);
     });
   });
 
   describe('error getting file', () => {
-    beforeEach(done => {
-      viewer.dataset.endpoint = 'invalid/path/to/file.pdf';
-      app = renderPDF();
-
-      checkLoaded(done);
+    beforeEach(() => {
+      findPdfLab().vm.$emit('pdflaberror', 'foo');
     });
 
     it('does not show loading icon', () => {
-      expect(document.querySelector('.loading')).toBeNull();
+      expect(findLoading().exists()).toBe(false);
     });
 
     it('shows error message', () => {
-      expect(document.querySelector('.md').textContent.trim()).toBe(
+      expect(findLoadError().text()).toBe(
         'An error occurred while loading the file. Please try again later.',
       );
     });

spec/frontend/fixtures/static/pdf_viewer.html

-<div class="file-content" data-endpoint="/test" id="js-pdf-viewer"></div>

spec/javascripts/pdf/index_spec.js

 import Vue from 'vue';
-import { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
-import workerSrc from 'pdfjs-dist/build/pdf.worker.min';
 
 import { FIXTURES_PATH } from 'spec/test_constants';
 import PDFLab from '~/pdf/index.vue';
 
 const pdf = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
 
-GlobalWorkerOptions.workerSrc = workerSrc;
 const Component = Vue.extend(PDFLab);
 
 describe('PDF component', () => {

spec/javascripts/pdf/page_spec.js

 import Vue from 'vue';
-import pdfjsLib from 'pdfjs-dist/build/pdf';
-import workerSrc from 'pdfjs-dist/build/pdf.worker.min';
+import pdfjsLib from 'pdfjs-dist/webpack';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { FIXTURES_PATH } from 'spec/test_constants';
@@ -14,7 +13,6 @@ describe('Page component', () => {
   let testPage;
 
   beforeEach(done => {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
     pdfjsLib
       .getDocument(testPDF)
       .promise.then(pdf => pdf.getPage(1))