blob: e92d31a88c49e070d57a80b4373c30ad7e41cad5 [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', () => {
53
54 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 ],
71 fields: {
72 first_name: {
73 label: 'Custom Label'
74 }
75 }
76 };
77
78 scope.model = {
79 id: 1,
80 first_name: 'Jhon',
81 last_name: 'Snow',
82 age: 25,
83 email: 'test@onlab.us',
84 birthDate: '2016-04-18T23:44:16.883181Z',
85 enabled: true,
86 role: 'user', //select
87 a_permissions: [
88 ],
89 object_field: {
90 string: 'bar',
91 number: 1,
92 email: 'teo@onlab.us'
93 }
94 };
95
96 compileElement();
97 }));
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
104 it('should render 10 input field', () => {
105 // boolean are in the form model, but are not input
106 expect(Object.keys(isolatedScope.formField).length).toEqual(9);
107 const field = element[0].getElementsByTagName('input');
108 expect(field.length).toEqual(10);
109 });
110
111 it('should render 1 boolean field', () => {
112 expect($(element).find('.boolean-field > a').length).toEqual(2)
113 });
114
115 it('when clicking on action should invoke callback', () => {
116 const link = $(element).find('[role="button"]');
117 //console.log(link);
118 link.click();
119 // TODO : Check correct parameters
120 expect(cb).toHaveBeenCalled();
121
122 });
123
124 it('should set a custom label', () => {
125 let nameField = element[0].getElementsByClassName('form-group')[0];
126 let label = angular.element(nameField.getElementsByTagName('label')[0]).text()
127 expect(label).toEqual('Custom Label:');
128 });
129
130 it('should use the correct input type', () => {
131 expect($(element).find('[name="age"]')).toHaveAttr('type', 'number');
132 expect($(element).find('[name="birthDate"]')).toHaveAttr('type', 'date');
133 expect($(element).find('[name="email"]')).toHaveAttr('type', 'email');
134 });
135
136 xdescribe('the boolean field test', () => {
137
138 let setFalse, setTrue;
139
140 beforeEach(() => {
141 setFalse= $(element).find('.boolean-field > button:first-child');
142 setTrue = $(element).find('.boolean-field > button:last-child');
143 });
144
145 it('should change value to false', () => {
146 expect(isolatedScope.ngModel.enabled).toEqual(true);
147 setFalse.click();
148 expect(isolatedScope.ngModel.enabled).toEqual(false);
149 });
150
151 it('should change value to true', () => {
152 isolatedScope.ngModel.enabled = false;
153 scope.$apply();
154 expect(isolatedScope.ngModel.enabled).toEqual(false);
155 setTrue.click()
156 expect(isolatedScope.ngModel.enabled).toEqual(true);
157 });
158 });
159
160 describe('when a deep model is passed', () => {
161
162 beforeEach(inject(($rootScope) => {
163
164 scope = $rootScope.$new();
165
166 scope.config = {
167 exclude: ['excludedField'],
168 formName: 'testForm',
169 actions: [
170 {
171 label: 'Save',
172 icon: 'ok', // refers to bootstraps glyphicon
173 cb: cb,
174 class: 'success'
175 }
176 ],
177 fields: {
178 object_field: {
179 field_one: {
180 label: 'Custom Label'
181 }
182 }
183 }
184 };
185
186 scope.model = {
187 object_field: {
188 field_one: 'bar',
189 number: 1,
190 email: 'teo@onlab.us'
191 }
192 };
193
194 compileElement();
195 }));
196
197 it('should print nested field', () => {
198 expect($(element).find('input').length).toBe(3);
199 });
200
201 xit('should configure nested fields', () => {
202 let custom_label = $(element).find('input[name=field_one]').parent().find('label');
203 expect(custom_label.text()).toBe('Custom Label');
204 });
205 });
206 });
207 describe('when correctly configured for feedback', () => {
208
209 let fb = jasmine.createSpy('feedback').and.callFake(function(statusFlag) {
210 if(statusFlag){
211 scope.config.feedback.show = true;
212 scope.config.feedback.message = 'Form Submitted';
213 scope.config.feedback.type = 'success';
214 }
215 else {
216 scope.config.feedback.show = true;
217 scope.config.feedback.message = 'Error';
218 scope.config.feedback.type = 'danger';
219
220 }
221 });
222
223 beforeEach(()=> {
224 scope = rootScope.$new();
225 scope.config =
226 {
227
228 feedback: {
229 show: false,
230 message: 'Form submitted successfully !!!',
231 type: 'success'
232 },
233 actions: [
234 {
235 label: 'Save',
236 icon: 'ok', // refers to bootstraps glyphicon
237 cb: () => {},
238 class: 'success'
239 }
240 ]
241 };
242 scope.model={};
243 compileElement();
244 });
245
246 it('should not show feedback when loaded', () => {
247 expect($(element).find('xos-alert > div')).toHaveClass('alert alert-success ng-hide');
248 });
249
250 it('should show a success feedback', () => {
251 fb(true);
252 scope.$digest();
253 expect(isolatedScope.config.feedback.type).toEqual('success');
254 expect(fb).toHaveBeenCalledWith(true);
255 expect($(element).find('xos-alert > div')).toHaveClass('alert alert-success');
256 });
257
258 it('should show an error feedback', function() {
259 fb(false);
260 scope.$digest();
261 expect(isolatedScope.config.feedback.type).toEqual('danger');
262 expect(fb).toHaveBeenCalledWith(false);
263 expect($(element).find('xos-alert > div')).toHaveClass('alert alert-danger');
264 });
265 });
266
267 });
268 });
269})();