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

113 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
2020-04-22 19:07:51 +05:30
import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui';
import {
SNIPPET_VISIBILITY,
SNIPPET_VISIBILITY_PRIVATE,
SNIPPET_VISIBILITY_INTERNAL,
SNIPPET_VISIBILITY_PUBLIC,
} from '~/snippets/constants';
2020-04-08 14:13:33 +05:30
import { mount, shallowMount } from '@vue/test-utils';
describe('Snippet Visibility Edit component', () => {
let wrapper;
const defaultHelpLink = '/foo/bar';
2020-04-22 19:07:51 +05:30
const defaultVisibilityLevel = 'private';
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
function createComponent(propsData = {}, deep = false) {
2020-04-08 14:13:33 +05:30
const method = deep ? mount : shallowMount;
wrapper = method.call(this, SnippetVisibilityEdit, {
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-04-22 19:07:51 +05:30
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(),
};
});
2020-04-08 14:13:33 +05:30
afterEach(() => {
wrapper.destroy();
});
describe('rendering', () => {
it('matches the snapshot', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
2020-04-22 19:07:51 +05:30
it('renders visibility options', () => {
createComponent({}, true);
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
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,
},
]);
2020-04-08 14:13:33 +05:30
});
2020-04-22 19:07:51 +05:30
it('when project snippet, renders special private description', () => {
createComponent({ isProjectSnippet: true }, true);
2020-04-08 14:13:33 +05:30
2020-04-22 19:07: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
});
2020-04-22 19:07:51 +05:30
});
it('renders label help link', () => {
createComponent();
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
expect(
findLabel()
.find(GlLink)
.attributes('href'),
).toBe(defaultHelpLink);
});
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
it('when helpLink is not defined, does not render label help link', () => {
createComponent({ helpLink: null });
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
expect(findLabel().contains(GlLink)).toBe(false);
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;
createComponent({ 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
});
});
});