diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-08 18:10:37 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-08 18:10:37 +0300 |
commit | 2051d3c9cece72167a237002c309c720924c88cf (patch) | |
tree | 0217a15b1ff72d28c67fa3f676db9328c57179a5 | |
parent | 835d006431c9769a17472cce25e05719ac580dd7 (diff) |
Add latest changes from gitlab-org/gitlab@master
3 files changed, 75 insertions, 10 deletions
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index 0ab032b25d3..a9701c8f8aa 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -7,10 +7,12 @@ import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constant import createFlash from '~/flash'; import { __ } from '~/locale'; import blobInfoQuery from '../queries/blob_info.query.graphql'; +import BlobHeaderEdit from './blob_header_edit.vue'; export default { components: { BlobHeader, + BlobHeaderEdit, BlobContent, GlLoadingIcon, }, @@ -122,7 +124,11 @@ export default { :active-viewer-type="viewer.type" :has-render-error="hasRenderError" @viewer-changed="switchViewer" - /> + > + <template #actions> + <blob-header-edit :edit-path="blobInfo.editBlobPath" /> + </template> + </blob-header> <blob-content :blob="blobInfo" :content="blobInfo.rawTextBlob" diff --git a/app/assets/javascripts/repository/components/blob_header_edit.vue b/app/assets/javascripts/repository/components/blob_header_edit.vue new file mode 100644 index 00000000000..f3649895736 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_header_edit.vue @@ -0,0 +1,25 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + i18n: { + edit: __('Edit'), + }, + components: { + GlButton, + }, + props: { + editPath: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <gl-button category="primary" variant="confirm" class="gl-mr-3" :href="editPath"> + {{ $options.i18n.edit }} + </gl-button> +</template> diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js index fbc47a106d1..f03df8cf2ac 100644 --- a/spec/frontend/repository/components/blob_content_viewer_spec.js +++ b/spec/frontend/repository/components/blob_content_viewer_spec.js @@ -1,8 +1,10 @@ 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 simpleMockData = { @@ -44,8 +46,11 @@ const richMockData = { }, }; -function factory({ props = {}, mockData = {} } = {}, loading = false) { - wrapper = shallowMount(BlobContentViewer, { +const createFactory = (mountFn) => ( + { props = {}, mockData = {}, stubs = {} } = {}, + loading = false, +) => { + wrapper = mountFn(BlobContentViewer, { propsData: { path: 'some_file.js', projectPath: 'some/path', @@ -60,20 +65,21 @@ function factory({ props = {}, mockData = {} } = {}, loading = false) { }, }, }, + stubs, }); 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); - beforeEach(() => { - factory({ mockData: { blobInfo: simpleMockData } }); - }); - afterEach(() => { wrapper.destroy(); }); @@ -85,6 +91,10 @@ describe('Blob content viewer component', () => { }); 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); @@ -140,7 +150,7 @@ describe('Blob content viewer component', () => { expect(findBlobHeader().props('activeViewerType')).toEqual('rich'); findBlobHeader().vm.$emit('viewer-changed', 'simple'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findBlobHeader().props('activeViewerType')).toEqual('simple'); expect(findBlobContent().props('activeViewer')).toEqual( @@ -150,4 +160,28 @@ describe('Blob content viewer component', () => { ); }); }); + + 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'); + }); + + 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'); + }); + }); }); |