1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
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 | fieldName | expectedComponent
${initExpiresAtField} | ${'js-access-tokens-expires-at'} | ${'expiresAt'} | ${ExpiresAtField}
${initProjectsField} | ${'js-access-tokens-projects'} | ${'projects'} | ${ProjectsField}
`('$initFunction', ({ initFunction, mountSelector, fieldName, expectedComponent }) => {
describe('when mount element exists', () => {
const nameAttribute = `access_tokens[${fieldName}]`;
const idAttribute = `access_tokens_${fieldName}`;
beforeEach(() => {
const mountEl = document.createElement('div');
mountEl.classList.add(mountSelector);
const input = document.createElement('input');
input.setAttribute('name', nameAttribute);
input.setAttribute('data-js-name', fieldName);
input.setAttribute('id', idAttribute);
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: nameAttribute,
id: idAttribute,
value: '1,2',
placeholder: 'Foo bar',
});
});
});
describe('when mount element does not exist', () => {
it('returns `null`', () => {
expect(initFunction()).toBe(null);
});
});
});
});
|
