Add latest changes from gitlab-org/gitlab@master

2 files changed, 120 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..7e9f06b9022
--- /dev/null
+++ b/spec/frontend/access_tokens/components/projects_field_spec.js
@@ -0,0 +1,58 @@
+import { within } from '@testing-library/dom';
+import { mount } from '@vue/test-utils';
+import ProjectsField from '~/access_tokens/components/projects_field.vue';
+
+describe('ProjectsField', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mount(ProjectsField, {
+      propsData: {
+        inputAttrs: {
+          id: 'projects',
+          name: 'projects',
+        },
+      },
+    });
+  };
+
+  const queryByLabelText = (text) => within(wrapper.element).queryByLabelText(text);
+  const queryByText = (text) => within(wrapper.element).queryByText(text);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders label and sub-label', () => {
+    expect(queryByText('Projects')).not.toBe(null);
+    expect(queryByText('Set access permissions for this token.')).not.toBe(null);
+  });
+
+  it('renders "All projects" radio selected by default', () => {
+    const allProjectsRadio = queryByLabelText('All projects');
+
+    expect(allProjectsRadio).not.toBe(null);
+    expect(allProjectsRadio.checked).toBe(true);
+  });
+
+  it('renders "Selected projects" radio unchecked by default', () => {
+    const selectedProjectsRadio = queryByLabelText('Selected projects');
+
+    expect(selectedProjectsRadio).not.toBe(null);
+    expect(selectedProjectsRadio.checked).toBe(false);
+  });
+
+  it('renders hidden input with correct `name` and `id` attributes', () => {
+    expect(wrapper.find('input[type="hidden"]').attributes()).toEqual(
+      expect.objectContaining({
+        id: 'projects',
+        name: 'projects',
+      }),
+    );
+  });
+});
diff --git a/spec/frontend/access_tokens/index_spec.js b/spec/frontend/access_tokens/index_spec.js
new file mode 100644
index 00000000000..2225e23e09c
--- /dev/null
+++ b/spec/frontend/access_tokens/index_spec.js
@@ -0,0 +1,62 @@
+import { createWrapper } from '@vue/test-utils';
+
+import waitForPromises from 'helpers/wait_for_promises';
+
+import { initExpiresAtField, initProjectsField } from '~/access_tokens';
+import ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
+import ProjectsField from '~/access_tokens/components/projects_field.vue';
+
+describe('access tokens', () => {
+  beforeEach(() => {
+    window.gon = { features: { personalAccessTokensScopedToProjects: true } };
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    window.gon = {};
+  });
+
+  describe.each`
+    initFunction          | mountSelector                    | expectedComponent
+    ${initExpiresAtField} | ${'js-access-tokens-expires-at'} | ${ExpiresAtField}
+    ${initProjectsField}  | ${'js-access-tokens-projects'}   | ${ProjectsField}
+  `('$initFunction', ({ initFunction, mountSelector, expectedComponent }) => {
+    describe('when mount element exists', () => {
+      beforeEach(() => {
+        const mountEl = document.createElement('div');
+        mountEl.classList.add(mountSelector);
+
+        const input = document.createElement('input');
+        input.setAttribute('name', 'foo-bar');
+        input.setAttribute('id', 'foo-bar');
+        input.setAttribute('placeholder', 'Foo bar');
+
+        mountEl.appendChild(input);
+
+        document.body.appendChild(mountEl);
+      });
+
+      it(`mounts component and sets \`inputAttrs\` prop`, async () => {
+        const wrapper = createWrapper(initFunction());
+
+        // Wait for dynamic imports to resolve
+        await waitForPromises();
+
+        const component = wrapper.findComponent(expectedComponent);
+
+        expect(component.exists()).toBe(true);
+        expect(component.props('inputAttrs')).toEqual({
+          name: 'foo-bar',
+          id: 'foo-bar',
+          placeholder: 'Foo bar',
+        });
+      });
+    });
+
+    describe('when mount element does not exist', () => {
+      it('returns `null`', () => {
+        expect(initFunction()).toBe(null);
+      });
+    });
+  });
+});