blob: cb9f9e8c71084afdfd52f2be0e434d14ca26ef5c [file] [log] [blame]
Matteo Scandolo7bc39c42016-04-20 11:38:42 -07001/**
2 * © OpenCORD
3 *
4 * Created by teone on 4/18/16.
5 */
6
7(function () {
8 'use strict';
9
Matteo Scandolob9fb6252016-05-26 15:09:55 -070010 let element, scope, isolatedScope, rootScope, compile;
11
12 const compileElement = () => {
13
14 if(!scope){
15 scope = rootScope.$new();
16 }
17
18 element = angular.element(`<xos-form config="config" ng-model="model"></xos-form>`);
19 compile(element)(scope);
20 scope.$digest();
21 isolatedScope = element.isolateScope().vm;
22 }
23
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070024 describe('The xos.helper module', function(){
25
Matteo Scandolo6ba12872016-04-27 16:29:33 -070026 describe('The xos-form component', () => {
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070027
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070028
29 beforeEach(module('xos.helpers'));
30
Matteo Scandolob9fb6252016-05-26 15:09:55 -070031 beforeEach(inject(($compile, $rootScope) => {
32 rootScope = $rootScope;
33 compile = $compile;
34 }));
35
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070036 it('should throw an error if no config is specified', inject(($compile, $rootScope) => {
37 function errorFunctionWrapper(){
Matteo Scandolob9fb6252016-05-26 15:09:55 -070038 compileElement();
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070039 }
40 expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide a configuration via the "config" attribute'));
41 }));
42
43 it('should throw an error if no actions is specified', inject(($compile, $rootScope) => {
44 function errorFunctionWrapper(){
Matteo Scandolob9fb6252016-05-26 15:09:55 -070045 scope = $rootScope.$new();
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070046 scope.config = 'green';
Matteo Scandolob9fb6252016-05-26 15:09:55 -070047 compileElement();
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070048 }
49 expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide an action list in the configuration'));
50 }));
51
52 describe('when correctly configured', () => {
53
54 let cb = jasmine.createSpy('callback');
55
Matteo Scandolob9fb6252016-05-26 15:09:55 -070056 beforeEach(inject(($rootScope) => {
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070057
58 scope = $rootScope.$new();
59
60 scope.config = {
61 exclude: ['excludedField'],
Matteo Scandolob3d686f2016-04-22 14:14:03 -070062 formName: 'testForm',
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070063 actions: [
64 {
65 label: 'Save',
66 icon: 'ok', // refers to bootstraps glyphicon
67 cb: cb,
68 class: 'success'
69 }
70 ],
Matteo Scandolo9f0e5ae2016-04-20 12:24:52 -070071 fields: {
72 first_name: {
73 label: 'Custom Label'
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070074 }
Matteo Scandolo9f0e5ae2016-04-20 12:24:52 -070075 }
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070076 };
77
78 scope.model = {
79 id: 1,
80 first_name: 'Jhon',
81 last_name: 'Snow',
82 age: 25,
Matteo Scandolo4ba4cf12016-04-20 16:36:17 -070083 email: 'test@onlab.us',
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070084 birthDate: '2016-04-18T23:44:16.883181Z',
85 enabled: true,
86 role: 'user', //select
87 a_permissions: [
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070088 ],
Matteo Scandolo974c0e42016-05-25 16:02:16 -070089 object_field: {
90 string: 'bar',
91 number: 1,
92 email: 'teo@onlab.us'
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070093 }
94 };
95
Matteo Scandolob9fb6252016-05-26 15:09:55 -070096 compileElement();
Matteo Scandolo7bc39c42016-04-20 11:38:42 -070097 }));
98
99 it('should add excluded properties to the list', () => {
100 let expected = ['id', 'validators', 'created', 'updated', 'deleted', 'backend_status', 'excludedField'];
101 expect(isolatedScope.excludedField).toEqual(expected);
102 });
103
Matteo Scandolo03d8b8e2016-05-25 17:37:37 -0700104 it('should render 10 input field', () => {
Matteo Scandolo4ba4cf12016-04-20 16:36:17 -0700105 // boolean are in the form model, but are not input
106 expect(Object.keys(isolatedScope.formField).length).toEqual(9);
Matteo Scandolo7bc39c42016-04-20 11:38:42 -0700107 var field = element[0].getElementsByTagName('input');
Matteo Scandolo974c0e42016-05-25 16:02:16 -0700108 expect(field.length).toEqual(10);
Matteo Scandolo7bc39c42016-04-20 11:38:42 -0700109 });
110
Matteo Scandolo4ba4cf12016-04-20 16:36:17 -0700111 it('should render 1 boolean field', () => {
112 expect($(element).find('.boolean-field > button').length).toEqual(2)
113 });
114
Matteo Scandolo7bc39c42016-04-20 11:38:42 -0700115 it('when clicking on action should invoke callback', () => {
Matteo Scandolo4ba4cf12016-04-20 16:36:17 -0700116 var link = $(element).find('[role="button"]');
Matteo Scandolo7bc39c42016-04-20 11:38:42 -0700117 link.click();
118 expect(cb).toHaveBeenCalledWith(scope.model);
119 });
120
121 it('should set a custom label', () => {
122 let nameField = element[0].getElementsByClassName('form-group')[0];
123 let label = angular.element(nameField.getElementsByTagName('label')[0]).text()
124 expect(label).toEqual('Custom Label:');
125 });
Matteo Scandolo7bc39c42016-04-20 11:38:42 -0700126
Matteo Scandolo6e2e6ff2016-04-20 14:59:39 -0700127 it('should use the correct input type', () => {
128 expect($(element).find('[name="age"]')).toHaveAttr('type', 'number');
129 expect($(element).find('[name="birthDate"]')).toHaveAttr('type', 'date');
Matteo Scandolo4ba4cf12016-04-20 16:36:17 -0700130 expect($(element).find('[name="email"]')).toHaveAttr('type', 'email');
131 });
132
133 describe('the boolean field', () => {
134
135 let setFalse, setTrue;
136
137 beforeEach(() => {
138 setFalse= $(element).find('.boolean-field > button:first-child');
139 setTrue = $(element).find('.boolean-field > button:last-child');
140 });
141
142 it('should change value to false', () => {
143 expect(isolatedScope.ngModel.enabled).toEqual(true);
144 setFalse.click()
145 expect(isolatedScope.ngModel.enabled).toEqual(false);
146 });
147
Matteo Scandolo974c0e42016-05-25 16:02:16 -0700148 it('should change value to true', () => {
Matteo Scandolo4ba4cf12016-04-20 16:36:17 -0700149 isolatedScope.ngModel.enabled = false;
150 scope.$apply();
151 expect(isolatedScope.ngModel.enabled).toEqual(false);
152 setTrue.click()
153 expect(isolatedScope.ngModel.enabled).toEqual(true);
154 });
Matteo Scandolo6e2e6ff2016-04-20 14:59:39 -0700155 });
Matteo Scandolob3d686f2016-04-22 14:14:03 -0700156
Matteo Scandolo6ba12872016-04-27 16:29:33 -0700157 // NOTE not sure why this tests are failing
158 xdescribe('the custom validation options', () => {
Matteo Scandolob3d686f2016-04-22 14:14:03 -0700159 beforeEach(() => {
160 scope.config.fields.first_name.validators = {
161 minlength: 10,
162 maxlength: 15,
163 required: true
164 };
165
Matteo Scandolo01c87572016-04-25 08:15:24 -0700166 scope.config.fields.age = {
167 validators: {
168 min: 10,
169 max: 20
170 }
171 };
172
Matteo Scandolob3d686f2016-04-22 14:14:03 -0700173 scope.$digest();
174 });
175
176 it('should validate required', () => {
177 scope.model.first_name = null;
178 scope.$digest();
179
180 expect(isolatedScope.testForm.first_name.$valid).toBeFalsy();
181 expect(isolatedScope.testForm.first_name.$error.required).toBeTruthy();
182 });
183
184 it('should validate minlength', () => {
185 scope.model.first_name = 'short';
186 scope.$digest();
187
188 expect(isolatedScope.testForm.first_name.$valid).toBeFalsy();
189 expect(isolatedScope.testForm.first_name.$error.minlength).toBeTruthy();
190 });
191
192 it('should validate maxlength', () => {
193 scope.model.first_name = 'this is way too long!';
194 scope.$digest();
195
196 expect(isolatedScope.testForm.first_name.$valid).toBeFalsy();
197 expect(isolatedScope.testForm.first_name.$error.maxlength).toBeTruthy();
198 });
Matteo Scandolo01c87572016-04-25 08:15:24 -0700199
Matteo Scandolo6ba12872016-04-27 16:29:33 -0700200 it('should validate min', () => {
Matteo Scandolo01c87572016-04-25 08:15:24 -0700201 // not validating min and max for now
202 scope.model.age = 8;
203 scope.$digest();
204
205 expect(isolatedScope.testForm.age.$valid).toBeFalsy();
206 expect(isolatedScope.testForm.age.$error.min).toBeTruthy();
207 });
Matteo Scandolob3d686f2016-04-22 14:14:03 -0700208 });
Matteo Scandolob9fb6252016-05-26 15:09:55 -0700209
210 describe('when a deep model is passed', () => {
211
212 beforeEach(inject(($rootScope) => {
213
214 scope = $rootScope.$new();
215
216 scope.config = {
217 exclude: ['excludedField'],
218 formName: 'testForm',
219 actions: [
220 {
221 label: 'Save',
222 icon: 'ok', // refers to bootstraps glyphicon
223 cb: cb,
224 class: 'success'
225 }
226 ],
227 fields: {
228 object_field: {
229 field_one: {
230 label: 'Custom Label'
231 }
232 }
233 }
234 };
235
236 scope.model = {
237 object_field: {
238 field_one: 'bar',
239 number: 1,
240 email: 'teo@onlab.us'
241 }
242 };
243
244 compileElement();
245 }));
246
247 it('should print nested field', () => {
248 expect($(element).find('input').length).toBe(3);
249 });
250
251 xit('should configure nested fields', () => {
252 let custom_label = $(element).find('input[name=field_one]').parent().find('label');
253 expect(custom_label.text()).toBe('Custom Label');
254 });
255 });
Matteo Scandolo6e2e6ff2016-04-20 14:59:39 -0700256 });
Matteo Scandolo7bc39c42016-04-20 11:38:42 -0700257 });
258 });
259})();