diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 18:18:33 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 18:18:33 +0000 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /spec/frontend/access_tokens/components/projects_field_spec.js | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) | |
download | gitlab-ce-f64a639bcfa1fc2bc89ca7db268f594306edfd7c.tar.gz |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'spec/frontend/access_tokens/components/projects_field_spec.js')
-rw-r--r-- | spec/frontend/access_tokens/components/projects_field_spec.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/spec/frontend/access_tokens/components/projects_field_spec.js b/spec/frontend/access_tokens/components/projects_field_spec.js new file mode 100644 index 00000000000..a9e0799d114 --- /dev/null +++ b/spec/frontend/access_tokens/components/projects_field_spec.js @@ -0,0 +1,131 @@ +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(''); + }); + }); + }); + }); +}); |