blob: 6260ac894dadf96cd3cea66f5ae57a69fd1f2ba9 [file] [log] [blame]
Arpit Agarwal441284b2016-08-04 17:12:55 -07001/**
2 * © OpenCORD
3 *
4 * Created by teone on 5/25/16.
5 */
6
7(function () {
8 'use strict';
9
10 describe('The xos.helper module', function(){
11
12 describe('The xosField component', () => {
13 let element, scope, isolatedScope, rootScope, compile;
14 const compileElement = (el) => {
15 element = el;
16
17 if(!scope){
18 scope = rootScope.$new();
19 }
20 if(angular.isUndefined(element)){
21 element = angular.element('<xos-field name="name" field="field" ng-model="ngModel"></xos-field>');
22 }
23 compile(element)(scope);
24 scope.$digest();
25 isolatedScope = element.isolateScope().vm;
26 };
27
28 beforeEach(module('xos.helpers'));
29
30 beforeEach(inject(function ($compile, $rootScope) {
31 compile = $compile;
32 rootScope = $rootScope;
33 }));
34
35 it('should throw an error if no name is passed', inject(($compile, $rootScope) => {
36 function errorFunctionWrapper(){
37 // setup the parent scope
38 scope = $rootScope.$new();
39 scope.field = {
40 label: 'Label',
41 type: 'number',
42 validators: {}
43 };
44 scope.ngModel = 1;
45 compileElement();
46 }
47 expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide a field name'));
48 }));
49
50 it('should throw an error if no field definition is passed', inject(($compile, $rootScope) => {
51 function errorFunctionWrapper(){
52 // setup the parent scope
53 scope = $rootScope.$new();
54 scope.name = 'label';
55 scope.ngModel = 1;
56 compileElement();
57 }
58 expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide a field definition'));
59 }));
60
61 it('should throw an error if no field type is passed', inject(($compile, $rootScope) => {
62 function errorFunctionWrapper(){
63 // setup the parent scope
64 scope = $rootScope.$new();
65 scope.name = 'label';
66 scope.ngModel = 1;
67 scope.field = {label: 'Label:'}
68 compileElement();
69 }
70 expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide a type in the field definition'));
71 }));
72
73 it('should throw an error if no field model is passed', inject(($compile, $rootScope) => {
74 function errorFunctionWrapper(){
75 // setup the parent scope
76 scope = $rootScope.$new();
77 scope.name = 'label';
78 scope.field = {
79 label: 'Label',
80 type: 'number',
81 validators: {}
82 };
83 compileElement(angular.element('<xos-field name="name" field="field"></xos-field>'));
84 }
85 expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide an ng-model'));
86 }));
87
88 describe('when a text input is passed', () => {
89 beforeEach(() => {
90 scope = rootScope.$new();
91 scope.name = 'label';
92 scope.field = {
93 label: 'Label',
94 type: 'text',
95 validators: {
96 custom: 'fake'
97 }
98 };
99 scope.ngModel = 'label';
100 compileElement();
101 });
102
103 it('should print a text field', () => {
104 expect($(element).find('[name="label"]')).toHaveAttr('type', 'text');
105 });
106
107 it('should attach the custom validator directive', () => {
108 let input = $(element).find('[name="label"]');
109 expect(input).toHaveAttr('xos-custom-validator');
110 expect(input).toHaveAttr('custom-validator', 'vm.field.validators.custom || null');
111 });
112 });
113
114 describe('when a option is selected in dropdown', () => {
115 beforeEach(() => {
116 scope = rootScope.$new();
117 scope.name = 'label';
118 scope.field = {
119 label: 'Label',
120 type: 'select',
121 validators: {},
122 options: [
123 {
124 id: 0,
125 label: '---Site---'
126 },
127 {
128 id: 1,
129 label: '---Site1---'
130 }
131 ]
132 };
133 scope.ngModel = 0;
134 compileElement();
135 });
136
137 it('No of select elements', () => {
138 expect($(element).find('select').children('option').length).toEqual(2);
139 });
140
141 it('should show the selected value', () => {
142 const elem = angular.element($(element).find('select').children('option')[0]);
143 expect(elem.text()).toEqual('---Site---');
144 expect(elem).toHaveAttr('selected');
145 });
146 });
147
148 describe('when a number input is passed', () => {
149 beforeEach(() => {
150 scope = rootScope.$new();
151 scope.name = 'label';
152 scope.field = {
153 label: 'Label',
154 type: 'number',
155 validators: {}
156 };
157 scope.ngModel = 10;
158 compileElement();
159 });
160
161 it('should print a number field', () => {
162 expect($(element).find('[name="label"]')).toHaveAttr('type', 'number');
163 });
164 });
165
166 describe('when a boolean input is passed', () => {
167 beforeEach(() => {
168 scope = rootScope.$new();
169 scope.name = 'label';
170 scope.field = {
171 label: 'Label',
172 type: 'boolean',
173 validators: {}
174 };
175 scope.ngModel = true;
176 compileElement();
177 });
178
179 let setFalse, setTrue;
180
181 beforeEach(() => {
182 setFalse= $(element).find('.boolean-field > a:first-child');
183 setTrue = $(element).find('.boolean-field > a:last-child');
184 });
185
186 it('should print two buttons', () => {
187 expect($(element).find('.boolean-field > a').length).toEqual(2)
188 });
189
190 it('should change value to false', () => {
191 expect(isolatedScope.ngModel).toEqual(true);
192 clickElement(setFalse[0]);
193 expect(isolatedScope.ngModel).toEqual(false);
194 });
195
196 it('should change value to true', () => {
197 isolatedScope.ngModel = false;
198 scope.$apply();
199 expect(isolatedScope.ngModel).toEqual(false);
200 clickElement(setTrue[0]);
201 expect(isolatedScope.ngModel).toEqual(true);
202 });
203 });
204
205 describe('when an object input is passed', () => {
206 beforeEach(() => {
207 scope = rootScope.$new();
208 scope.name = 'label';
209 scope.field = {
210 label: 'Label',
211 type: 'object',
212 validators: {}
213 };
214 scope.ngModel = {
215 baz: true,
216 foo: 'bar',
217 foz: 1,
218 };
219 compileElement();
220 });
221
222 it('should print a panel to contain object property field', () => {
223 expect($(element).find('.panel.object-field')).toExist()
224 });
225
226 it('should print the right input type for each property', () => {
227 expect($(element).find('input').length).toBe(2);
228 expect($(element).find('.boolean-field > a').length).toEqual(2);
229 });
230
231 it('should format labels', () => {
232 expect($(element).find('input[name="foo"]').parent().find('label').text()).toBe('Foo:');
233 });
234
235 describe('and the model is empty', () => {
236 beforeEach(() => {
237 scope.ngModel = {
238 };
239 compileElement();
240 });
241
242 it('should not print the panel', () => {
243 expect($(element).find('.panel.object-field')).not.toExist()
244 });
245
246 describe('but field is configured', () => {
247 beforeEach(() => {
248 scope.field.properties = {
249 foo: {
250 label: 'FooLabel:',
251 type: 'string',
252 validators: {
253 required: true
254 }
255 },
256 bar: {
257 type: 'number'
258 }
259 };
260 compileElement();
261 });
262 it('should render panel and configured fields', () => {
263 expect($(element).find('.panel.object-field')).toExist();
264 expect($(element).find('input[name="foo"]').parent().find('label').text()).toBe('FooLabel:');
265 expect($(element).find('input[name="foo"]')).toHaveAttr('type', 'string');
266 expect($(element).find('input[name="foo"]')).toHaveAttr('required');
267
268 expect($(element).find('input[name="bar"]').parent().find('label').text()).toBe('Bar:');
269 expect($(element).find('input[name="bar"]')).toHaveAttr('type', 'number');
270
271 });
272 });
273 });
274 });
275
Matteo Scandolo65116c42016-09-21 17:06:23 -0700276 describe('when an array input is passed', () => {
277 beforeEach(() => {
278 scope = rootScope.$new();
279 scope.name = 'label';
280 scope.field = {
281 label: 'Label',
282 type: 'array',
283 validators: {},
284 options: ['1', '2', '3', '4', '5']
285 };
286 scope.ngModel = ['1', '2', '3'];
287 compileElement();
288 });
289
290 it('should print a panel to contain array values', () => {
291 expect($(element).find('.panel.array-field')).toExist()
292 });
293
294 it('should print selected values', () => {
295 expect($(element).find('.panel.array-field .selected .array-element')).toHaveLength(3)
296 });
297
298 it('should print un-selected values', () => {
299 expect($(element).find('.panel.array-field .unselected .array-element')).toHaveLength(2)
300 });
301
302 describe('when a value is added', () => {
303 it('should be removed from unselected', () => {
304 isolatedScope.ngModel.push('4');
305 scope.$apply();
306 expect($(element).find('.panel.array-field .unselected .array-element')).toHaveLength(1)
307 });
308 });
309
310 describe('when a value is removed', () => {
311 it('should be added to unselected', () => {
312 isolatedScope.ngModel.pop();
313 scope.$apply();
314 expect($(element).find('.panel.array-field .unselected .array-element')).toHaveLength(3)
315 });
316 });
317 });
318
Arpit Agarwal441284b2016-08-04 17:12:55 -0700319 describe('when validation options are passed', () => {
320 let input;
321 describe('given a a text field', () => {
322 beforeEach(() => {
323 scope = rootScope.$new();
324 scope.name='label';
325 scope.field = {
326 label: 'Label',
327 type: 'text',
328 validators: {
329 minlength: 10,
330 maxlength: 15,
331 required: true
332 }
333 };
334
335 compileElement();
336 scope.$digest();
337 input = $(element).find('input');
338 });
339
340 it('should validate required', () => {
341 scope.ngModel= null;
342 scope.$digest();
343 expect(input).toHaveClass('ng-invalid-required');
344
345 scope.ngModel= 'not too short';
346 scope.$digest();
347 expect(input).not.toHaveClass('ng-invalid-required');
348 expect(input).not.toHaveClass('ng-invalid');
349 });
350
351 it('should validate minlength', () => {
352 scope.ngModel= 'short';
353 scope.$digest();
354 expect(input).toHaveClass('ng-invalid-minlength');
355
356 scope.ngModel= 'not too short';
357 scope.$digest();
358 expect(input).not.toHaveClass('ng-invalid-minlength');
359 expect(input).not.toHaveClass('ng-invalid');
360 });
361
362 it('should validate maxlength', () => {
363 scope.ngModel= 'this is definitely too long!!';
364 scope.$digest();
365 expect(input).toHaveClass('ng-invalid-maxlength');
366
367 scope.ngModel= 'not too short';
368 scope.$digest();
369 expect(input).not.toHaveClass('ng-invalid-maxlength');
370 expect(input).not.toHaveClass('ng-invalid');
371 });
372 });
373 });
374 });
375 });
Matteo Scandoloa5d03d52016-07-21 11:35:46 -0700376})();