Commit d2beeb7e authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '194207-refactor-pdf-viewer-to-vue-sfc' into 'master'

Refactor pdf_viewer to sfc

See merge request gitlab-org/gitlab!26894
parents 232c6d22 892338cb
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>
`,
});
};
<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>
......@@ -1777,6 +1777,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 ""
......@@ -1918,6 +1921,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 ""
......
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.',
);
});
......
<div class="file-content" data-endpoint="/test" id="js-pdf-viewer"></div>
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', () => {
......
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))
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment