diff options
Diffstat (limited to 'spec/frontend/snippets/components/snippet_visibility_edit_spec.js')
| -rw-r--r-- | spec/frontend/snippets/components/snippet_visibility_edit_spec.js | 118 |
1 files changed, 85 insertions, 33 deletions
diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js index a8df13787a5..3919e4d7993 100644 --- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js +++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js @@ -1,31 +1,55 @@ import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue'; +import { defaultSnippetVisibilityLevels } from '~/snippets/utils/blob'; import { SNIPPET_VISIBILITY, SNIPPET_VISIBILITY_PRIVATE, SNIPPET_VISIBILITY_INTERNAL, SNIPPET_VISIBILITY_PUBLIC, + SNIPPET_LEVELS_RESTRICTED, + SNIPPET_LEVELS_DISABLED, } from '~/snippets/constants'; describe('Snippet Visibility Edit component', () => { let wrapper; const defaultHelpLink = '/foo/bar'; const defaultVisibilityLevel = 'private'; - - function createComponent(propsData = {}, deep = false) { + const defaultVisibility = defaultSnippetVisibilityLevels([0, 10, 20]); + + function createComponent({ + propsData = {}, + visibilityLevels = defaultVisibility, + multipleLevelsRestricted = false, + deep = false, + } = {}) { const method = deep ? mount : shallowMount; + const $apollo = { + queries: { + defaultVisibility: { + loading: false, + }, + }, + }; + wrapper = method.call(this, SnippetVisibilityEdit, { + mock: { $apollo }, propsData: { helpLink: defaultHelpLink, isProjectSnippet: false, value: defaultVisibilityLevel, ...propsData, }, + data() { + return { + visibilityLevels, + multipleLevelsRestricted, + }; + }, }); } - const findLabel = () => wrapper.find('label'); + const findLink = () => wrapper.find('label').find(GlLink); const findRadios = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio); const findRadiosData = () => findRadios().wrappers.map(x => { @@ -47,56 +71,84 @@ describe('Snippet Visibility Edit component', () => { expect(wrapper.element).toMatchSnapshot(); }); - it('renders visibility options', () => { - createComponent({}, true); + it('renders label help link', () => { + createComponent(); + + expect(findLink().attributes('href')).toBe(defaultHelpLink); + }); + + it('when helpLink is not defined, does not render label help link', () => { + createComponent({ propsData: { helpLink: null } }); - expect(findRadiosData()).toEqual([ - { + expect(findLink().exists()).toBe(false); + }); + + describe('Visibility options', () => { + const findRestrictedInfo = () => wrapper.find('[data-testid="restricted-levels-info"]'); + const RESULTING_OPTIONS = { + 0: { value: SNIPPET_VISIBILITY_PRIVATE, icon: SNIPPET_VISIBILITY.private.icon, text: SNIPPET_VISIBILITY.private.label, description: SNIPPET_VISIBILITY.private.description, }, - { + 10: { value: SNIPPET_VISIBILITY_INTERNAL, icon: SNIPPET_VISIBILITY.internal.icon, text: SNIPPET_VISIBILITY.internal.label, description: SNIPPET_VISIBILITY.internal.description, }, - { + 20: { value: SNIPPET_VISIBILITY_PUBLIC, icon: SNIPPET_VISIBILITY.public.icon, text: SNIPPET_VISIBILITY.public.label, description: SNIPPET_VISIBILITY.public.description, }, - ]); - }); - - it('when project snippet, renders special private description', () => { - createComponent({ isProjectSnippet: true }, true); + }; - 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.each` + levels | resultOptions + ${undefined} | ${[]} + ${''} | ${[]} + ${[]} | ${[]} + ${[0]} | ${[RESULTING_OPTIONS[0]]} + ${[0, 10]} | ${[RESULTING_OPTIONS[0], RESULTING_OPTIONS[10]]} + ${[0, 10, 20]} | ${[RESULTING_OPTIONS[0], RESULTING_OPTIONS[10], RESULTING_OPTIONS[20]]} + ${[0, 20]} | ${[RESULTING_OPTIONS[0], RESULTING_OPTIONS[20]]} + ${[10, 20]} | ${[RESULTING_OPTIONS[10], RESULTING_OPTIONS[20]]} + `('renders correct visibility options for $levels', ({ levels, resultOptions }) => { + createComponent({ visibilityLevels: defaultSnippetVisibilityLevels(levels), deep: true }); + expect(findRadiosData()).toEqual(resultOptions); }); - }); - it('renders label help link', () => { - createComponent(); - - expect( - findLabel() - .find(GlLink) - .attributes('href'), - ).toBe(defaultHelpLink); - }); + it.each` + levels | levelsRestricted | resultText + ${[]} | ${false} | ${SNIPPET_LEVELS_DISABLED} + ${[]} | ${true} | ${SNIPPET_LEVELS_DISABLED} + ${[0]} | ${true} | ${SNIPPET_LEVELS_RESTRICTED} + ${[0]} | ${false} | ${''} + ${[0, 10, 20]} | ${false} | ${''} + `( + 'renders correct information about restricted visibility levels for $levels', + ({ levels, levelsRestricted, resultText }) => { + createComponent({ + visibilityLevels: defaultSnippetVisibilityLevels(levels), + multipleLevelsRestricted: levelsRestricted, + }); + expect(findRestrictedInfo().text()).toBe(resultText); + }, + ); - it('when helpLink is not defined, does not render label help link', () => { - createComponent({ helpLink: null }); + it('when project snippet, renders special private description', () => { + createComponent({ propsData: { isProjectSnippet: true }, deep: true }); - expect(findLabel().contains(GlLink)).toBe(false); + expect(findRadiosData()[0]).toEqual({ + value: SNIPPET_VISIBILITY_PRIVATE, + icon: SNIPPET_VISIBILITY.private.icon, + text: SNIPPET_VISIBILITY.private.label, + description: SNIPPET_VISIBILITY.private.description_project, + }); + }); }); }); @@ -104,7 +156,7 @@ describe('Snippet Visibility Edit component', () => { it('pre-selects correct option in the list', () => { const value = SNIPPET_VISIBILITY_INTERNAL; - createComponent({ value }); + createComponent({ propsData: { value } }); expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value); }); |