]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; |
2 | import { ReactiveFormsModule, Validators } from '@angular/forms'; | |
3 | ||
4 | import { PopoverModule } from 'ngx-bootstrap/popover'; | |
5 | import { TooltipModule } from 'ngx-bootstrap/tooltip'; | |
6 | ||
7 | import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper'; | |
8 | import { SelectOption } from './select-option.model'; | |
9 | import { SelectComponent } from './select.component'; | |
10 | ||
11 | describe('SelectComponent', () => { | |
12 | let component: SelectComponent; | |
13 | let fixture: ComponentFixture<SelectComponent>; | |
14 | ||
15 | const selectOption = (filter: string) => { | |
16 | component.filter.setValue(filter); | |
17 | component.updateFilter(); | |
18 | component.selectOption(); | |
19 | }; | |
20 | ||
21 | configureTestBed({ | |
22 | declarations: [SelectComponent], | |
23 | imports: [PopoverModule.forRoot(), TooltipModule, ReactiveFormsModule], | |
24 | providers: i18nProviders | |
25 | }); | |
26 | ||
27 | beforeEach(() => { | |
28 | fixture = TestBed.createComponent(SelectComponent); | |
29 | component = fixture.componentInstance; | |
30 | fixture.detectChanges(); | |
31 | component.options = [ | |
81eedcae TL |
32 | { name: 'option1', description: '', selected: false, enabled: true }, |
33 | { name: 'option2', description: '', selected: false, enabled: true }, | |
34 | { name: 'option3', description: '', selected: false, enabled: true } | |
11fdf7f2 TL |
35 | ]; |
36 | }); | |
37 | ||
38 | it('should create', () => { | |
39 | expect(component).toBeTruthy(); | |
40 | }); | |
41 | ||
42 | it('should add item', () => { | |
43 | component.data = []; | |
44 | component.triggerSelection(component.options[1]); | |
45 | expect(component.data).toEqual(['option2']); | |
46 | }); | |
47 | ||
48 | it('should update selected', () => { | |
49 | component.data = ['option2']; | |
50 | component.ngOnChanges(); | |
51 | expect(component.options[0].selected).toBe(false); | |
52 | expect(component.options[1].selected).toBe(true); | |
53 | }); | |
54 | ||
55 | it('should remove item', () => { | |
56 | component.options.map((option) => { | |
57 | option.selected = true; | |
58 | return option; | |
59 | }); | |
60 | component.data = ['option1', 'option2', 'option3']; | |
61 | component.removeItem('option1'); | |
62 | expect(component.data).toEqual(['option2', 'option3']); | |
63 | }); | |
64 | ||
65 | it('should not remove item that is not selected', () => { | |
66 | component.options[0].selected = true; | |
67 | component.data = ['option1']; | |
68 | component.removeItem('option2'); | |
69 | expect(component.data).toEqual(['option1']); | |
70 | }); | |
71 | ||
72 | describe('filter values', () => { | |
73 | beforeEach(() => { | |
74 | component.ngOnInit(); | |
75 | }); | |
76 | ||
77 | it('shows all options with no value set', () => { | |
78 | expect(component.filteredOptions).toEqual(component.options); | |
79 | }); | |
80 | ||
81 | it('shows one option that it filtered for', () => { | |
82 | component.filter.setValue('2'); | |
83 | component.updateFilter(); | |
84 | expect(component.filteredOptions).toEqual([component.options[1]]); | |
85 | }); | |
86 | ||
87 | it('shows all options after selecting something', () => { | |
88 | component.filter.setValue('2'); | |
89 | component.updateFilter(); | |
90 | component.selectOption(); | |
91 | expect(component.filteredOptions).toEqual(component.options); | |
92 | }); | |
93 | ||
94 | it('is not able to create by default with no value set', () => { | |
95 | component.updateFilter(); | |
96 | expect(component.isCreatable()).toBeFalsy(); | |
97 | }); | |
98 | ||
99 | it('is not able to create by default with a value set', () => { | |
100 | component.filter.setValue('2'); | |
101 | component.updateFilter(); | |
102 | expect(component.isCreatable()).toBeFalsy(); | |
103 | }); | |
104 | }); | |
105 | ||
106 | describe('automatically add selected options if not in options array', () => { | |
107 | beforeEach(() => { | |
108 | component.data = ['option1', 'option4']; | |
109 | expect(component.options.length).toBe(3); | |
110 | }); | |
111 | ||
112 | const expectedResult = () => { | |
113 | expect(component.options.length).toBe(4); | |
114 | expect(component.options[3]).toEqual(new SelectOption(true, 'option4', '')); | |
115 | }; | |
116 | ||
117 | it('with no extra settings', () => { | |
118 | component.ngOnInit(); | |
119 | expectedResult(); | |
120 | }); | |
121 | ||
122 | it('with custom badges', () => { | |
123 | component.customBadges = true; | |
124 | component.ngOnInit(); | |
125 | expectedResult(); | |
126 | }); | |
127 | ||
128 | it('with limit higher than selected', () => { | |
129 | component.selectionLimit = 3; | |
130 | component.ngOnInit(); | |
131 | expectedResult(); | |
132 | }); | |
133 | ||
134 | it('with limit equal to selected', () => { | |
135 | component.selectionLimit = 2; | |
136 | component.ngOnInit(); | |
137 | expectedResult(); | |
138 | }); | |
139 | ||
140 | it('with limit lower than selected', () => { | |
141 | component.selectionLimit = 1; | |
142 | component.ngOnInit(); | |
143 | expectedResult(); | |
144 | }); | |
145 | }); | |
146 | ||
147 | describe('sorted array and options', () => { | |
148 | beforeEach(() => { | |
149 | component.customBadges = true; | |
150 | component.customBadgeValidators = [Validators.pattern('[A-Za-z0-9_]+')]; | |
151 | component.data = ['c', 'b']; | |
152 | component.options = [new SelectOption(true, 'd', ''), new SelectOption(true, 'a', '')]; | |
153 | component.ngOnInit(); | |
154 | }); | |
155 | ||
156 | it('has a sorted selection', () => { | |
157 | expect(component.data).toEqual(['a', 'b', 'c', 'd']); | |
158 | }); | |
159 | ||
160 | it('has a sorted options', () => { | |
161 | const sortedOptions = [ | |
162 | new SelectOption(true, 'a', ''), | |
163 | new SelectOption(true, 'b', ''), | |
164 | new SelectOption(true, 'c', ''), | |
165 | new SelectOption(true, 'd', '') | |
166 | ]; | |
167 | expect(component.options).toEqual(sortedOptions); | |
168 | }); | |
169 | ||
170 | it('has a sorted selection after adding an item', () => { | |
171 | selectOption('block'); | |
172 | expect(component.data).toEqual(['a', 'b', 'block', 'c', 'd']); | |
173 | }); | |
174 | ||
175 | it('has a sorted options after adding an item', () => { | |
176 | selectOption('block'); | |
177 | const sortedOptions = [ | |
178 | new SelectOption(true, 'a', ''), | |
179 | new SelectOption(true, 'b', ''), | |
180 | new SelectOption(true, 'block', ''), | |
181 | new SelectOption(true, 'c', ''), | |
182 | new SelectOption(true, 'd', '') | |
183 | ]; | |
184 | expect(component.options).toEqual(sortedOptions); | |
185 | }); | |
186 | }); | |
187 | ||
188 | describe('with custom options', () => { | |
189 | beforeEach(() => { | |
190 | component.customBadges = true; | |
191 | component.customBadgeValidators = [Validators.pattern('[A-Za-z0-9_]+')]; | |
192 | component.ngOnInit(); | |
193 | }); | |
194 | ||
195 | it('is not able to create with no value set', () => { | |
196 | component.updateFilter(); | |
197 | expect(component.isCreatable()).toBeFalsy(); | |
198 | }); | |
199 | ||
200 | it('is able to create with a valid value set', () => { | |
201 | component.filter.setValue('2'); | |
202 | component.updateFilter(); | |
203 | expect(component.isCreatable()).toBeTruthy(); | |
204 | }); | |
205 | ||
206 | it('is not able to create with a value set that already exist', () => { | |
207 | component.filter.setValue('option2'); | |
208 | component.updateFilter(); | |
209 | expect(component.isCreatable()).toBeFalsy(); | |
210 | }); | |
211 | ||
212 | it('adds custom option', () => { | |
213 | selectOption('customOption'); | |
214 | expect(component.options[0]).toEqual({ | |
215 | name: 'customOption', | |
216 | description: '', | |
81eedcae TL |
217 | selected: true, |
218 | enabled: true | |
11fdf7f2 TL |
219 | }); |
220 | expect(component.options.length).toBe(4); | |
221 | expect(component.data).toEqual(['customOption']); | |
222 | }); | |
223 | ||
224 | it('will not add an option that did not pass the validation', () => { | |
225 | selectOption(' this does not pass '); | |
226 | expect(component.options.length).toBe(3); | |
227 | expect(component.data).toEqual([]); | |
228 | expect(component.filter.invalid).toBeTruthy(); | |
229 | }); | |
230 | ||
231 | it('removes custom item selection by name', () => { | |
232 | selectOption('customOption'); | |
233 | component.removeItem('customOption'); | |
234 | expect(component.data).toEqual([]); | |
235 | expect(component.options.length).toBe(4); | |
236 | expect(component.options[0]).toEqual({ | |
237 | name: 'customOption', | |
238 | description: '', | |
81eedcae TL |
239 | selected: false, |
240 | enabled: true | |
11fdf7f2 TL |
241 | }); |
242 | }); | |
243 | ||
244 | it('will not add an option that is already there', () => { | |
245 | selectOption('option2'); | |
246 | expect(component.options.length).toBe(3); | |
247 | expect(component.data).toEqual(['option2']); | |
248 | }); | |
249 | ||
250 | it('will not add an option twice after each other', () => { | |
251 | selectOption('onlyOnce'); | |
252 | expect(component.data).toEqual(['onlyOnce']); | |
253 | selectOption('onlyOnce'); | |
254 | expect(component.data).toEqual([]); | |
255 | selectOption('onlyOnce'); | |
256 | expect(component.data).toEqual(['onlyOnce']); | |
257 | expect(component.options.length).toBe(4); | |
258 | }); | |
259 | }); | |
260 | ||
261 | describe('if the selection limit is reached', function() { | |
262 | beforeEach(() => { | |
263 | component.selectionLimit = 2; | |
264 | component.triggerSelection(component.options[0]); | |
265 | component.triggerSelection(component.options[1]); | |
266 | }); | |
267 | ||
268 | it('will not select more options', () => { | |
269 | component.triggerSelection(component.options[2]); | |
270 | expect(component.data).toEqual(['option1', 'option2']); | |
271 | }); | |
272 | ||
273 | it('will unselect options that are selected', () => { | |
274 | component.triggerSelection(component.options[1]); | |
275 | expect(component.data).toEqual(['option1']); | |
276 | }); | |
277 | }); | |
278 | }); |