From b11f7057d067885619ee3e513751f180b2e8ad85 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Wed, 1 Apr 2020 09:07:45 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../snippet_visibility_edit_spec.js.snap | 14 +-- .../snippets/components/snippet_blob_edit_spec.js | 23 +++- .../components/snippet_description_edit_spec.js | 15 ++- .../components/snippet_visibility_edit_spec.js | 124 ++++++++++++--------- 4 files changed, 110 insertions(+), 66 deletions(-) (limited to 'spec/frontend/snippets') diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap index 4f1d46dffef..be75a5bfbdc 100644 --- a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap +++ b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap @@ -23,7 +23,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] = id="visibility-level-setting" >
Private @@ -52,7 +52,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
Internal @@ -71,7 +71,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
Public diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js index 42b49c50c75..334fe7196a4 100644 --- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js +++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js @@ -2,18 +2,21 @@ import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue'; import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue'; import BlobContentEdit from '~/blob/components/blob_edit_content.vue'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; jest.mock('~/blob/utils', () => jest.fn()); describe('Snippet Blob Edit component', () => { let wrapper; - const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; + const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; const fileName = 'lorem.txt'; + const findHeader = () => wrapper.find(BlobHeaderEdit); + const findContent = () => wrapper.find(BlobContentEdit); function createComponent() { wrapper = shallowMount(SnippetBlobEdit, { propsData: { - content, + value, fileName, }, }); @@ -33,8 +36,20 @@ describe('Snippet Blob Edit component', () => { }); it('renders required components', () => { - expect(wrapper.contains(BlobHeaderEdit)).toBe(true); - expect(wrapper.contains(BlobContentEdit)).toBe(true); + expect(findHeader().exists()).toBe(true); + expect(findContent().exists()).toBe(true); + }); + }); + + describe('functionality', () => { + it('emits "name-change" event when the file name gets changed', () => { + expect(wrapper.emitted('name-change')).toBeUndefined(); + const newFilename = 'foo.bar'; + findHeader().vm.$emit('input', newFilename); + + return nextTick().then(() => { + expect(wrapper.emitted('name-change')[0]).toEqual([newFilename]); + }); }); }); }); diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js index 167489dc004..c5e667747c6 100644 --- a/spec/frontend/snippets/components/snippet_description_edit_spec.js +++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js @@ -6,11 +6,12 @@ describe('Snippet Description Edit component', () => { const defaultDescription = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; const markdownPreviewPath = 'foo/'; const markdownDocsPath = 'help/'; + const findTextarea = () => wrapper.find('textarea'); - function createComponent(description = defaultDescription) { + function createComponent(value = defaultDescription) { wrapper = shallowMount(SnippetDescriptionEdit, { propsData: { - description, + value, markdownPreviewPath, markdownDocsPath, }, @@ -49,4 +50,14 @@ describe('Snippet Description Edit component', () => { expect(isHidden('.js-expanded')).toBe(true); }); }); + + describe('functionality', () => { + it('emits "input" event when description is changed', () => { + expect(wrapper.emitted('input')).toBeUndefined(); + const newDescription = 'dummy'; + findTextarea().setValue(newDescription); + + expect(wrapper.emitted('input')[0]).toEqual([newDescription]); + }); + }); }); diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js index 5104d742bb3..0bdef71bc08 100644 --- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js +++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js @@ -1,37 +1,42 @@ import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue'; -import { GlFormRadio } from '@gitlab/ui'; -import { SNIPPET_VISIBILITY } from '~/snippets/constants'; +import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui'; +import { + SNIPPET_VISIBILITY, + SNIPPET_VISIBILITY_PRIVATE, + SNIPPET_VISIBILITY_INTERNAL, + SNIPPET_VISIBILITY_PUBLIC, +} from '~/snippets/constants'; import { mount, shallowMount } from '@vue/test-utils'; describe('Snippet Visibility Edit component', () => { let wrapper; - let radios; const defaultHelpLink = '/foo/bar'; - const defaultVisibilityLevel = '0'; + const defaultVisibilityLevel = 'private'; - function findElements(sel) { - return wrapper.findAll(sel); - } - - function createComponent( - { - helpLink = defaultHelpLink, - isProjectSnippet = false, - visibilityLevel = defaultVisibilityLevel, - } = {}, - deep = false, - ) { + function createComponent(propsData = {}, deep = false) { const method = deep ? mount : shallowMount; wrapper = method.call(this, SnippetVisibilityEdit, { propsData: { - helpLink, - isProjectSnippet, - visibilityLevel, + helpLink: defaultHelpLink, + isProjectSnippet: false, + value: defaultVisibilityLevel, + ...propsData, }, }); - radios = findElements(GlFormRadio); } + const findLabel = () => wrapper.find('label'); + const findRadios = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio); + const findRadiosData = () => + findRadios().wrappers.map(x => { + return { + value: x.find('input').attributes('value'), + icon: x.find(GlIcon).props('name'), + description: x.find('.help-text').text(), + text: x.find('.js-visibility-option').text(), + }; + }); + afterEach(() => { wrapper.destroy(); }); @@ -42,53 +47,66 @@ describe('Snippet Visibility Edit component', () => { expect(wrapper.element).toMatchSnapshot(); }); - it.each` - label | value - ${SNIPPET_VISIBILITY.private.label} | ${`0`} - ${SNIPPET_VISIBILITY.internal.label} | ${`1`} - ${SNIPPET_VISIBILITY.public.label} | ${`2`} - `('should render correct $label label', ({ label, value }) => { - createComponent(); - const radio = radios.at(parseInt(value, 10)); + it('renders visibility options', () => { + createComponent({}, true); - expect(radio.attributes('value')).toBe(value); - expect(radio.text()).toContain(label); + expect(findRadiosData()).toEqual([ + { + value: SNIPPET_VISIBILITY_PRIVATE, + icon: SNIPPET_VISIBILITY.private.icon, + text: SNIPPET_VISIBILITY.private.label, + description: SNIPPET_VISIBILITY.private.description, + }, + { + value: SNIPPET_VISIBILITY_INTERNAL, + icon: SNIPPET_VISIBILITY.internal.icon, + text: SNIPPET_VISIBILITY.internal.label, + description: SNIPPET_VISIBILITY.internal.description, + }, + { + value: SNIPPET_VISIBILITY_PUBLIC, + icon: SNIPPET_VISIBILITY.public.icon, + text: SNIPPET_VISIBILITY.public.label, + description: SNIPPET_VISIBILITY.public.description, + }, + ]); }); - describe('rendered help-text', () => { - it.each` - description | value | label - ${SNIPPET_VISIBILITY.private.description} | ${`0`} | ${SNIPPET_VISIBILITY.private.label} - ${SNIPPET_VISIBILITY.internal.description} | ${`1`} | ${SNIPPET_VISIBILITY.internal.label} - ${SNIPPET_VISIBILITY.public.description} | ${`2`} | ${SNIPPET_VISIBILITY.public.label} - `('should render correct $label description', ({ description, value }) => { - createComponent({}, true); - - const help = findElements('.help-text').at(parseInt(value, 10)); + it('when project snippet, renders special private description', () => { + createComponent({ isProjectSnippet: true }, true); - expect(help.text()).toBe(description); + expect(findRadiosData()[0]).toEqual({ + value: SNIPPET_VISIBILITY_PRIVATE, + icon: SNIPPET_VISIBILITY.private.icon, + text: SNIPPET_VISIBILITY.private.label, + description: SNIPPET_VISIBILITY.private.description_project, }); + }); + + it('renders label help link', () => { + createComponent(); - it('renders correct Private description for a project snippet', () => { - createComponent({ isProjectSnippet: true }, true); + expect( + findLabel() + .find(GlLink) + .attributes('href'), + ).toBe(defaultHelpLink); + }); - const helpText = findElements('.help-text') - .at(0) - .text(); + it('when helpLink is not defined, does not render label help link', () => { + createComponent({ helpLink: null }); - expect(helpText).not.toContain(SNIPPET_VISIBILITY.private.description); - expect(helpText).toBe(SNIPPET_VISIBILITY.private.description_project); - }); + expect(findLabel().contains(GlLink)).toBe(false); }); }); describe('functionality', () => { it('pre-selects correct option in the list', () => { - const pos = 1; + const value = SNIPPET_VISIBILITY_INTERNAL; + + createComponent({ value }); - createComponent({ visibilityLevel: `${pos}` }, true); - const radio = radios.at(pos); - expect(radio.find('input[type="radio"]').element.checked).toBe(true); + expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value); }); }); }); -- cgit v1.2.3