diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue index eb7f45cba6f79384dff2f7709c1da5c17c5d6272..f5f06436bcc43008622b9bde496b70a133cebb2b 100644 --- a/app/assets/javascripts/blob/components/blob_content.vue +++ b/app/assets/javascripts/blob/components/blob_content.vue @@ -21,6 +21,11 @@ export default { default: '', required: false, }, + isRawContent: { + type: Boolean, + default: false, + required: false, + }, loading: { type: Boolean, default: true, @@ -65,6 +70,8 @@ export default { v-else ref="contentViewer" :content="content" + :is-raw-content="isRawContent" + :file-name="blob.name" :type="activeViewer.fileType" data-qa-selector="file_content" /> diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index a77c1a4178788151cd3508c2428053f5cb3852bc..58b42fb785935f637de2d5fa1d92c1d2af0a1b3e 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -36,6 +36,12 @@ export default { blobHash: uniqueId(), }; }, + props: { + path: { + type: String, + required: true, + }, + }, data() { return { projectPath: '', @@ -85,6 +91,7 @@ export default { diff --git a/app/assets/javascripts/repository/pages/blob.vue b/app/assets/javascripts/repository/pages/blob.vue index c492f9663644aa98177e5d475335d7e685ea46d1..27af398be092813fc2f623ee5d34dafa009f1662 100644 --- a/app/assets/javascripts/repository/pages/blob.vue +++ b/app/assets/javascripts/repository/pages/blob.vue @@ -2,16 +2,21 @@ // This file is in progress and behind a feature flag, please see the following issue for more: // https://gitlab.com/gitlab-org/gitlab/-/issues/323200 -// TODO (follow-up MR): import BlobContentViewer from '../components/blob_content_viewer.vue'; +import BlobContentViewer from '../components/blob_content_viewer.vue'; export default { components: { - // TODO (follow-up MR): BlobContentViewer, + BlobContentViewer, + }, + props: { + path: { + type: String, + required: true, + }, }, }; diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js b/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js index db61d0f6b05c1e4b94c5670f6ad95c7308aaa7c9..9c2ed5abf044f484015a73406d25726542609847 100644 --- a/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js +++ b/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js @@ -11,6 +11,16 @@ export default { type: String, required: true, }, + isRawContent: { + type: Boolean, + default: false, + required: false, + }, + fileName: { + type: String, + required: false, + default: '', + }, }, mounted() { eventHub.$emit(SNIPPET_MEASURE_BLOBS_CONTENT); diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue index 5bb31f55e6c05ef3855b417d56d8295e9a35a3b7..535b659cc5fe46664f7238782a239593130cfcdf 100644 --- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue @@ -1,12 +1,14 @@ diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js index a0d00ff9a7d3a04abdb20a82c7892ab187a5ab1d..b662a1d20a9a4727fac8ef2e76092d7a8239dccf 100644 --- a/spec/frontend/repository/components/blob_content_viewer_spec.js +++ b/spec/frontend/repository/components/blob_content_viewer_spec.js @@ -76,6 +76,7 @@ describe('Blob content viewer 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, diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js new file mode 100644 index 0000000000000000000000000000000000000000..3e7ead4ad00a8a955bf034b74843b9711a454850 --- /dev/null +++ b/spec/frontend/repository/pages/blob_spec.js @@ -0,0 +1,25 @@ +import { shallowMount } from '@vue/test-utils'; +import BlobContentViewer from '~/repository/components/blob_content_viewer.vue'; +import BlobPage from '~/repository/pages/blob.vue'; + +jest.mock('~/repository/utils/dom'); + +describe('Repository blob page component', () => { + let wrapper; + + const findBlobContentViewer = () => wrapper.find(BlobContentViewer); + const path = 'file.js'; + + beforeEach(() => { + wrapper = shallowMount(BlobPage, { propsData: { path } }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('has a Blob Content Viewer component', () => { + expect(findBlobContentViewer().exists()).toBe(true); + expect(findBlobContentViewer().props('path')).toBe(path); + }); +}); diff --git a/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap b/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap index 023895099b1df6aab99becbe6b94fec4aa3c3363..0eae69c483e7b4e9494cbe7f3b6ce38ff1f272c7 100644 --- a/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap +++ b/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap @@ -1,87 +1,89 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = ` -
+
- - + + + + 1 - 1 - - - - + + + + + 2 - 2 - - - - + + + + + 3 - 3 - - -
- -
- 
+
+ +
- - - First - - + + First + + - - Second - - + + Second + + - - Third - - - + + Third + + + +
`; diff --git a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js index 9a0616343feb9cca47252bb1d58d7d1d33e746d1..92a326efd832a1172bd034359b286c0386c8f868 100644 --- a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js +++ b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js @@ -1,13 +1,14 @@ import { shallowMount } from '@vue/test-utils'; import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants'; import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue'; +import EditorLite from '~/vue_shared/components/editor_lite.vue'; describe('Blob Simple Viewer component', () => { let wrapper; const contentMock = `First\nSecond\nThird`; const blobHash = 'foo-bar'; - function createComponent(content = contentMock) { + function createComponent(content = contentMock, isRawContent = false) { wrapper = shallowMount(SimpleViewer, { provide: { blobHash, @@ -15,6 +16,8 @@ describe('Blob Simple Viewer component', () => { propsData: { content, type: 'text', + fileName: 'test.js', + isRawContent, }, }); } @@ -83,4 +86,18 @@ describe('Blob Simple Viewer component', () => { }); }); }); + + describe('raw content', () => { + const findEditorLite = () => wrapper.find(EditorLite); + const isRawContent = true; + + it('uses the Editor Lite component in readonly mode when viewing raw content', () => { + createComponent('raw content', isRawContent); + + expect(findEditorLite().exists()).toBe(true); + expect(findEditorLite().props('value')).toBe('raw content'); + expect(findEditorLite().props('fileName')).toBe('test.js'); + expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true }); + }); + }); });