diff options
Diffstat (limited to 'spec/frontend/blob')
16 files changed, 132 insertions, 79 deletions
diff --git a/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap index 0409b118222..72761c18b3d 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap @@ -4,11 +4,15 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = ` <div class="file-content code" > - <pre + <div data-editor-loading="" id="editor" > - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </pre> + <pre + class="editor-loading-content" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </pre> + </div> </div> `; diff --git a/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap index 1e639f91797..a5690844053 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap @@ -4,13 +4,18 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = ` <div class="js-file-title file-title-flex-parent" > - <gl-form-input-stub - class="form-control js-snippet-file-name" - id="snippet_file_name" - name="snippet_file_name" - placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby" - type="text" - value="foo.md" - /> + <div + class="gl-display-flex gl-align-items-center gl-w-full" + > + <gl-form-input-stub + class="form-control js-snippet-file-name" + name="snippet_file_name" + placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby" + type="text" + value="foo.md" + /> + + <!----> + </div> </div> `; diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap index 7d868625956..b54efb93bc9 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap @@ -9,7 +9,7 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = ` /> <div - class="file-actions d-none d-sm-flex" + class="gl-display-none gl-display-sm-flex" > <viewer-switcher-stub value="simple" diff --git a/spec/frontend/blob/components/blob_content_error_spec.js b/spec/frontend/blob/components/blob_content_error_spec.js index 508b1ed7e68..0c6d269ad05 100644 --- a/spec/frontend/blob/components/blob_content_error_spec.js +++ b/spec/frontend/blob/components/blob_content_error_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; -import BlobContentError from '~/blob/components/blob_content_error.vue'; import { GlSprintf } from '@gitlab/ui'; +import BlobContentError from '~/blob/components/blob_content_error.vue'; import { BLOB_RENDER_ERRORS } from '~/blob/components/constants'; diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js index 244ed41869d..9232a709194 100644 --- a/spec/frontend/blob/components/blob_content_spec.js +++ b/spec/frontend/blob/components/blob_content_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; import BlobContent from '~/blob/components/blob_content.vue'; import BlobContentError from '~/blob/components/blob_content_error.vue'; import { @@ -13,7 +14,6 @@ import { RichBlobContentMock, SimpleBlobContentMock, } from './mock_data'; -import { GlLoadingIcon } from '@gitlab/ui'; import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers'; describe('Blob Content component', () => { diff --git a/spec/frontend/blob/components/blob_edit_content_spec.js b/spec/frontend/blob/components/blob_edit_content_spec.js index 971ef72521d..3cc210e972c 100644 --- a/spec/frontend/blob/components/blob_edit_content_spec.js +++ b/spec/frontend/blob/components/blob_edit_content_spec.js @@ -1,28 +1,31 @@ import { shallowMount } from '@vue/test-utils'; -import BlobEditContent from '~/blob/components/blob_edit_content.vue'; -import { initEditorLite } from '~/blob/utils'; import { nextTick } from 'vue'; +import BlobEditContent from '~/blob/components/blob_edit_content.vue'; +import * as utils from '~/blob/utils'; +import Editor from '~/editor/editor_lite'; -jest.mock('~/blob/utils', () => ({ - initEditorLite: jest.fn(), -})); +jest.mock('~/editor/editor_lite'); describe('Blob Header Editing', () => { let wrapper; const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; const fileName = 'lorem.txt'; + const fileGlobalId = 'snippet_777'; function createComponent(props = {}) { wrapper = shallowMount(BlobEditContent, { propsData: { value, fileName, + fileGlobalId, ...props, }, }); } beforeEach(() => { + jest.spyOn(utils, 'initEditorLite'); + createComponent(); }); @@ -30,6 +33,15 @@ describe('Blob Header Editing', () => { wrapper.destroy(); }); + const triggerChangeContent = val => { + jest.spyOn(Editor.prototype, 'getValue').mockReturnValue(val); + const [cb] = Editor.prototype.onChangeContent.mock.calls[0]; + + cb(); + + jest.runOnlyPendingTimers(); + }; + describe('rendering', () => { it('matches the snapshot', () => { expect(wrapper.element).toMatchSnapshot(); @@ -51,18 +63,15 @@ describe('Blob Header Editing', () => { it('initialises Editor Lite', () => { const el = wrapper.find({ ref: 'editor' }).element; - expect(initEditorLite).toHaveBeenCalledWith({ + expect(utils.initEditorLite).toHaveBeenCalledWith({ el, blobPath: fileName, + blobGlobalId: fileGlobalId, blobContent: value, }); }); it('reacts to the changes in fileName', () => { - wrapper.vm.editor = { - updateModelLanguage: jest.fn(), - }; - const newFileName = 'ipsum.txt'; wrapper.setProps({ @@ -70,21 +79,20 @@ describe('Blob Header Editing', () => { }); return nextTick().then(() => { - expect(wrapper.vm.editor.updateModelLanguage).toHaveBeenCalledWith(newFileName); + expect(Editor.prototype.updateModelLanguage).toHaveBeenCalledWith(newFileName); }); }); + it('registers callback with editor onChangeContent', () => { + expect(Editor.prototype.onChangeContent).toHaveBeenCalledWith(expect.any(Function)); + }); + it('emits input event when the blob content is changed', () => { - const editorEl = wrapper.find({ ref: 'editor' }); - wrapper.vm.editor = { - getValue: jest.fn().mockReturnValue(value), - }; + expect(wrapper.emitted().input).toBeUndefined(); - editorEl.trigger('keyup'); + triggerChangeContent(value); - return nextTick().then(() => { - expect(wrapper.emitted().input[0]).toEqual([value]); - }); + expect(wrapper.emitted().input).toEqual([[value]]); }); }); }); diff --git a/spec/frontend/blob/components/blob_edit_header_spec.js b/spec/frontend/blob/components/blob_edit_header_spec.js index db7d7d7d48d..c71595a79cf 100644 --- a/spec/frontend/blob/components/blob_edit_header_spec.js +++ b/spec/frontend/blob/components/blob_edit_header_spec.js @@ -1,18 +1,21 @@ import { shallowMount } from '@vue/test-utils'; +import { GlFormInput, GlButton } from '@gitlab/ui'; import BlobEditHeader from '~/blob/components/blob_edit_header.vue'; -import { GlFormInput } from '@gitlab/ui'; describe('Blob Header Editing', () => { let wrapper; const value = 'foo.md'; - function createComponent() { + const createComponent = (props = {}) => { wrapper = shallowMount(BlobEditHeader, { propsData: { value, + ...props, }, }); - } + }; + const findDeleteButton = () => + wrapper.findAll(GlButton).wrappers.find(x => x.text() === 'Delete file'); beforeEach(() => { createComponent(); @@ -30,6 +33,10 @@ describe('Blob Header Editing', () => { it('contains a form input field', () => { expect(wrapper.contains(GlFormInput)).toBe(true); }); + + it('does not show delete button', () => { + expect(findDeleteButton()).toBeUndefined(); + }); }); describe('functionality', () => { @@ -47,4 +54,35 @@ describe('Blob Header Editing', () => { }); }); }); + + describe.each` + props | expectedDisabled + ${{ showDelete: true }} | ${false} + ${{ showDelete: true, canDelete: false }} | ${true} + `('with $props', ({ props, expectedDisabled }) => { + beforeEach(() => { + createComponent(props); + }); + + it(`shows delete button (disabled=${expectedDisabled})`, () => { + const deleteButton = findDeleteButton(); + + expect(deleteButton.exists()).toBe(true); + expect(deleteButton.props('disabled')).toBe(expectedDisabled); + }); + }); + + describe('with delete button', () => { + beforeEach(() => { + createComponent({ showDelete: true, canDelete: true }); + }); + + it('emits delete when clicked', () => { + expect(wrapper.emitted().delete).toBeUndefined(); + + findDeleteButton().vm.$emit('click'); + + expect(wrapper.emitted().delete).toEqual([[]]); + }); + }); }); diff --git a/spec/frontend/blob/components/blob_embeddable_spec.js b/spec/frontend/blob/components/blob_embeddable_spec.js index b2fe71f1401..1f6790013ca 100644 --- a/spec/frontend/blob/components/blob_embeddable_spec.js +++ b/spec/frontend/blob/components/blob_embeddable_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; -import BlobEmbeddable from '~/blob/components/blob_embeddable.vue'; import { GlFormInputGroup } from '@gitlab/ui'; +import BlobEmbeddable from '~/blob/components/blob_embeddable.vue'; describe('Blob Embeddable', () => { let wrapper; 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 529e7cc85f5..590e36b16af 100644 --- a/spec/frontend/blob/components/blob_header_default_actions_spec.js +++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { GlButtonGroup, GlButton } from '@gitlab/ui'; import BlobHeaderActions from '~/blob/components/blob_header_default_actions.vue'; import { BTN_COPY_CONTENTS_TITLE, @@ -6,7 +7,6 @@ import { BTN_RAW_TITLE, RICH_BLOB_VIEWER, } from '~/blob/components/constants'; -import { GlButtonGroup, GlDeprecatedButton } from '@gitlab/ui'; import { Blob } from './mock_data'; describe('Blob Header Default Actions', () => { @@ -26,7 +26,7 @@ describe('Blob Header Default Actions', () => { beforeEach(() => { createComponent(); btnGroup = wrapper.find(GlButtonGroup); - buttons = wrapper.findAll(GlDeprecatedButton); + buttons = wrapper.findAll(GlButton); }); afterEach(() => { @@ -61,7 +61,7 @@ describe('Blob Header Default Actions', () => { createComponent({ activeViewer: RICH_BLOB_VIEWER, }); - buttons = wrapper.findAll(GlDeprecatedButton); + buttons = wrapper.findAll(GlButton); expect(buttons.at(0).attributes('disabled')).toBeTruthy(); }); diff --git a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js index f1a7ac8b21a..cf1101bc22c 100644 --- a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js +++ b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { GlButtonGroup, GlButton } from '@gitlab/ui'; import BlobHeaderViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue'; import { RICH_BLOB_VIEWER, @@ -6,7 +7,6 @@ import { SIMPLE_BLOB_VIEWER, SIMPLE_BLOB_VIEWER_TITLE, } from '~/blob/components/constants'; -import { GlButtonGroup, GlButton } from '@gitlab/ui'; describe('Blob Header Viewer Switcher', () => { let wrapper; diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js index 58aa1dc6dc9..8cfcec2693c 100644 --- a/spec/frontend/blob/components/mock_data.js +++ b/spec/frontend/blob/components/mock_data.js @@ -47,10 +47,12 @@ export const BinaryBlob = { }; export const RichBlobContentMock = { + path: 'foo.md', richData: '<h1>Rich</h1>', }; export const SimpleBlobContentMock = { + path: 'foo.js', plainData: 'Plain', }; diff --git a/spec/frontend/blob/notebook/notebook_viever_spec.js b/spec/frontend/blob/notebook/notebook_viever_spec.js index 535d2bd544a..f6a926a5ecb 100644 --- a/spec/frontend/blob/notebook/notebook_viever_spec.js +++ b/spec/frontend/blob/notebook/notebook_viever_spec.js @@ -1,10 +1,10 @@ import { shallowMount } from '@vue/test-utils'; import { GlLoadingIcon } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; +import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; import component from '~/blob/notebook/notebook_viewer.vue'; import NotebookLab from '~/notebook/index.vue'; -import waitForPromises from 'helpers/wait_for_promises'; describe('iPython notebook renderer', () => { let wrapper; diff --git a/spec/frontend/blob/pipeline_tour_success_modal_spec.js b/spec/frontend/blob/pipeline_tour_success_modal_spec.js index 6d4e5e46cb8..9998cd7f91c 100644 --- a/spec/frontend/blob/pipeline_tour_success_modal_spec.js +++ b/spec/frontend/blob/pipeline_tour_success_modal_spec.js @@ -1,8 +1,8 @@ -import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue'; import { shallowMount } from '@vue/test-utils'; import Cookies from 'js-cookie'; -import { GlSprintf, GlModal } from '@gitlab/ui'; +import { GlSprintf, GlModal, GlLink } from '@gitlab/ui'; import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper'; +import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue'; import modalProps from './pipeline_tour_success_mock_data'; describe('PipelineTourSuccessModal', () => { @@ -18,6 +18,7 @@ describe('PipelineTourSuccessModal', () => { propsData: modalProps, stubs: { GlModal, + GlSprintf, }, }); @@ -37,6 +38,10 @@ describe('PipelineTourSuccessModal', () => { expect(sprintf.exists()).toBe(true); }); + it('renders the link for codeQualityLink', () => { + expect(wrapper.find(GlLink).attributes('href')).toBe(wrapper.vm.$options.codeQualityLink); + }); + it('calls to remove cookie', () => { wrapper.vm.disableModalFromRenderingAgain(); diff --git a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js index 3c03e6f04ab..4714d34dbec 100644 --- a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js +++ b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js @@ -1,8 +1,8 @@ import { shallowMount } from '@vue/test-utils'; -import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue'; import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper'; +import { GlButton } from '@gitlab/ui'; +import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue'; import * as utils from '~/lib/utils/common_utils'; -import { GlDeprecatedButton } from '@gitlab/ui'; jest.mock('~/lib/utils/common_utils', () => ({ ...jest.requireActual('~/lib/utils/common_utils'), @@ -96,7 +96,7 @@ describe('Suggest gitlab-ci.yml Popover', () => { const expectedAction = 'click_button'; const expectedProperty = 'owner'; const expectedValue = '10'; - const dismissButton = wrapper.find(GlDeprecatedButton); + const dismissButton = wrapper.find(GlButton); trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); triggerEvent(dismissButton.element); diff --git a/spec/frontend/blob/utils_spec.js b/spec/frontend/blob/utils_spec.js index 119ed2dfe7a..ab9e325e963 100644 --- a/spec/frontend/blob/utils_spec.js +++ b/spec/frontend/blob/utils_spec.js @@ -1,53 +1,44 @@ import Editor from '~/editor/editor_lite'; import * as utils from '~/blob/utils'; -const mockCreateMonacoInstance = jest.fn(); -jest.mock('~/editor/editor_lite', () => { - return jest.fn().mockImplementation(() => { - return { createInstance: mockCreateMonacoInstance }; - }); -}); +jest.mock('~/editor/editor_lite'); describe('Blob utilities', () => { - beforeEach(() => { - Editor.mockClear(); - }); - describe('initEditorLite', () => { let editorEl; const blobPath = 'foo.txt'; const blobContent = 'Foo bar'; + const blobGlobalId = 'snippet_777'; beforeEach(() => { - setFixtures('<div id="editor"></div>'); - editorEl = document.getElementById('editor'); + editorEl = document.createElement('div'); }); describe('Monaco editor', () => { it('initializes the Editor Lite', () => { utils.initEditorLite({ el: editorEl }); - expect(Editor).toHaveBeenCalled(); + expect(Editor).toHaveBeenCalledWith({ + scrollbar: { + alwaysConsumeMouseWheel: false, + }, + }); }); - it('creates the instance with the passed parameters', () => { - utils.initEditorLite({ el: editorEl }); - expect(mockCreateMonacoInstance.mock.calls[0]).toEqual([ - { + it.each([[{}], [{ blobPath, blobContent, blobGlobalId }]])( + 'creates the instance with the passed parameters %s', + extraParams => { + const params = { el: editorEl, - blobPath: undefined, - blobContent: undefined, - }, - ]); + ...extraParams, + }; - utils.initEditorLite({ el: editorEl, blobPath, blobContent }); - expect(mockCreateMonacoInstance.mock.calls[1]).toEqual([ - { - el: editorEl, - blobPath, - blobContent, - }, - ]); - }); + expect(Editor.prototype.createInstance).not.toHaveBeenCalled(); + + utils.initEditorLite(params); + + expect(Editor.prototype.createInstance).toHaveBeenCalledWith(params); + }, + ); }); }); }); diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js index 7239f59c6fa..97ac42a10bf 100644 --- a/spec/frontend/blob/viewer/index_spec.js +++ b/spec/frontend/blob/viewer/index_spec.js @@ -24,11 +24,11 @@ describe('Blob viewer', () => { blob = new BlobViewer(); - mock.onGet('http://test.host/snippets/1.json?viewer=rich').reply(200, { + mock.onGet('http://test.host/-/snippets/1.json?viewer=rich').reply(200, { html: '<div>testing</div>', }); - mock.onGet('http://test.host/snippets/1.json?viewer=simple').reply(200, { + mock.onGet('http://test.host/-/snippets/1.json?viewer=simple').reply(200, { html: '<div>testing</div>', }); |