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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import waitForPromises from 'helpers/wait_for_promises';
import Api from '~/api';
import PipelineBranchNameToken from '~/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue';
import { branches, mockBranchesAfterMap } from '../mock_data';
describe('Pipeline Branch Name Token', () => {
let wrapper;
const findFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken);
const findAllFilteredSearchSuggestions = () =>
wrapper.findAllComponents(GlFilteredSearchSuggestion);
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const getBranchSuggestions = () =>
findAllFilteredSearchSuggestions().wrappers.map((w) => w.text());
const stubs = {
GlFilteredSearchToken: {
template: `<div><slot name="suggestions"></slot></div>`,
},
};
const defaultProps = {
config: {
type: 'ref',
icon: 'branch',
title: 'Branch name',
unique: true,
projectId: '21',
defaultBranchName: null,
disabled: false,
},
value: {
data: '',
},
cursorPosition: 'start',
};
const optionsWithDefaultBranchName = (options) => {
return {
propsData: {
...defaultProps,
config: {
...defaultProps.config,
defaultBranchName: 'main',
},
},
...options,
};
};
const createComponent = (options, data) => {
wrapper = shallowMount(PipelineBranchNameToken, {
propsData: {
...defaultProps,
},
data() {
return {
...data,
};
},
...options,
});
};
beforeEach(() => {
jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches });
createComponent();
});
it('passes config correctly', () => {
expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
});
it('fetches and sets project branches', () => {
expect(Api.branches).toHaveBeenCalled();
expect(wrapper.vm.branches).toEqual(mockBranchesAfterMap);
expect(findLoadingIcon().exists()).toBe(false);
});
describe('displays loading icon correctly', () => {
it('shows loading icon', () => {
createComponent({ stubs }, { loading: true });
expect(findLoadingIcon().exists()).toBe(true);
});
it('does not show loading icon', () => {
createComponent({ stubs }, { loading: false });
expect(findLoadingIcon().exists()).toBe(false);
});
});
describe('shows branches correctly', () => {
it('renders all branches', () => {
createComponent({ stubs }, { branches, loading: false });
expect(findAllFilteredSearchSuggestions()).toHaveLength(branches.length);
});
it('renders only the branch searched for', () => {
const mockBranches = ['main'];
createComponent({ stubs }, { branches: mockBranches, loading: false });
expect(findAllFilteredSearchSuggestions()).toHaveLength(mockBranches.length);
});
it('shows the default branch first if no branch was searched for', async () => {
const mockBranches = [{ name: 'branch-1' }];
jest.spyOn(Api, 'branches').mockResolvedValue({ data: mockBranches });
createComponent(optionsWithDefaultBranchName({ stubs }), { loading: false });
await nextTick();
expect(getBranchSuggestions()).toEqual(['main', 'branch-1']);
});
it('does not show the default branch if a search term was provided', async () => {
const mockBranches = [{ name: 'branch-1' }];
jest.spyOn(Api, 'branches').mockResolvedValue({ data: mockBranches });
createComponent(optionsWithDefaultBranchName(), { loading: false });
findFilteredSearchToken().vm.$emit('input', { data: 'branch-1' });
await waitForPromises();
expect(getBranchSuggestions()).toEqual(['branch-1']);
});
it('shows the default branch only once if it appears in the results', async () => {
const mockBranches = [{ name: 'main' }];
jest.spyOn(Api, 'branches').mockResolvedValue({ data: mockBranches });
createComponent(optionsWithDefaultBranchName({ stubs }), { loading: false });
await nextTick();
expect(getBranchSuggestions()).toEqual(['main']);
});
});
});
|
