From bf6cbb27beb37cf2c21c41de300541939e635fcb Mon Sep 17 00:00:00 2001 From: Jacques Erasmus Date: Mon, 29 Mar 2021 12:21:43 +0000 Subject: [PATCH 1/2] Use Source Editor to view blobs Use Source editor (editor lite) to view blobs --- .../blob/components/blob_content.vue | 7 + .../components/blob_content_viewer.vue | 7 + .../javascripts/repository/pages/blob.vue | 13 +- .../components/blob_viewers/mixins.js | 10 ++ .../components/blob_viewers/simple_viewer.vue | 53 ++++--- .../components/blob_content_viewer_spec.js | 1 + spec/frontend/repository/pages/blob_spec.js | 25 +++ .../__snapshots__/simple_viewer_spec.js.snap | 142 +++++++++--------- .../blob_viewers/simple_viewer_spec.js | 19 ++- 9 files changed, 181 insertions(+), 96 deletions(-) create mode 100644 spec/frontend/repository/pages/blob_spec.js diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue index eb7f45cba6f793..f5f06436bcc430 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 a77c1a41787881..58b42fb785935f 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 c492f9663644aa..27af398be09281 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 db61d0f6b05c1e..9c2ed5abf044f4 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 5bb31f55e6c05e..535b659cc5fe46 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 a0d00ff9a7d3a0..b662a1d20a9a47 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 00000000000000..7cd108460a44e5 --- /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')).toEqual(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 023895099b1df6..0eae69c483e7b4 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 9a0616343feb9c..a972719cc6bbae 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')).toEqual('raw content'); + expect(findEditorLite().props('fileName')).toEqual('test.js'); + expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true }); + }); + }); }); -- GitLab From 6313f257b916a544881d3038af357a162ebaa9ef Mon Sep 17 00:00:00 2001 From: jerasmus Date: Tue, 30 Mar 2021 17:31:32 +0200 Subject: [PATCH 2/2] Address code review comments Addressed maintainer review comments --- spec/frontend/repository/pages/blob_spec.js | 2 +- .../vue_shared/components/blob_viewers/simple_viewer_spec.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js index 7cd108460a44e5..3e7ead4ad00a8a 100644 --- a/spec/frontend/repository/pages/blob_spec.js +++ b/spec/frontend/repository/pages/blob_spec.js @@ -20,6 +20,6 @@ describe('Repository blob page component', () => { it('has a Blob Content Viewer component', () => { expect(findBlobContentViewer().exists()).toBe(true); - expect(findBlobContentViewer().props('path')).toEqual(path); + expect(findBlobContentViewer().props('path')).toBe(path); }); }); 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 a972719cc6bbae..92a326efd832a1 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 @@ -95,8 +95,8 @@ describe('Blob Simple Viewer component', () => { createComponent('raw content', isRawContent); expect(findEditorLite().exists()).toBe(true); - expect(findEditorLite().props('value')).toEqual('raw content'); - expect(findEditorLite().props('fileName')).toEqual('test.js'); + expect(findEditorLite().props('value')).toBe('raw content'); + expect(findEditorLite().props('fileName')).toBe('test.js'); expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true }); }); }); -- GitLab