debian-mirror-gitlab/spec/frontend/snippets/components/snippet_visibility_edit_spec.js

165 lines
5.5 KiB
JavaScript
Raw Normal View History

2020-04-22 19:07:51 +05:30
import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui';
2020-10-24 23:57:45 +05:30
import { mount, shallowMount } from '@vue/test-utils';
import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
2020-11-24 15:15:51 +05:30
import { defaultSnippetVisibilityLevels } from '~/snippets/utils/blob';
2020-04-22 19:07:51 +05:30
import {
SNIPPET_VISIBILITY,
SNIPPET_VISIBILITY_PRIVATE,
SNIPPET_VISIBILITY_INTERNAL,
SNIPPET_VISIBILITY_PUBLIC,
2020-11-24 15:15:51 +05:30
SNIPPET_LEVELS_RESTRICTED,
SNIPPET_LEVELS_DISABLED,
2020-04-22 19:07:51 +05:30
} from '~/snippets/constants';
2020-04-08 14:13:33 +05:30
describe('Snippet Visibility Edit component', () => {
let wrapper;
const defaultHelpLink = '/foo/bar';
2020-04-22 19:07:51 +05:30
const defaultVisibilityLevel = 'private';
2020-11-24 15:15:51 +05:30
const defaultVisibility = defaultSnippetVisibilityLevels([0, 10, 20]);
function createComponent({
propsData = {},
visibilityLevels = defaultVisibility,
multipleLevelsRestricted = false,
deep = false,
} = {}) {
2020-04-08 14:13:33 +05:30
const method = deep ? mount : shallowMount;
2020-11-24 15:15:51 +05:30
const $apollo = {
queries: {
defaultVisibility: {
loading: false,
},
},
};
2020-04-08 14:13:33 +05:30
wrapper = method.call(this, SnippetVisibilityEdit, {
2020-11-24 15:15:51 +05:30
mock: { $apollo },
2020-04-08 14:13:33 +05:30
propsData: {
2020-04-22 19:07:51 +05:30
helpLink: defaultHelpLink,
isProjectSnippet: false,
value: defaultVisibilityLevel,
...propsData,
2020-04-08 14:13:33 +05:30
},
2020-11-24 15:15:51 +05:30
data() {
return {
visibilityLevels,
multipleLevelsRestricted,
};
},
2020-04-08 14:13:33 +05:30
});
}
2020-11-24 15:15:51 +05:30
const findLink = () => wrapper.find('label').find(GlLink);
2020-04-22 19:07:51 +05:30
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(),
};
});
2020-04-08 14:13:33 +05:30
afterEach(() => {
wrapper.destroy();
});
describe('rendering', () => {
it('matches the snapshot', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
2020-11-24 15:15:51 +05:30
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 } });
2020-04-08 14:13:33 +05:30
2020-11-24 15:15:51 +05:30
expect(findLink().exists()).toBe(false);
});
describe('Visibility options', () => {
const findRestrictedInfo = () => wrapper.find('[data-testid="restricted-levels-info"]');
const RESULTING_OPTIONS = {
0: {
2020-04-22 19:07:51 +05:30
value: SNIPPET_VISIBILITY_PRIVATE,
icon: SNIPPET_VISIBILITY.private.icon,
text: SNIPPET_VISIBILITY.private.label,
description: SNIPPET_VISIBILITY.private.description,
},
2020-11-24 15:15:51 +05:30
10: {
2020-04-22 19:07:51 +05:30
value: SNIPPET_VISIBILITY_INTERNAL,
icon: SNIPPET_VISIBILITY.internal.icon,
text: SNIPPET_VISIBILITY.internal.label,
description: SNIPPET_VISIBILITY.internal.description,
},
2020-11-24 15:15:51 +05:30
20: {
2020-04-22 19:07:51 +05:30
value: SNIPPET_VISIBILITY_PUBLIC,
icon: SNIPPET_VISIBILITY.public.icon,
text: SNIPPET_VISIBILITY.public.label,
description: SNIPPET_VISIBILITY.public.description,
},
2020-11-24 15:15:51 +05:30
};
2020-04-08 14:13:33 +05:30
2020-11-24 15:15:51 +05:30
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);
2020-04-08 14:13:33 +05:30
});
2020-04-22 19:07:51 +05:30
2020-11-24 15:15:51 +05:30
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);
},
);
2020-04-08 14:13:33 +05:30
2020-11-24 15:15:51 +05:30
it('when project snippet, renders special private description', () => {
createComponent({ propsData: { isProjectSnippet: true }, deep: true });
2020-04-08 14:13:33 +05:30
2020-11-24 15:15:51 +05:30
expect(findRadiosData()[0]).toEqual({
value: SNIPPET_VISIBILITY_PRIVATE,
icon: SNIPPET_VISIBILITY.private.icon,
text: SNIPPET_VISIBILITY.private.label,
description: SNIPPET_VISIBILITY.private.description_project,
});
});
2020-04-08 14:13:33 +05:30
});
});
describe('functionality', () => {
it('pre-selects correct option in the list', () => {
2020-04-22 19:07:51 +05:30
const value = SNIPPET_VISIBILITY_INTERNAL;
2020-11-24 15:15:51 +05:30
createComponent({ propsData: { value } });
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value);
2020-04-08 14:13:33 +05:30
});
});
});