blob: 2d7d389f4262cb415c5c037078073a246b10ec09 [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
276 describe('when validation options are passed', () => {
277 let input;
278 describe('given a a text field', () => {
279 beforeEach(() => {
280 scope = rootScope.$new();
281 scope.name='label';
282 scope.field = {
283 label: 'Label',
284 type: 'text',
285 validators: {
286 minlength: 10,
287 maxlength: 15,
288 required: true
289 }
290 };
291
292 compileElement();
293 scope.$digest();
294 input = $(element).find('input');
295 });
296
297 it('should validate required', () => {
298 scope.ngModel= null;
299 scope.$digest();
300 expect(input).toHaveClass('ng-invalid-required');
301
302 scope.ngModel= 'not too short';
303 scope.$digest();
304 expect(input).not.toHaveClass('ng-invalid-required');
305 expect(input).not.toHaveClass('ng-invalid');
306 });
307
308 it('should validate minlength', () => {
309 scope.ngModel= 'short';
310 scope.$digest();
311 expect(input).toHaveClass('ng-invalid-minlength');
312
313 scope.ngModel= 'not too short';
314 scope.$digest();
315 expect(input).not.toHaveClass('ng-invalid-minlength');
316 expect(input).not.toHaveClass('ng-invalid');
317 });
318
319 it('should validate maxlength', () => {
320 scope.ngModel= 'this is definitely too long!!';
321 scope.$digest();
322 expect(input).toHaveClass('ng-invalid-maxlength');
323
324 scope.ngModel= 'not too short';
325 scope.$digest();
326 expect(input).not.toHaveClass('ng-invalid-maxlength');
327 expect(input).not.toHaveClass('ng-invalid');
328 });
329 });
330 });
331 });
332 });
Matteo Scandoloa5d03d52016-07-21 11:35:46 -0700333})();