Commit f3025f51 authored by Jacques's avatar Jacques

Address code review comments

Addressed code review comments
parent ed4fa2f2
......@@ -7,7 +7,7 @@ import { PDF_MAX_FILE_SIZE, PDF_MAX_PAGE_LIMIT } from '../../constants';
export default {
components: { GlButton, PdfViewer },
i18n: {
tooLargeDescription: __('This PDF is too large to display, please download to view.'),
tooLargeDescription: __('This PDF is too large to display. Please download to view.'),
tooLargeButtonText: __('Download PDF'),
},
props: {
......@@ -40,18 +40,11 @@ export default {
<pdf-viewer v-if="!tooLargeToDisplay" :pdf="url" @pdflabload="handleOnLoad" />
<div v-else class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-5">
<p data-testid="download-help-text">{{ $options.i18n.tooLargeDescription }}</p>
<p>{{ $options.i18n.tooLargeDescription }}</p>
<gl-button
icon="download"
category="secondary"
variant="confirm"
:href="url"
:aria-label="$options.i18n.tooLargeButtonText"
:title="$options.i18n.tooLargeButtonText"
download
>{{ $options.i18n.tooLargeButtonText }}</gl-button
>
<gl-button icon="download" category="secondary" variant="confirm" :href="url" download>{{
$options.i18n.tooLargeButtonText
}}</gl-button>
</div>
</div>
</template>
......@@ -35552,7 +35552,7 @@ msgstr ""
msgid "This GitLab instance is undergoing maintenance and is operating in read-only mode."
msgstr ""
msgid "This PDF is too large to display, please download to view."
msgid "This PDF is too large to display. Please download to view."
msgstr ""
msgid "This Project is currently archived and read-only. Please unarchive the project first if you want to resume Pull mirroring"
......
import { shallowMount } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import Component from '~/repository/components/blob_viewers/pdf_viewer.vue';
import PdfViewer from '~/blob/pdf/pdf_viewer.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
describe('PDF Viewer', () => {
let wrapper;
......@@ -10,13 +9,11 @@ describe('PDF Viewer', () => {
const defaultPropsData = { url: 'some/pdf_blob.pdf' };
const createComponent = (fileSize = 999) => {
wrapper = extendedWrapper(
shallowMount(Component, { propsData: { ...defaultPropsData, fileSize } }),
);
wrapper = shallowMountExtended(Component, { propsData: { ...defaultPropsData, fileSize } });
};
const findPDFViewer = () => wrapper.findComponent(PdfViewer);
const findHelpText = () => wrapper.findByTestId('download-help-text');
const findHelpText = () => wrapper.find('p');
const findDownLoadButton = () => wrapper.findComponent(GlButton);
it('renders a PDF Viewer component', () => {
......@@ -35,12 +32,11 @@ describe('PDF Viewer', () => {
it('renders help text', () => {
expect(findHelpText().text()).toBe(
'This PDF is too large to display, please download to view.',
'This PDF is too large to display. Please download to view.',
);
});
it('renders a download button', () => {
expect(findDownLoadButton().exists()).toBe(true);
expect(findDownLoadButton().text()).toBe('Download PDF');
expect(findDownLoadButton().props('icon')).toBe('download');
});
......
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