diff options
Diffstat (limited to 'spec/frontend/blob')
4 files changed, 127 insertions, 25 deletions
diff --git a/spec/frontend/blob/components/blob_content_error_spec.js b/spec/frontend/blob/components/blob_content_error_spec.js new file mode 100644 index 00000000000..58a9ee761df --- /dev/null +++ b/spec/frontend/blob/components/blob_content_error_spec.js @@ -0,0 +1,27 @@ +import { shallowMount } from '@vue/test-utils'; +import BlobContentError from '~/blob/components/blob_content_error.vue'; + +describe('Blob Content Error component', () => { + let wrapper; + const viewerError = '<h1 id="error">Foo Error</h1>'; + + function createComponent() { + wrapper = shallowMount(BlobContentError, { + propsData: { + viewerError, + }, + }); + } + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the passed error without transformations', () => { + expect(wrapper.html()).toContain(viewerError); + }); +}); diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js new file mode 100644 index 00000000000..6a130c9c43d --- /dev/null +++ b/spec/frontend/blob/components/blob_content_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import BlobContent from '~/blob/components/blob_content.vue'; +import BlobContentError from '~/blob/components/blob_content_error.vue'; +import { + RichViewerMock, + SimpleViewerMock, + RichBlobContentMock, + SimpleBlobContentMock, +} from './mock_data'; +import { GlLoadingIcon } from '@gitlab/ui'; +import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers'; + +describe('Blob Content component', () => { + let wrapper; + + function createComponent(propsData = {}, activeViewer = SimpleViewerMock) { + wrapper = shallowMount(BlobContent, { + propsData: { + loading: false, + activeViewer, + ...propsData, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + describe('rendering', () => { + it('renders loader if `loading: true`', () => { + createComponent({ loading: true }); + expect(wrapper.contains(GlLoadingIcon)).toBe(true); + expect(wrapper.contains(BlobContentError)).toBe(false); + expect(wrapper.contains(RichViewer)).toBe(false); + expect(wrapper.contains(SimpleViewer)).toBe(false); + }); + + it('renders error if there is any in the viewer', () => { + const renderError = 'Oops'; + const viewer = Object.assign({}, SimpleViewerMock, { renderError }); + createComponent({}, viewer); + expect(wrapper.contains(GlLoadingIcon)).toBe(false); + expect(wrapper.contains(BlobContentError)).toBe(true); + expect(wrapper.contains(RichViewer)).toBe(false); + expect(wrapper.contains(SimpleViewer)).toBe(false); + }); + + it.each` + type | mock | viewer + ${'simple'} | ${SimpleViewerMock} | ${SimpleViewer} + ${'rich'} | ${RichViewerMock} | ${RichViewer} + `( + 'renders $type viewer when activeViewer is $type and no loading or error detected', + ({ mock, viewer }) => { + createComponent({}, mock); + expect(wrapper.contains(viewer)).toBe(true); + }, + ); + + it.each` + content | mock | viewer + ${SimpleBlobContentMock.plainData} | ${SimpleViewerMock} | ${SimpleViewer} + ${RichBlobContentMock.richData} | ${RichViewerMock} | ${RichViewer} + `('renders correct content that is passed to the component', ({ content, mock, viewer }) => { + createComponent({ content }, mock); + expect(wrapper.find(viewer).html()).toContain(content); + }); + }); +}); diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js index 5da0d40ab14..39d627e71c5 100644 --- a/spec/frontend/blob/components/blob_header_default_actions_spec.js +++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js @@ -67,13 +67,4 @@ describe('Blob Header Default Actions', () => { expect(buttons.at(0).attributes('disabled')).toBeTruthy(); }); }); - - describe('functionally', () => { - it('emits an event when a Copy Contents button is clicked', () => { - jest.spyOn(wrapper.vm, '$emit'); - buttons.at(0).vm.$emit('click'); - - expect(wrapper.vm.$emit).toHaveBeenCalledWith('copy'); - }); - }); }); diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js index 4f7b297aba0..bfcca14324f 100644 --- a/spec/frontend/blob/components/mock_data.js +++ b/spec/frontend/blob/components/mock_data.js @@ -1,29 +1,43 @@ +import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants'; + +export const SimpleViewerMock = { + collapsed: false, + loadingPartialName: 'loading', + renderError: null, + tooLarge: false, + type: SIMPLE_BLOB_VIEWER, + fileType: 'text', +}; + +export const RichViewerMock = { + collapsed: false, + loadingPartialName: 'loading', + renderError: null, + tooLarge: false, + type: RICH_BLOB_VIEWER, + fileType: 'markdown', +}; + export const Blob = { binary: false, - highlightedData: - '<h1 data-sourcepos="1:1-1:19" dir="auto">\n<a id="user-content-this-one-is-dummy" class="anchor" href="#this-one-is-dummy" aria-hidden="true"></a>This one is dummy</h1>\n<h2 data-sourcepos="3:1-3:21" dir="auto">\n<a id="user-content-and-has-sub-header" class="anchor" href="#and-has-sub-header" aria-hidden="true"></a>And has sub-header</h2>\n<p data-sourcepos="5:1-5:27" dir="auto">Even some stupid text here</p>', name: 'dummy.md', path: 'dummy.md', rawPath: '/flightjs/flight/snippets/51/raw', size: 75, simpleViewer: { - collapsed: false, - fileType: 'text', - loadAsync: true, - loadingPartialName: 'loading', - renderError: null, - tooLarge: false, - type: 'simple', + ...SimpleViewerMock, }, richViewer: { - collapsed: false, - fileType: 'markup', - loadAsync: true, - loadingPartialName: 'loading', - renderError: null, - tooLarge: false, - type: 'rich', + ...RichViewerMock, }, }; +export const RichBlobContentMock = { + richData: '<h1>Rich</h1>', +}; + +export const SimpleBlobContentMock = { + plainData: 'Plain', +}; + export default {}; |