diff options
Diffstat (limited to 'spec/frontend/blob/components')
8 files changed, 92 insertions, 24 deletions
diff --git a/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap index e47a7dcfa2a..1e639f91797 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap @@ -5,7 +5,7 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = ` class="js-file-title file-title-flex-parent" > <gl-form-input-stub - class="form-control js-snippet-file-name qa-snippet-file-name" + class="form-control js-snippet-file-name" id="snippet_file_name" name="snippet_file_name" placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby" diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap index 7382a3a4cf7..2ac6e0d5d24 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap @@ -8,14 +8,15 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = ` <file-icon-stub aria-hidden="true" cssclasses="mr-2" - filename="dummy.md" + filename="foo/bar/dummy.md" size="18" /> <strong - class="file-title-name qa-file-title-name mr-1 js-blob-header-filepath" + class="file-title-name mr-1 js-blob-header-filepath" + data-qa-selector="file_title_name" > - dummy.md + foo/bar/dummy.md </strong> <small @@ -26,8 +27,8 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = ` <clipboard-button-stub cssclass="btn-clipboard btn-transparent lh-100 position-static" - gfm="\`dummy.md\`" - text="dummy.md" + gfm="\`foo/bar/dummy.md\`" + text="foo/bar/dummy.md" title="Copy file path" tooltipplacement="top" /> diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap index 2878ad492a4..7d868625956 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap @@ -9,7 +9,7 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = ` /> <div - class="file-actions d-none d-sm-block" + class="file-actions d-none d-sm-flex" > <viewer-switcher-stub value="simple" diff --git a/spec/frontend/blob/components/blob_content_error_spec.js b/spec/frontend/blob/components/blob_content_error_spec.js index 58a9ee761df..6eb5cfb71aa 100644 --- a/spec/frontend/blob/components/blob_content_error_spec.js +++ b/spec/frontend/blob/components/blob_content_error_spec.js @@ -1,27 +1,60 @@ import { shallowMount } from '@vue/test-utils'; import BlobContentError from '~/blob/components/blob_content_error.vue'; +import { GlSprintf } from '@gitlab/ui'; + +import { BLOB_RENDER_ERRORS } from '~/blob/components/constants'; describe('Blob Content Error component', () => { let wrapper; - const viewerError = '<h1 id="error">Foo Error</h1>'; - function createComponent() { + function createComponent(props = {}) { wrapper = shallowMount(BlobContentError, { propsData: { - viewerError, + ...props, + }, + stubs: { + GlSprintf, }, }); } - beforeEach(() => { - createComponent(); - }); - afterEach(() => { wrapper.destroy(); }); - it('renders the passed error without transformations', () => { - expect(wrapper.html()).toContain(viewerError); + describe('collapsed and too large blobs', () => { + it.each` + error | reason | options + ${BLOB_RENDER_ERRORS.REASONS.COLLAPSED} | ${'it is larger than 1.00 MiB'} | ${[BLOB_RENDER_ERRORS.OPTIONS.LOAD.text, BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]} + ${BLOB_RENDER_ERRORS.REASONS.TOO_LARGE} | ${'it is larger than 100.00 MiB'} | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]} + `('renders correct reason for $error.id', ({ error, reason, options }) => { + createComponent({ + viewerError: error.id, + }); + expect(wrapper.text()).toContain(reason); + options.forEach(option => { + expect(wrapper.text()).toContain(option); + }); + }); + }); + + describe('external blob', () => { + it.each` + storageType | reason | options + ${'lfs'} | ${BLOB_RENDER_ERRORS.REASONS.EXTERNAL.text.lfs} | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]} + ${'build_artifact'} | ${BLOB_RENDER_ERRORS.REASONS.EXTERNAL.text.build_artifact} | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]} + ${'default'} | ${BLOB_RENDER_ERRORS.REASONS.EXTERNAL.text.default} | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]} + `('renders correct reason for $storageType blob', ({ storageType, reason, options }) => { + createComponent({ + viewerError: BLOB_RENDER_ERRORS.REASONS.EXTERNAL.id, + blob: { + externalStorage: storageType, + }, + }); + expect(wrapper.text()).toContain(reason); + options.forEach(option => { + expect(wrapper.text()).toContain(option); + }); + }); }); }); diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js index 6a130c9c43d..244ed41869d 100644 --- a/spec/frontend/blob/components/blob_content_spec.js +++ b/spec/frontend/blob/components/blob_content_spec.js @@ -2,6 +2,12 @@ import { shallowMount } from '@vue/test-utils'; import BlobContent from '~/blob/components/blob_content.vue'; import BlobContentError from '~/blob/components/blob_content_error.vue'; import { + BLOB_RENDER_EVENT_LOAD, + BLOB_RENDER_EVENT_SHOW_SOURCE, + BLOB_RENDER_ERRORS, +} from '~/blob/components/constants'; +import { + Blob, RichViewerMock, SimpleViewerMock, RichBlobContentMock, @@ -38,7 +44,7 @@ describe('Blob Content component', () => { it('renders error if there is any in the viewer', () => { const renderError = 'Oops'; - const viewer = Object.assign({}, SimpleViewerMock, { renderError }); + const viewer = { ...SimpleViewerMock, renderError }; createComponent({}, viewer); expect(wrapper.contains(GlLoadingIcon)).toBe(false); expect(wrapper.contains(BlobContentError)).toBe(true); @@ -67,4 +73,32 @@ describe('Blob Content component', () => { expect(wrapper.find(viewer).html()).toContain(content); }); }); + + describe('functionality', () => { + describe('render error', () => { + const findErrorEl = () => wrapper.find(BlobContentError); + const renderError = BLOB_RENDER_ERRORS.REASONS.COLLAPSED.id; + const viewer = { ...SimpleViewerMock, renderError }; + + beforeEach(() => { + createComponent({ blob: Blob }, viewer); + }); + + it('correctly sets blob on the blob-content-error component', () => { + expect(findErrorEl().props('blob')).toEqual(Blob); + }); + + it(`properly proxies ${BLOB_RENDER_EVENT_LOAD} event`, () => { + expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toBeUndefined(); + findErrorEl().vm.$emit(BLOB_RENDER_EVENT_LOAD); + expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toBeTruthy(); + }); + + it(`properly proxies ${BLOB_RENDER_EVENT_SHOW_SOURCE} event`, () => { + expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toBeUndefined(); + findErrorEl().vm.$emit(BLOB_RENDER_EVENT_SHOW_SOURCE); + expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toBeTruthy(); + }); + }); + }); }); diff --git a/spec/frontend/blob/components/blob_header_filepath_spec.js b/spec/frontend/blob/components/blob_header_filepath_spec.js index d029ba2a7a4..3a53208f357 100644 --- a/spec/frontend/blob/components/blob_header_filepath_spec.js +++ b/spec/frontend/blob/components/blob_header_filepath_spec.js @@ -15,7 +15,7 @@ describe('Blob Header Filepath', () => { function createComponent(blobProps = {}, options = {}) { wrapper = shallowMount(BlobHeaderFilepath, { propsData: { - blob: Object.assign({}, MockBlob, blobProps), + blob: { ...MockBlob, ...blobProps }, }, ...options, }); @@ -38,12 +38,12 @@ describe('Blob Header Filepath', () => { .find('.js-blob-header-filepath') .text() .trim(), - ).toBe(MockBlob.name); + ).toBe(MockBlob.path); }); it('does not fail if the name is empty', () => { - const emptyName = ''; - createComponent({ name: emptyName }); + const emptyPath = ''; + createComponent({ path: emptyPath }); expect(wrapper.find('.js-blob-header-filepath').exists()).toBe(false); }); @@ -84,7 +84,7 @@ describe('Blob Header Filepath', () => { describe('functionality', () => { it('sets gfm value correctly on the clipboard-button', () => { createComponent(); - expect(wrapper.vm.gfmCopyText).toBe('`dummy.md`'); + expect(wrapper.vm.gfmCopyText).toBe(`\`${MockBlob.path}\``); }); }); }); diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js index d410ef10fc9..0e7d2f6516a 100644 --- a/spec/frontend/blob/components/blob_header_spec.js +++ b/spec/frontend/blob/components/blob_header_spec.js @@ -13,7 +13,7 @@ describe('Blob Header Default Actions', () => { const method = shouldMount ? mount : shallowMount; wrapper = method.call(this, BlobHeader, { propsData: { - blob: Object.assign({}, Blob, blobProps), + blob: { ...Blob, ...blobProps }, ...propsData, }, ...options, diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js index bfcca14324f..0f7193846ff 100644 --- a/spec/frontend/blob/components/mock_data.js +++ b/spec/frontend/blob/components/mock_data.js @@ -21,7 +21,7 @@ export const RichViewerMock = { export const Blob = { binary: false, name: 'dummy.md', - path: 'dummy.md', + path: 'foo/bar/dummy.md', rawPath: '/flightjs/flight/snippets/51/raw', size: 75, simpleViewer: { |