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('');
+        });
+      });
+    });
+  });
+});