blob: deb7e6037c098b0e6139e329f49f86c5d088d48e [file] [log] [blame]
Matteo Scandoloa5d03d52016-07-21 11:35:46 -07001/**
2 * © OpenCORD
3 *
4 * Created by teone on 4/18/16.
5 */
6
7(function () {
8 'use strict';
9
10 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
24 describe('The xos.helper module', function(){
25
26 describe('The xos-form component', () => {
27
28
29 beforeEach(module('xos.helpers'));
30
31 beforeEach(inject(($compile, $rootScope) => {
32 rootScope = $rootScope;
33 compile = $compile;
34 }));
35
36 it('should throw an error if no config is specified', () => {
37 function errorFunctionWrapper(){
38 compileElement();
39 }
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', () => {
44 function errorFunctionWrapper(){
45 scope = rootScope.$new();
46 scope.config = 'green';
47 compileElement();
48 }
49 expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide an action list in the configuration'));
50 });
51
52 describe('when correctly configured', () => {
Steven Burrows84818482016-09-29 15:33:46 -070053
Matteo Scandoloa5d03d52016-07-21 11:35:46 -070054 let cb = jasmine.createSpy('callback');
55
56 beforeEach(inject(($rootScope) => {
57
58 scope = $rootScope.$new();
59
60 scope.config = {
61 exclude: ['excludedField'],
62 formName: 'testForm',
63 actions: [
64 {
65 label: 'Save',
66 icon: 'ok', // refers to bootstraps glyphicon
67 cb: cb,
68 class: 'success'
69 }
70 ],
Steven Burrows84818482016-09-29 15:33:46 -070071 order: ['first_name', 'age', 'last_name'],
Matteo Scandoloa5d03d52016-07-21 11:35:46 -070072 fields: {
73 first_name: {
74 label: 'Custom Label'
75 }
76 }
77 };
78
79 scope.model = {
80 id: 1,
81 first_name: 'Jhon',
82 last_name: 'Snow',
83 age: 25,
84 email: 'test@onlab.us',
85 birthDate: '2016-04-18T23:44:16.883181Z',
86 enabled: true,
87 role: 'user', //select
88 a_permissions: [
89 ],
90 object_field: {
91 string: 'bar',
92 number: 1,
93 email: 'teo@onlab.us'
94 }
95 };
96
97 compileElement();
98 }));
99
100 it('should add excluded properties to the list', () => {
101 let expected = ['id', 'validators', 'created', 'updated', 'deleted', 'backend_status', 'excludedField'];
102 expect(isolatedScope.excludedField).toEqual(expected);
103 });
104
105 it('should render 10 input field', () => {
Matteo Scandolo65116c42016-09-21 17:06:23 -0700106 // boolean and arrays are in the form model, but are not input
Matteo Scandoloa5d03d52016-07-21 11:35:46 -0700107 expect(Object.keys(isolatedScope.formField).length).toEqual(9);
108 const field = element[0].getElementsByTagName('input');
Matteo Scandolo65116c42016-09-21 17:06:23 -0700109 expect(field.length).toEqual(9);
Matteo Scandoloa5d03d52016-07-21 11:35:46 -0700110 });
111
112 it('should render 1 boolean field', () => {
113 expect($(element).find('.boolean-field > a').length).toEqual(2)
114 });
115
116 it('when clicking on action should invoke callback', () => {
117 const link = $(element).find('[role="button"]');
118 //console.log(link);
119 link.click();
120 // TODO : Check correct parameters
121 expect(cb).toHaveBeenCalled();
122
123 });
124
125 it('should set a custom label', () => {
126 let nameField = element[0].getElementsByClassName('form-group')[0];
127 let label = angular.element(nameField.getElementsByTagName('label')[0]).text()
128 expect(label).toEqual('Custom Label:');
129 });
130
131 it('should use the correct input type', () => {
132 expect($(element).find('[name="age"]')).toHaveAttr('type', 'number');
133 expect($(element).find('[name="birthDate"]')).toHaveAttr('type', 'date');
134 expect($(element).find('[name="email"]')).toHaveAttr('type', 'email');
135 });
136
Steven Burrows84818482016-09-29 15:33:46 -0700137 it('should be in order', () => {
138 expect(Object.keys(isolatedScope.formField)[0]).toEqual('first_name');
139 expect(Object.keys(isolatedScope.formField)[1]).toEqual('age');
140 expect(Object.keys(isolatedScope.formField)[2]).toEqual('last_name');
141 });
142
Matteo Scandoloa5d03d52016-07-21 11:35:46 -0700143 xdescribe('the boolean field test', () => {
144
145 let setFalse, setTrue;
146
147 beforeEach(() => {
148 setFalse= $(element).find('.boolean-field > button:first-child');
149 setTrue = $(element).find('.boolean-field > button:last-child');
150 });
151
152 it('should change value to false', () => {
153 expect(isolatedScope.ngModel.enabled).toEqual(true);
154 setFalse.click();
155 expect(isolatedScope.ngModel.enabled).toEqual(false);
156 });
157
158 it('should change value to true', () => {
159 isolatedScope.ngModel.enabled = false;
160 scope.$apply();
161 expect(isolatedScope.ngModel.enabled).toEqual(false);
162 setTrue.click()
163 expect(isolatedScope.ngModel.enabled).toEqual(true);
164 });
165 });
166
167 describe('when a deep model is passed', () => {
168
169 beforeEach(inject(($rootScope) => {
170
171 scope = $rootScope.$new();
172
173 scope.config = {
174 exclude: ['excludedField'],
175 formName: 'testForm',
176 actions: [
177 {
178 label: 'Save',
179 icon: 'ok', // refers to bootstraps glyphicon
180 cb: cb,
181 class: 'success'
182 }
183 ],
184 fields: {
185 object_field: {
186 field_one: {
187 label: 'Custom Label'
188 }
189 }
190 }
191 };
192
193 scope.model = {
194 object_field: {
195 field_one: 'bar',
196 number: 1,
197 email: 'teo@onlab.us'
198 }
199 };
200
201 compileElement();
202 }));
203
204 it('should print nested field', () => {
205 expect($(element).find('input').length).toBe(3);
206 });
207
208 xit('should configure nested fields', () => {
209 let custom_label = $(element).find('input[name=field_one]').parent().find('label');
210 expect(custom_label.text()).toBe('Custom Label');
211 });
212 });
213 });
214 describe('when correctly configured for feedback', () => {
215
216 let fb = jasmine.createSpy('feedback').and.callFake(function(statusFlag) {
217 if(statusFlag){
218 scope.config.feedback.show = true;
219 scope.config.feedback.message = 'Form Submitted';
220 scope.config.feedback.type = 'success';
221 }
222 else {
223 scope.config.feedback.show = true;
224 scope.config.feedback.message = 'Error';
225 scope.config.feedback.type = 'danger';
226
227 }
228 });
229
230 beforeEach(()=> {
231 scope = rootScope.$new();
232 scope.config =
233 {
234
235 feedback: {
236 show: false,
237 message: 'Form submitted successfully !!!',
238 type: 'success'
239 },
240 actions: [
241 {
242 label: 'Save',
243 icon: 'ok', // refers to bootstraps glyphicon
244 cb: () => {},
245 class: 'success'
246 }
247 ]
248 };
249 scope.model={};
250 compileElement();
251 });
252
253 it('should not show feedback when loaded', () => {
254 expect($(element).find('xos-alert > div')).toHaveClass('alert alert-success ng-hide');
255 });
256
257 it('should show a success feedback', () => {
258 fb(true);
259 scope.$digest();
260 expect(isolatedScope.config.feedback.type).toEqual('success');
261 expect(fb).toHaveBeenCalledWith(true);
262 expect($(element).find('xos-alert > div')).toHaveClass('alert alert-success');
263 });
264
265 it('should show an error feedback', function() {
266 fb(false);
267 scope.$digest();
268 expect(isolatedScope.config.feedback.type).toEqual('danger');
269 expect(fb).toHaveBeenCalledWith(false);
270 expect($(element).find('xos-alert > div')).toHaveClass('alert alert-danger');
271 });
272 });
273
274 });
275 });
276})();