131 lines
3.9 KiB
JavaScript
131 lines
3.9 KiB
JavaScript
import { within, fireEvent } from '@testing-library/dom';
|
|
import { mount } from '@vue/test-utils';
|
|
import ProjectsField from '~/access_tokens/components/projects_field.vue';
|
|
import ProjectsTokenSelector from '~/access_tokens/components/projects_token_selector.vue';
|
|
|
|
describe('ProjectsField', () => {
|
|
let wrapper;
|
|
|
|
const createComponent = ({ inputAttrsValue = '' } = {}) => {
|
|
wrapper = mount(ProjectsField, {
|
|
propsData: {
|
|
inputAttrs: {
|
|
id: 'projects',
|
|
name: 'projects',
|
|
value: inputAttrsValue,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
const queryByLabelText = (text) => within(wrapper.element).queryByLabelText(text);
|
|
const queryByText = (text) => within(wrapper.element).queryByText(text);
|
|
const findAllProjectsRadio = () => queryByLabelText('All projects');
|
|
const findSelectedProjectsRadio = () => queryByLabelText('Selected projects');
|
|
const findProjectsTokenSelector = () => wrapper.findComponent(ProjectsTokenSelector);
|
|
const findHiddenInput = () => wrapper.find('input[type="hidden"]');
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
it('renders label and sub-label', () => {
|
|
createComponent();
|
|
|
|
expect(queryByText('Projects')).not.toBe(null);
|
|
expect(queryByText('Set access permissions for this token.')).not.toBe(null);
|
|
});
|
|
|
|
describe('when `inputAttrs.value` is empty', () => {
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
it('renders "All projects" radio as checked', () => {
|
|
expect(findAllProjectsRadio().checked).toBe(true);
|
|
});
|
|
|
|
it('renders "Selected projects" radio as unchecked', () => {
|
|
expect(findSelectedProjectsRadio().checked).toBe(false);
|
|
});
|
|
|
|
it('sets `projects-token-selector` `initialProjectIds` prop to an empty array', () => {
|
|
expect(findProjectsTokenSelector().props('initialProjectIds')).toEqual([]);
|
|
});
|
|
});
|
|
|
|
describe('when `inputAttrs.value` is a comma separated list of project IDs', () => {
|
|
beforeEach(() => {
|
|
createComponent({ inputAttrsValue: '1,2' });
|
|
});
|
|
|
|
it('renders "All projects" radio as unchecked', () => {
|
|
expect(findAllProjectsRadio().checked).toBe(false);
|
|
});
|
|
|
|
it('renders "Selected projects" radio as checked', () => {
|
|
expect(findSelectedProjectsRadio().checked).toBe(true);
|
|
});
|
|
|
|
it('sets `projects-token-selector` `initialProjectIds` prop to an array of project IDs', () => {
|
|
expect(findProjectsTokenSelector().props('initialProjectIds')).toEqual(['1', '2']);
|
|
});
|
|
});
|
|
|
|
it('renders `projects-token-selector` component', () => {
|
|
createComponent();
|
|
|
|
expect(findProjectsTokenSelector().exists()).toBe(true);
|
|
});
|
|
|
|
it('renders hidden input with correct `name` and `id` attributes', () => {
|
|
createComponent();
|
|
|
|
expect(findHiddenInput().attributes()).toEqual(
|
|
expect.objectContaining({
|
|
id: 'projects',
|
|
name: 'projects',
|
|
}),
|
|
);
|
|
});
|
|
|
|
describe('when `projects-token-selector` is focused', () => {
|
|
beforeEach(() => {
|
|
createComponent();
|
|
|
|
findProjectsTokenSelector().vm.$emit('focus');
|
|
});
|
|
|
|
it('auto selects the "Selected projects" radio', () => {
|
|
expect(findSelectedProjectsRadio().checked).toBe(true);
|
|
});
|
|
|
|
describe('when `projects-token-selector` is changed', () => {
|
|
beforeEach(() => {
|
|
findProjectsTokenSelector().vm.$emit('input', [
|
|
{
|
|
id: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
},
|
|
]);
|
|
});
|
|
|
|
it('updates the hidden input value to a comma separated list of project IDs', () => {
|
|
expect(findHiddenInput().attributes('value')).toBe('1,2');
|
|
});
|
|
|
|
describe('when radio is changed back to "All projects"', () => {
|
|
beforeEach(() => {
|
|
fireEvent.click(findAllProjectsRadio());
|
|
});
|
|
|
|
it('removes the hidden input value', () => {
|
|
expect(findHiddenInput().attributes('value')).toBe('');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|