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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
import { GlModal } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { stubComponent } from 'helpers/stub_component';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import RevokeButton from '~/deploy_tokens/components/revoke_button.vue';
const mockToken = {
created_at: '2021-03-18T19:13:03.011Z',
deploy_token_type: 'project_type',
expires_at: null,
id: 1,
name: 'testtoken',
read_package_registry: true,
read_registry: false,
read_repository: true,
revoked: false,
token: 'xUVsGDfK4y_Xj5UhqvaH',
token_encrypted: 'JYeg+WK4obIlrhyAYWvBvaY7CNB/U3FPX3cdLrivAly5qToy',
username: 'gitlab+deploy-token-1',
write_package_registry: true,
write_registry: false,
};
const mockRevokePath = '';
describe('RevokeButton', () => {
let wrapper;
let glModalDirective;
function createComponent(injectedProperties = {}) {
glModalDirective = jest.fn();
return extendedWrapper(
mount(RevokeButton, {
provide: {
token: mockToken,
revokePath: mockRevokePath,
...injectedProperties,
},
directives: {
glModal: {
bind(_, { value }) {
glModalDirective(value);
},
},
},
stubs: {
GlModal: stubComponent(GlModal, {
template:
'<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
}),
},
}),
);
}
afterEach(() => {
wrapper.destroy();
});
const findRevokeButton = () => wrapper.findByTestId('revoke-button');
const findModal = () => wrapper.findComponent(GlModal);
const findPrimaryModalButton = () => wrapper.findByTestId('primary-revoke-btn');
describe('template', () => {
beforeEach(() => {
wrapper = createComponent();
});
describe('revoke button', () => {
it('displays the revoke button', () => {
expect(findRevokeButton().exists()).toBe(true);
});
it('passes the buttonClass to the button', () => {
wrapper = createComponent({ buttonClass: 'my-revoke-button' });
expect(findRevokeButton().classes()).toContain('my-revoke-button');
});
it('opens the modal', () => {
findRevokeButton().trigger('click');
expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.modalId);
});
});
describe('modal', () => {
beforeEach(() => {
wrapper = createComponent();
});
it('renders the revoke modal', () => {
expect(findModal().exists()).toBe(true);
});
it('displays the token name in the modal title', () => {
expect(findModal().text()).toContain('Revoke testtoken');
});
it('displays the token name in the primary action button"', () => {
expect(findPrimaryModalButton().text()).toBe('Revoke testtoken');
});
it('passes the revokePath to the button', () => {
const revokePath = 'gitlab-org/gitlab-test/-/deploy-tokens/1/revoke';
wrapper = createComponent({ revokePath });
expect(findPrimaryModalButton().attributes('href')).toBe(revokePath);
});
});
});
});
|
