1 files changed, 74 insertions, 0 deletions
diff --git a/spec/frontend/access_tokens/index_spec.js b/spec/frontend/access_tokens/index_spec.js
new file mode 100644
index 00000000000..e3f17e21739
--- /dev/null
+++ b/spec/frontend/access_tokens/index_spec.js
@@ -0,0 +1,74 @@
+import { createWrapper } from '@vue/test-utils';
+import Vue from 'vue';
+
+import { initExpiresAtField, initProjectsField } from '~/access_tokens';
+import * as ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
+import * as ProjectsField from '~/access_tokens/components/projects_field.vue';
+
+describe('access tokens', () => {
+  const FakeComponent = Vue.component('FakeComponent', {
+    props: {
+      inputAttrs: {
+        type: Object,
+        required: true,
+      },
+    },
+    render: () => null,
+  });
+
+  beforeEach(() => {
+    window.gon = { features: { personalAccessTokensScopedToProjects: true } };
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  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');
+        input.setAttribute('value', '1,2');
+
+        mountEl.appendChild(input);
+
+        document.body.appendChild(mountEl);
+
+        // Mock component so we don't have to deal with mocking Apollo
+        // eslint-disable-next-line no-param-reassign
+        expectedComponent.default = FakeComponent;
+      });
+
+      it('mounts component and sets `inputAttrs` prop', async () => {
+        const vueInstance = await initFunction();
+
+        const wrapper = createWrapper(vueInstance);
+        const component = wrapper.findComponent(FakeComponent);
+
+        expect(component.exists()).toBe(true);
+        expect(component.props('inputAttrs')).toEqual({
+          name: 'foo-bar',
+          id: 'foo-bar',
+          value: '1,2',
+          placeholder: 'Foo bar',
+        });
+      });
+    });
+
+    describe('when mount element does not exist', () => {
+      it('returns `null`', () => {
+        expect(initFunction()).toBe(null);
+      });
+    });
+  });
+});