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
|
import { GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import BadgeList from '~/badges/components/badge_list.vue';
import BadgeListRow from '~/badges/components/badge_list_row.vue';
import BadgeSettings from '~/badges/components/badge_settings.vue';
import store from '~/badges/store';
import { createDummyBadge } from '../dummy_badge';
Vue.use(Vuex);
describe('BadgeSettings component', () => {
let wrapper;
const badge = createDummyBadge();
const createComponent = (isEditing = false) => {
store.state.badges = [badge];
store.state.kind = 'project';
store.state.isEditing = isEditing;
wrapper = shallowMount(BadgeSettings, {
store,
stubs: {
'badge-list': BadgeList,
'badge-list-row': BadgeListRow,
},
});
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('displays modal if button for deleting a badge is clicked', async () => {
const button = wrapper.find('[data-testid="delete-badge"]');
button.vm.$emit('click');
await nextTick();
const modal = wrapper.find(GlModal);
expect(modal.isVisible()).toBe(true);
});
it('displays a form to add a badge', () => {
expect(wrapper.find('[data-testid="add-new-badge"]').isVisible()).toBe(true);
});
it('displays badge list', () => {
expect(wrapper.find(BadgeList).isVisible()).toBe(true);
});
describe('when editing', () => {
beforeEach(() => {
createComponent(true);
});
it('displays a form to edit a badge', () => {
expect(wrapper.find('[data-testid="edit-badge"]').isVisible()).toBe(true);
});
it('displays no badge list', () => {
expect(wrapper.find(BadgeList).isVisible()).toBe(false);
});
});
});
|
