diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 15:44:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 15:44:42 +0000 |
commit | 4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch) | |
tree | 5423a1c7516cffe36384133ade12572cf709398d /spec/frontend/repository/components/blob_content_viewer_spec.js | |
parent | e570267f2f6b326480d284e0164a6464ba4081bc (diff) | |
download | gitlab-ce-4555e1b21c365ed8303ffb7a3325d773c9b8bf31.tar.gz |
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'spec/frontend/repository/components/blob_content_viewer_spec.js')
-rw-r--r-- | spec/frontend/repository/components/blob_content_viewer_spec.js | 155 |
1 files changed, 128 insertions, 27 deletions
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js index b662a1d20a9..f03df8cf2ac 100644 --- a/spec/frontend/repository/components/blob_content_viewer_spec.js +++ b/spec/frontend/repository/components/blob_content_viewer_spec.js @@ -1,14 +1,17 @@ import { GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import BlobContent from '~/blob/components/blob_content.vue'; import BlobHeader from '~/blob/components/blob_header.vue'; import BlobContentViewer from '~/repository/components/blob_content_viewer.vue'; +import BlobHeaderEdit from '~/repository/components/blob_header_edit.vue'; let wrapper; -const mockData = { +const simpleMockData = { name: 'some_file.js', size: 123, - rawBlob: 'raw content', + rawSize: 123, + rawTextBlob: 'raw content', type: 'text', fileType: 'text', tooLarge: false, @@ -25,62 +28,160 @@ const mockData = { lockLink: 'some_file.js/lock', canModifyBlob: true, forkPath: 'some_file.js/fork', - simpleViewer: {}, - richViewer: {}, + simpleViewer: { + fileType: 'text', + tooLarge: false, + type: 'simple', + renderError: null, + }, + richViewer: null, +}; +const richMockData = { + ...simpleMockData, + richViewer: { + fileType: 'markup', + tooLarge: false, + type: 'rich', + renderError: null, + }, }; -function factory(path, loading = false) { - wrapper = shallowMount(BlobContentViewer, { +const createFactory = (mountFn) => ( + { props = {}, mockData = {}, stubs = {} } = {}, + loading = false, +) => { + wrapper = mountFn(BlobContentViewer, { propsData: { - path, + path: 'some_file.js', + projectPath: 'some/path', + ...props, }, mocks: { $apollo: { queries: { - blobInfo: { + project: { loading, }, }, }, }, + stubs, }); - wrapper.setData({ blobInfo: mockData }); -} + wrapper.setData(mockData); +}; + +const factory = createFactory(shallowMount); +const fullFactory = createFactory(mount); describe('Blob content viewer component', () => { const findLoadingIcon = () => wrapper.find(GlLoadingIcon); const findBlobHeader = () => wrapper.find(BlobHeader); + const findBlobHeaderEdit = () => wrapper.find(BlobHeaderEdit); const findBlobContent = () => wrapper.find(BlobContent); afterEach(() => { wrapper.destroy(); }); - beforeEach(() => { - factory('some_file.js'); - }); - it('renders a GlLoadingIcon component', () => { - factory('some_file.js', true); + factory({ mockData: { blobInfo: simpleMockData } }, true); expect(findLoadingIcon().exists()).toBe(true); }); - it('renders a BlobHeader component', () => { - expect(findBlobHeader().exists()).toBe(true); + describe('simple viewer', () => { + beforeEach(() => { + factory({ mockData: { blobInfo: simpleMockData } }); + }); + + it('renders a BlobHeader component', () => { + expect(findBlobHeader().props('activeViewerType')).toEqual('simple'); + expect(findBlobHeader().props('hasRenderError')).toEqual(false); + expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(true); + expect(findBlobHeader().props('blob')).toEqual(simpleMockData); + }); + + it('renders a BlobContent component', () => { + expect(findBlobContent().props('loading')).toEqual(false); + expect(findBlobContent().props('content')).toEqual('raw content'); + expect(findBlobContent().props('isRawContent')).toBe(true); + expect(findBlobContent().props('activeViewer')).toEqual({ + fileType: 'text', + tooLarge: false, + type: 'simple', + renderError: null, + }); + }); + }); + + describe('rich viewer', () => { + beforeEach(() => { + factory({ + mockData: { blobInfo: richMockData, activeViewerType: 'rich' }, + }); + }); + + it('renders a BlobHeader component', () => { + expect(findBlobHeader().props('activeViewerType')).toEqual('rich'); + expect(findBlobHeader().props('hasRenderError')).toEqual(false); + expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(false); + expect(findBlobHeader().props('blob')).toEqual(richMockData); + }); + + it('renders a BlobContent component', () => { + expect(findBlobContent().props('loading')).toEqual(false); + expect(findBlobContent().props('content')).toEqual('raw content'); + expect(findBlobContent().props('isRawContent')).toBe(true); + expect(findBlobContent().props('activeViewer')).toEqual({ + fileType: 'markup', + tooLarge: false, + type: 'rich', + renderError: null, + }); + }); + + it('updates viewer type when viewer changed is clicked', async () => { + expect(findBlobContent().props('activeViewer')).toEqual( + expect.objectContaining({ + type: 'rich', + }), + ); + expect(findBlobHeader().props('activeViewerType')).toEqual('rich'); + + findBlobHeader().vm.$emit('viewer-changed', 'simple'); + await nextTick(); + + expect(findBlobHeader().props('activeViewerType')).toEqual('simple'); + expect(findBlobContent().props('activeViewer')).toEqual( + expect.objectContaining({ + type: 'simple', + }), + ); + }); }); - it('renders a BlobContent component', () => { - expect(findBlobContent().exists()).toBe(true); + describe('BlobHeader action slot', () => { + it('renders BlobHeaderEdit button in simple viewer', async () => { + fullFactory({ + mockData: { blobInfo: simpleMockData }, + stubs: { + BlobContent: true, + }, + }); + await nextTick(); + expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit'); + }); - expect(findBlobContent().props('loading')).toEqual(false); - expect(findBlobContent().props('content')).toEqual('raw content'); - expect(findBlobContent().props('isRawContent')).toBe(true); - expect(findBlobContent().props('activeViewer')).toEqual({ - fileType: 'text', - tooLarge: false, - type: 'text', + it('renders BlobHeaderEdit button in rich viewer', async () => { + fullFactory({ + mockData: { blobInfo: richMockData }, + stubs: { + BlobContent: true, + }, + }); + await nextTick(); + expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit'); }); }); }); |