Matteo Scandolo | 686547a | 2017-08-08 13:05:25 -0700 | [diff] [blame^] | 1 | |
| 2 | /* |
| 3 | * Copyright 2017-present Open Networking Foundation |
| 4 | |
| 5 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 | * you may not use this file except in compliance with the License. |
| 7 | * You may obtain a copy of the License at |
| 8 | |
| 9 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | |
| 11 | * Unless required by applicable law or agreed to in writing, software |
| 12 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 | * See the License for the specific language governing permissions and |
| 15 | * limitations under the License. |
| 16 | */ |
| 17 | |
| 18 | |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 19 | /** |
| 20 | * © OpenCORD |
| 21 | * |
| 22 | * Created by teone on 4/18/16. |
| 23 | */ |
| 24 | |
| 25 | (function () { |
| 26 | 'use strict'; |
| 27 | |
| 28 | let element, scope, isolatedScope, rootScope, compile; |
| 29 | |
| 30 | const compileElement = () => { |
| 31 | |
| 32 | if(!scope){ |
| 33 | scope = rootScope.$new(); |
| 34 | } |
| 35 | |
| 36 | element = angular.element(`<xos-form config="config" ng-model="model"></xos-form>`); |
| 37 | compile(element)(scope); |
| 38 | scope.$digest(); |
| 39 | isolatedScope = element.isolateScope().vm; |
| 40 | } |
| 41 | |
| 42 | describe('The xos.helper module', function(){ |
| 43 | |
| 44 | describe('The xos-form component', () => { |
| 45 | |
| 46 | |
| 47 | beforeEach(module('xos.helpers')); |
| 48 | |
| 49 | beforeEach(inject(($compile, $rootScope) => { |
| 50 | rootScope = $rootScope; |
| 51 | compile = $compile; |
| 52 | })); |
| 53 | |
| 54 | it('should throw an error if no config is specified', () => { |
| 55 | function errorFunctionWrapper(){ |
| 56 | compileElement(); |
| 57 | } |
| 58 | expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide a configuration via the "config" attribute')); |
| 59 | }); |
| 60 | |
| 61 | it('should throw an error if no actions is specified', () => { |
| 62 | function errorFunctionWrapper(){ |
| 63 | scope = rootScope.$new(); |
| 64 | scope.config = 'green'; |
| 65 | compileElement(); |
| 66 | } |
| 67 | expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide an action list in the configuration')); |
| 68 | }); |
| 69 | |
| 70 | describe('when correctly configured', () => { |
Steven Burrows | 8481848 | 2016-09-29 15:33:46 -0700 | [diff] [blame] | 71 | |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 72 | let cb = jasmine.createSpy('callback'); |
| 73 | |
| 74 | beforeEach(inject(($rootScope) => { |
| 75 | |
| 76 | scope = $rootScope.$new(); |
| 77 | |
| 78 | scope.config = { |
| 79 | exclude: ['excludedField'], |
| 80 | formName: 'testForm', |
| 81 | actions: [ |
| 82 | { |
| 83 | label: 'Save', |
| 84 | icon: 'ok', // refers to bootstraps glyphicon |
| 85 | cb: cb, |
| 86 | class: 'success' |
| 87 | } |
| 88 | ], |
Steven Burrows | 8481848 | 2016-09-29 15:33:46 -0700 | [diff] [blame] | 89 | order: ['first_name', 'age', 'last_name'], |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 90 | fields: { |
| 91 | first_name: { |
| 92 | label: 'Custom Label' |
| 93 | } |
| 94 | } |
| 95 | }; |
| 96 | |
| 97 | scope.model = { |
| 98 | id: 1, |
| 99 | first_name: 'Jhon', |
| 100 | last_name: 'Snow', |
| 101 | age: 25, |
| 102 | email: 'test@onlab.us', |
| 103 | birthDate: '2016-04-18T23:44:16.883181Z', |
| 104 | enabled: true, |
| 105 | role: 'user', //select |
| 106 | a_permissions: [ |
| 107 | ], |
| 108 | object_field: { |
| 109 | string: 'bar', |
| 110 | number: 1, |
| 111 | email: 'teo@onlab.us' |
| 112 | } |
| 113 | }; |
| 114 | |
| 115 | compileElement(); |
| 116 | })); |
| 117 | |
| 118 | it('should add excluded properties to the list', () => { |
| 119 | let expected = ['id', 'validators', 'created', 'updated', 'deleted', 'backend_status', 'excludedField']; |
| 120 | expect(isolatedScope.excludedField).toEqual(expected); |
| 121 | }); |
| 122 | |
| 123 | it('should render 10 input field', () => { |
Matteo Scandolo | 65116c4 | 2016-09-21 17:06:23 -0700 | [diff] [blame] | 124 | // boolean and arrays are in the form model, but are not input |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 125 | expect(Object.keys(isolatedScope.formField).length).toEqual(9); |
| 126 | const field = element[0].getElementsByTagName('input'); |
Matteo Scandolo | 65116c4 | 2016-09-21 17:06:23 -0700 | [diff] [blame] | 127 | expect(field.length).toEqual(9); |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 128 | }); |
| 129 | |
| 130 | it('should render 1 boolean field', () => { |
| 131 | expect($(element).find('.boolean-field > a').length).toEqual(2) |
| 132 | }); |
| 133 | |
| 134 | it('when clicking on action should invoke callback', () => { |
| 135 | const link = $(element).find('[role="button"]'); |
| 136 | //console.log(link); |
| 137 | link.click(); |
| 138 | // TODO : Check correct parameters |
| 139 | expect(cb).toHaveBeenCalled(); |
| 140 | |
| 141 | }); |
| 142 | |
| 143 | it('should set a custom label', () => { |
| 144 | let nameField = element[0].getElementsByClassName('form-group')[0]; |
| 145 | let label = angular.element(nameField.getElementsByTagName('label')[0]).text() |
| 146 | expect(label).toEqual('Custom Label:'); |
| 147 | }); |
| 148 | |
| 149 | it('should use the correct input type', () => { |
| 150 | expect($(element).find('[name="age"]')).toHaveAttr('type', 'number'); |
| 151 | expect($(element).find('[name="birthDate"]')).toHaveAttr('type', 'date'); |
| 152 | expect($(element).find('[name="email"]')).toHaveAttr('type', 'email'); |
| 153 | }); |
| 154 | |
Steven Burrows | 8481848 | 2016-09-29 15:33:46 -0700 | [diff] [blame] | 155 | it('should be in order', () => { |
| 156 | expect(Object.keys(isolatedScope.formField)[0]).toEqual('first_name'); |
| 157 | expect(Object.keys(isolatedScope.formField)[1]).toEqual('age'); |
| 158 | expect(Object.keys(isolatedScope.formField)[2]).toEqual('last_name'); |
| 159 | }); |
| 160 | |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 161 | xdescribe('the boolean field test', () => { |
| 162 | |
| 163 | let setFalse, setTrue; |
| 164 | |
| 165 | beforeEach(() => { |
| 166 | setFalse= $(element).find('.boolean-field > button:first-child'); |
| 167 | setTrue = $(element).find('.boolean-field > button:last-child'); |
| 168 | }); |
| 169 | |
| 170 | it('should change value to false', () => { |
| 171 | expect(isolatedScope.ngModel.enabled).toEqual(true); |
| 172 | setFalse.click(); |
| 173 | expect(isolatedScope.ngModel.enabled).toEqual(false); |
| 174 | }); |
| 175 | |
| 176 | it('should change value to true', () => { |
| 177 | isolatedScope.ngModel.enabled = false; |
| 178 | scope.$apply(); |
| 179 | expect(isolatedScope.ngModel.enabled).toEqual(false); |
| 180 | setTrue.click() |
| 181 | expect(isolatedScope.ngModel.enabled).toEqual(true); |
| 182 | }); |
| 183 | }); |
| 184 | |
| 185 | describe('when a deep model is passed', () => { |
| 186 | |
| 187 | beforeEach(inject(($rootScope) => { |
| 188 | |
| 189 | scope = $rootScope.$new(); |
| 190 | |
| 191 | scope.config = { |
| 192 | exclude: ['excludedField'], |
| 193 | formName: 'testForm', |
| 194 | actions: [ |
| 195 | { |
| 196 | label: 'Save', |
| 197 | icon: 'ok', // refers to bootstraps glyphicon |
| 198 | cb: cb, |
| 199 | class: 'success' |
| 200 | } |
| 201 | ], |
| 202 | fields: { |
| 203 | object_field: { |
| 204 | field_one: { |
| 205 | label: 'Custom Label' |
| 206 | } |
| 207 | } |
| 208 | } |
| 209 | }; |
| 210 | |
| 211 | scope.model = { |
| 212 | object_field: { |
| 213 | field_one: 'bar', |
| 214 | number: 1, |
| 215 | email: 'teo@onlab.us' |
| 216 | } |
| 217 | }; |
| 218 | |
| 219 | compileElement(); |
| 220 | })); |
| 221 | |
| 222 | it('should print nested field', () => { |
| 223 | expect($(element).find('input').length).toBe(3); |
| 224 | }); |
| 225 | |
| 226 | xit('should configure nested fields', () => { |
| 227 | let custom_label = $(element).find('input[name=field_one]').parent().find('label'); |
| 228 | expect(custom_label.text()).toBe('Custom Label'); |
| 229 | }); |
| 230 | }); |
| 231 | }); |
| 232 | describe('when correctly configured for feedback', () => { |
| 233 | |
| 234 | let fb = jasmine.createSpy('feedback').and.callFake(function(statusFlag) { |
| 235 | if(statusFlag){ |
| 236 | scope.config.feedback.show = true; |
| 237 | scope.config.feedback.message = 'Form Submitted'; |
| 238 | scope.config.feedback.type = 'success'; |
| 239 | } |
| 240 | else { |
| 241 | scope.config.feedback.show = true; |
| 242 | scope.config.feedback.message = 'Error'; |
| 243 | scope.config.feedback.type = 'danger'; |
| 244 | |
| 245 | } |
| 246 | }); |
| 247 | |
| 248 | beforeEach(()=> { |
| 249 | scope = rootScope.$new(); |
| 250 | scope.config = |
| 251 | { |
| 252 | |
| 253 | feedback: { |
| 254 | show: false, |
| 255 | message: 'Form submitted successfully !!!', |
| 256 | type: 'success' |
| 257 | }, |
| 258 | actions: [ |
| 259 | { |
| 260 | label: 'Save', |
| 261 | icon: 'ok', // refers to bootstraps glyphicon |
| 262 | cb: () => {}, |
| 263 | class: 'success' |
| 264 | } |
| 265 | ] |
| 266 | }; |
| 267 | scope.model={}; |
| 268 | compileElement(); |
| 269 | }); |
| 270 | |
| 271 | it('should not show feedback when loaded', () => { |
| 272 | expect($(element).find('xos-alert > div')).toHaveClass('alert alert-success ng-hide'); |
| 273 | }); |
| 274 | |
| 275 | it('should show a success feedback', () => { |
| 276 | fb(true); |
| 277 | scope.$digest(); |
| 278 | expect(isolatedScope.config.feedback.type).toEqual('success'); |
| 279 | expect(fb).toHaveBeenCalledWith(true); |
| 280 | expect($(element).find('xos-alert > div')).toHaveClass('alert alert-success'); |
| 281 | }); |
| 282 | |
| 283 | it('should show an error feedback', function() { |
| 284 | fb(false); |
| 285 | scope.$digest(); |
| 286 | expect(isolatedScope.config.feedback.type).toEqual('danger'); |
| 287 | expect(fb).toHaveBeenCalledWith(false); |
| 288 | expect($(element).find('xos-alert > div')).toHaveClass('alert alert-danger'); |
| 289 | }); |
| 290 | }); |
| 291 | |
| 292 | }); |
| 293 | }); |
| 294 | })(); |