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