95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
|
import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
|
||
|
|
import { GlFormRadio } from '@gitlab/ui';
|
||
|
|
import { SNIPPET_VISIBILITY } 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';
|
||
|
|
|
||
|
|
function findElements(sel) {
|
||
|
|
return wrapper.findAll(sel);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createComponent(
|
||
|
|
{
|
||
|
|
helpLink = defaultHelpLink,
|
||
|
|
isProjectSnippet = false,
|
||
|
|
visibilityLevel = defaultVisibilityLevel,
|
||
|
|
} = {},
|
||
|
|
deep = false,
|
||
|
|
) {
|
||
|
|
const method = deep ? mount : shallowMount;
|
||
|
|
wrapper = method.call(this, SnippetVisibilityEdit, {
|
||
|
|
propsData: {
|
||
|
|
helpLink,
|
||
|
|
isProjectSnippet,
|
||
|
|
visibilityLevel,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
radios = findElements(GlFormRadio);
|
||
|
|
}
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
wrapper.destroy();
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('rendering', () => {
|
||
|
|
it('matches the snapshot', () => {
|
||
|
|
createComponent();
|
||
|
|
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));
|
||
|
|
|
||
|
|
expect(radio.attributes('value')).toBe(value);
|
||
|
|
expect(radio.text()).toContain(label);
|
||
|
|
});
|
||
|
|
|
||
|
|
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));
|
||
|
|
|
||
|
|
expect(help.text()).toBe(description);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders correct Private description for a project snippet', () => {
|
||
|
|
createComponent({ isProjectSnippet: true }, true);
|
||
|
|
|
||
|
|
const helpText = findElements('.help-text')
|
||
|
|
.at(0)
|
||
|
|
.text();
|
||
|
|
|
||
|
|
expect(helpText).not.toContain(SNIPPET_VISIBILITY.private.description);
|
||
|
|
expect(helpText).toBe(SNIPPET_VISIBILITY.private.description_project);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('functionality', () => {
|
||
|
|
it('pre-selects correct option in the list', () => {
|
||
|
|
const pos = 1;
|
||
|
|
|
||
|
|
createComponent({ visibilityLevel: `${pos}` }, true);
|
||
|
|
const radio = radios.at(pos);
|
||
|
|
expect(radio.find('input[type="radio"]').element.checked).toBe(true);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|