OLD | NEW |
(Empty) | |
| 1 library ng_model_date_like_spec; |
| 2 |
| 3 import '../_specs.dart'; |
| 4 import 'dart:html' as dom; |
| 5 |
| 6 /** |
| 7 * Note: some tests become noops for browsers that do not support the particular |
| 8 * date-like input being tested. |
| 9 */ |
| 10 void main() { |
| 11 //---------------------------------------------------------------------------- |
| 12 // Test fixture |
| 13 TestBed _; |
| 14 InputElement inputElement; |
| 15 |
| 16 //---------------------------------------------------------------------------- |
| 17 // Utility functions |
| 18 |
| 19 /// Wrapper for [valueAsDate] IDL attribute access, necessary due to |
| 20 /// https://code.google.com/p/dart/issues/detail?id=17625 |
| 21 DateTime inputValueAsDateWrapper(InputElement inputElement) { |
| 22 try { |
| 23 return inputElement.valueAsDate; |
| 24 } catch (e) { |
| 25 return null; |
| 26 } |
| 27 } |
| 28 |
| 29 DateTime inputValueAsDate() { |
| 30 DateTime dt = inputValueAsDateWrapper(inputElement); |
| 31 return (dt != null && !dt.isUtc) ? dt.toUtc() : dt; |
| 32 } |
| 33 |
| 34 bool isBrowser(String pattern) => |
| 35 dom.window.navigator.userAgent.indexOf(pattern) > 0; |
| 36 |
| 37 /** Use this function to determine if a non type=text or type=textarea |
| 38 * input is supported by the browser under test. If [shouldWorkForChrome] |
| 39 * and then browser is Chrome, then `expect()` the input element to be support
ed. |
| 40 */ |
| 41 bool nonTextInputElementSupported(InputElement input, {bool |
| 42 shouldWorkForChrome: true}) { |
| 43 const testValue = '!'; // any string that is not valid for the input. |
| 44 String savedValue = input.value; |
| 45 input.value = testValue; |
| 46 if (input.value == testValue) { |
| 47 if (shouldWorkForChrome) expect(isBrowser('Chrome')).toBeFalsy(); |
| 48 return false; |
| 49 } |
| 50 input.value = savedValue; |
| 51 return true; |
| 52 } |
| 53 |
| 54 //---------------------------------------------------------------------------- |
| 55 // Tests |
| 56 |
| 57 describe('ng-model for date-like input', () { |
| 58 beforeEach((TestBed tb) => _ = tb); |
| 59 beforeEach(() => inputElement = null); |
| 60 |
| 61 describe('type=date', () { |
| 62 final DateTime dateTime = new DateTime.utc(2014, 3, 29); |
| 63 final String dtAsString = "2014-03-29"; |
| 64 |
| 65 it('should update input value from DateTime model property', () { |
| 66 _.compile('<input type=date ng-model=model>'); |
| 67 inputElement = _.rootElement as dom.InputElement; |
| 68 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 69 |
| 70 _.rootScope.apply(); |
| 71 expect(inputValueAsDate()).toBeNull(); |
| 72 _.rootScope.context['model'] = dateTime; |
| 73 _.rootScope.apply(); |
| 74 expect(inputValueAsDate()).toEqual(dateTime); |
| 75 }); |
| 76 |
| 77 it('should update input value from String model property', () { |
| 78 _.compile('<input type=date ng-bind-type=string ng-model=model>'); |
| 79 inputElement = _.rootElement as dom.InputElement; |
| 80 // if(!nonTextInputElementSupported(inputElement)) return; // skip test |
| 81 |
| 82 _.rootScope.apply(); |
| 83 expect(inputElement.value).toEqual(''); |
| 84 _.rootScope.context['model'] = dtAsString; |
| 85 _.rootScope.apply(); |
| 86 expect(inputElement.value).toEqual(dtAsString); |
| 87 }); |
| 88 |
| 89 it('should update model from the input "valueAsDate" IDL attribute', () { |
| 90 _.compile('<input type=date ng-model=model>'); |
| 91 inputElement = _.rootElement as dom.InputElement; |
| 92 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 93 |
| 94 inputElement.valueAsDate = dateTime; |
| 95 _.triggerEvent(inputElement, 'change'); |
| 96 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 97 }); |
| 98 |
| 99 it('should update model from the input "value" IDL attribute', () { |
| 100 _.compile('<input type=date ng-model=model>'); |
| 101 inputElement = _.rootElement as dom.InputElement; |
| 102 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 103 |
| 104 inputElement.value = dtAsString; |
| 105 _.triggerEvent(inputElement, 'change'); |
| 106 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 107 }); |
| 108 |
| 109 it('should clear input when model is the empty string', () { |
| 110 _.compile('<input type=date ng-model=model>'); |
| 111 inputElement = _.rootElement as dom.InputElement; |
| 112 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 113 |
| 114 _.rootScope.context['model'] = dateTime; |
| 115 _.rootScope.apply(); |
| 116 expect(inputValueAsDate()).toEqual(dateTime); |
| 117 |
| 118 _.rootScope.context['model'] = ''; |
| 119 _.rootScope.apply(); |
| 120 expect(inputValueAsDate()).toBeNull(); |
| 121 expect(inputElement.value).toEqual(''); |
| 122 }); |
| 123 |
| 124 it('should clear valid input when model is set to null', () { |
| 125 _.compile('<input type=date ng-model=model>'); |
| 126 inputElement = _.rootElement as dom.InputElement; |
| 127 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 128 |
| 129 _.rootScope.context['model'] = dateTime; |
| 130 _.rootScope.apply(); |
| 131 expect(inputValueAsDate()).toEqual(dateTime); |
| 132 |
| 133 _.rootScope.context['model'] = null; |
| 134 _.rootScope.apply(); |
| 135 expect(inputValueAsDate()).toBeNull(); |
| 136 expect(inputElement.value).toEqual(''); |
| 137 }); |
| 138 }); |
| 139 |
| 140 describe('type=time', () { |
| 141 final DateTime dateTime = new DateTime.utc(1970, 1, 1, 23, 45, 16); |
| 142 final String dtAsString = "23:45:16"; |
| 143 |
| 144 it('should update input value from DateTime model property', () { |
| 145 _.compile('<input type=time ng-model=model>'); |
| 146 inputElement = _.rootElement as dom.InputElement; |
| 147 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 148 |
| 149 _.rootScope.apply(); |
| 150 expect(inputValueAsDate()).toBeNull(); |
| 151 _.rootScope.context['model'] = dateTime; |
| 152 _.rootScope.apply(); |
| 153 expect(inputValueAsDate()).toEqual(dateTime); |
| 154 }); |
| 155 |
| 156 it('should update input value from String model property', () { |
| 157 _.compile('<input type=time ng-bind-type=string ng-model=model>'); |
| 158 inputElement = _.rootElement as dom.InputElement; |
| 159 // if(!nonTextInputElementSupported(inputElement)) return; // skip test |
| 160 |
| 161 _.rootScope.apply(); |
| 162 expect(inputElement.value).toEqual(''); |
| 163 _.rootScope.context['model'] = dtAsString; |
| 164 _.rootScope.apply(); |
| 165 expect(inputElement.value).toEqual(dtAsString); |
| 166 }); |
| 167 |
| 168 it('should update model from the input "valueAsDate" IDL attribute', () { |
| 169 _.compile('<input type=time ng-model=model>'); |
| 170 inputElement = _.rootElement as dom.InputElement; |
| 171 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 172 |
| 173 inputElement.valueAsDate = dateTime; |
| 174 _.triggerEvent(inputElement, 'change'); |
| 175 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 176 }); |
| 177 |
| 178 it('should update model from the input "value" IDL attribute', () { |
| 179 _.compile('<input type=time ng-model=model>'); |
| 180 inputElement = _.rootElement as dom.InputElement; |
| 181 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 182 |
| 183 inputElement.value = dtAsString; |
| 184 _.triggerEvent(inputElement, 'change'); |
| 185 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 186 }); |
| 187 |
| 188 it('should clear input when model is the empty string', () { |
| 189 _.compile('<input type=time ng-model=model>'); |
| 190 inputElement = _.rootElement as dom.InputElement; |
| 191 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 192 |
| 193 _.rootScope.context['model'] = dateTime; |
| 194 _.rootScope.apply(); |
| 195 expect(inputValueAsDate()).toEqual(dateTime); |
| 196 |
| 197 _.rootScope.context['model'] = ''; |
| 198 _.rootScope.apply(); |
| 199 expect(inputValueAsDate()).toBeNull(); |
| 200 expect(inputElement.value).toEqual(''); |
| 201 }); |
| 202 |
| 203 it('should clear valid input when model is set to null', () { |
| 204 _.compile('<input type=time ng-model=model>'); |
| 205 inputElement = _.rootElement as dom.InputElement; |
| 206 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 207 |
| 208 _.rootScope.context['model'] = dateTime; |
| 209 _.rootScope.apply(); |
| 210 expect(inputValueAsDate()).toEqual(dateTime); |
| 211 |
| 212 _.rootScope.context['model'] = null; |
| 213 _.rootScope.apply(); |
| 214 expect(inputValueAsDate()).toBeNull(); |
| 215 expect(inputElement.value).toEqual(''); |
| 216 }); |
| 217 }); |
| 218 |
| 219 describe('type=datetime-local', () { |
| 220 final DateTime dt = new DateTime.utc(2014, 03, 30, 23, 45, 16); |
| 221 final num dateTime = dt.millisecondsSinceEpoch; |
| 222 final String dtAsString = "2014-03-30T23:45:16"; |
| 223 |
| 224 it('should update input value from num model', () { |
| 225 _.compile('<input type=datetime-local ng-model=model>'); |
| 226 inputElement = _.rootElement as dom.InputElement; |
| 227 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 228 |
| 229 _.rootScope.apply(); |
| 230 expect(inputElement.valueAsNumber.isNaN).toBeTruthy(); |
| 231 _.rootScope.context['model'] = dateTime; |
| 232 _.rootScope.apply(); |
| 233 expect(inputElement.valueAsNumber).toEqual(dateTime); |
| 234 }); |
| 235 |
| 236 it('should update input value from String model property', () { |
| 237 _.compile( |
| 238 '<input type=datetime-local ng-bind-type=string ng-model=model>'); |
| 239 inputElement = _.rootElement as dom.InputElement; |
| 240 |
| 241 _.rootScope.apply(); |
| 242 expect(inputElement.value).toEqual(''); |
| 243 _.rootScope.context['model'] = dtAsString; |
| 244 _.rootScope.apply(); |
| 245 expect(inputElement.value).toEqual(dtAsString); |
| 246 }); |
| 247 |
| 248 it('should update model from the input "valueAsNumber" IDL attribute', () |
| 249 { |
| 250 _.compile('<input type=datetime-local ng-model=model>'); |
| 251 inputElement = _.rootElement as dom.InputElement; |
| 252 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 253 |
| 254 inputElement.valueAsNumber = dateTime; |
| 255 expect(inputElement.valueAsNumber).toEqual(dateTime); |
| 256 _.triggerEvent(inputElement, 'change'); |
| 257 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 258 }); |
| 259 |
| 260 it('should update model from the input "value" IDL attribute', () { |
| 261 _.compile('<input type=datetime-local ng-model=model>'); |
| 262 inputElement = _.rootElement as dom.InputElement; |
| 263 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 264 |
| 265 inputElement.value = dtAsString; |
| 266 _.triggerEvent(inputElement, 'change'); |
| 267 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 268 }); |
| 269 |
| 270 it('should clear input when model is the empty string', () { |
| 271 _.compile('<input type=datetime-local ng-model=model>'); |
| 272 inputElement = _.rootElement as dom.InputElement; |
| 273 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 274 |
| 275 _.rootScope.context['model'] = dateTime; |
| 276 _.rootScope.apply(); |
| 277 expect(inputElement.valueAsNumber).toEqual(dateTime); |
| 278 |
| 279 _.rootScope.context['model'] = ''; |
| 280 _.rootScope.apply(); |
| 281 expect(inputElement.valueAsNumber.isNaN).toBeTruthy(); |
| 282 expect(inputElement.value).toEqual(''); |
| 283 }); |
| 284 |
| 285 it('should clear valid input when model is set to null', () { |
| 286 _.compile('<input type=datetime-local ng-model=model>'); |
| 287 inputElement = _.rootElement as dom.InputElement; |
| 288 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 289 |
| 290 _.rootScope.context['model'] = dateTime; |
| 291 _.rootScope.apply(); |
| 292 expect(inputElement.valueAsNumber).toEqual(dateTime); |
| 293 |
| 294 _.rootScope.context['model'] = null; |
| 295 _.rootScope.apply(); |
| 296 expect(inputElement.valueAsNumber.isNaN).toBeTruthy(); |
| 297 expect(inputElement.value).toEqual(''); |
| 298 }); |
| 299 }); |
| 300 |
| 301 describe('type=datetime', () { |
| 302 /* |
| 303 * Note: no browser that I know of supports type=datetime other than |
| 304 * treating it as an ordinary type=text input. Hence, no tests |
| 305 * are added for type=datetime other than accessing its value as a string. |
| 306 */ |
| 307 final DateTime dateTime = new DateTime.utc(2014, 03, 30, 23, 45, 16); |
| 308 final String dtAsString = "2014-03-30T23:45:16"; |
| 309 |
| 310 it('should update input value from String model property', () { |
| 311 _.compile('<input type=datetime ng-bind-type=string ng-model=model>'); |
| 312 inputElement = _.rootElement as dom.InputElement; |
| 313 |
| 314 _.rootScope.apply(); |
| 315 expect(inputElement.value).toEqual(''); |
| 316 _.rootScope.context['model'] = dtAsString; |
| 317 _.rootScope.apply(); |
| 318 expect(inputElement.value).toEqual(dtAsString); |
| 319 }); |
| 320 |
| 321 it('should update model from the input "value" IDL attribute', () { |
| 322 _.compile('<input type=datetime ng-bind-type=string ng-model=model>'); |
| 323 inputElement = _.rootElement as dom.InputElement; |
| 324 if (!nonTextInputElementSupported(inputElement, shouldWorkForChrome: |
| 325 false)) return; // skip test |
| 326 |
| 327 inputElement.value = dtAsString; |
| 328 _.triggerEvent(inputElement, 'change'); |
| 329 expect(_.rootScope.context['model']).toEqual(dtAsString); |
| 330 }); |
| 331 }); |
| 332 |
| 333 describe('type=month', () { |
| 334 final DateTime dateTime = new DateTime.utc(2014, 3); |
| 335 final String dtAsString = "2014-03"; |
| 336 |
| 337 it('should update input value from DateTime model property', () { |
| 338 _.compile('<input type=month ng-model=model>'); |
| 339 inputElement = _.rootElement as dom.InputElement; |
| 340 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 341 |
| 342 _.rootScope.apply(); |
| 343 expect(inputValueAsDate()).toBeNull(); |
| 344 _.rootScope.context['model'] = dateTime; |
| 345 _.rootScope.apply(); |
| 346 expect(inputValueAsDate()).toEqual(dateTime); |
| 347 }); |
| 348 |
| 349 it('should update input value from String model property', () { |
| 350 _.compile('<input type=month ng-bind-type=string ng-model=model>'); |
| 351 inputElement = _.rootElement as dom.InputElement; |
| 352 |
| 353 _.rootScope.apply(); |
| 354 expect(inputElement.value).toEqual(''); |
| 355 _.rootScope.context['model'] = dtAsString; |
| 356 _.rootScope.apply(); |
| 357 expect(inputElement.value).toEqual(dtAsString); |
| 358 }); |
| 359 |
| 360 it('should update model from the input "valueAsDate" IDL attribute', () { |
| 361 _.compile('<input type=month ng-model=model>'); |
| 362 inputElement = _.rootElement as dom.InputElement; |
| 363 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 364 |
| 365 inputElement.valueAsDate = dateTime; |
| 366 _.triggerEvent(inputElement, 'change'); |
| 367 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 368 }); |
| 369 |
| 370 it('should update model from the input "value" IDL attribute', () { |
| 371 _.compile('<input type=month ng-model=model>'); |
| 372 inputElement = _.rootElement as dom.InputElement; |
| 373 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 374 |
| 375 inputElement.value = dtAsString; |
| 376 _.triggerEvent(inputElement, 'change'); |
| 377 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 378 }); |
| 379 |
| 380 it('should clear input when model is the empty string', () { |
| 381 _.compile('<input type=month ng-model=model>'); |
| 382 inputElement = _.rootElement as dom.InputElement; |
| 383 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 384 |
| 385 _.rootScope.context['model'] = dateTime; |
| 386 _.rootScope.apply(); |
| 387 expect(inputValueAsDate()).toEqual(dateTime); |
| 388 |
| 389 _.rootScope.context['model'] = ''; |
| 390 _.rootScope.apply(); |
| 391 expect(inputValueAsDate()).toBeNull(); |
| 392 expect(inputElement.value).toEqual(''); |
| 393 }); |
| 394 |
| 395 it('should clear valid input when model is set to null', () { |
| 396 _.compile('<input type=month ng-model=model>'); |
| 397 inputElement = _.rootElement as dom.InputElement; |
| 398 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 399 |
| 400 _.rootScope.context['model'] = dateTime; |
| 401 _.rootScope.apply(); |
| 402 expect(inputValueAsDate()).toEqual(dateTime); |
| 403 |
| 404 _.rootScope.context['model'] = null; |
| 405 _.rootScope.apply(); |
| 406 expect(inputValueAsDate()).toBeNull(); |
| 407 expect(inputElement.value).toEqual(''); |
| 408 }); |
| 409 }); |
| 410 |
| 411 describe('type=week', () { |
| 412 final DateTime dateTime = new DateTime.utc(2014, 3, 31); |
| 413 final String dtAsString = "2014-W14"; |
| 414 |
| 415 it('should update input value from DateTime model property', () { |
| 416 _.compile('<input type=week ng-model=model>'); |
| 417 inputElement = _.rootElement as dom.InputElement; |
| 418 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 419 |
| 420 _.rootScope.apply(); |
| 421 expect(inputValueAsDate()).toBeNull(); |
| 422 _.rootScope.context['model'] = dateTime; |
| 423 _.rootScope.apply(); |
| 424 expect(inputValueAsDate()).toEqual(dateTime); |
| 425 }); |
| 426 |
| 427 it('should update input value from String model property', () { |
| 428 _.compile('<input type=week ng-bind-type=string ng-model=model>'); |
| 429 inputElement = _.rootElement as dom.InputElement; |
| 430 |
| 431 _.rootScope.apply(); |
| 432 expect(inputElement.value).toEqual(''); |
| 433 _.rootScope.context['model'] = dtAsString; |
| 434 _.rootScope.apply(); |
| 435 expect(inputElement.value).toEqual(dtAsString); |
| 436 }); |
| 437 |
| 438 it('should update model from the input "valueAsDate" IDL attribute', () { |
| 439 _.compile('<input type=week ng-model=model>'); |
| 440 inputElement = _.rootElement as dom.InputElement; |
| 441 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 442 |
| 443 inputElement.valueAsDate = dateTime; |
| 444 _.triggerEvent(inputElement, 'change'); |
| 445 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 446 }); |
| 447 |
| 448 it('should update model from the input "value" IDL attribute', () { |
| 449 _.compile('<input type=week ng-model=model>'); |
| 450 inputElement = _.rootElement as dom.InputElement; |
| 451 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 452 |
| 453 inputElement.value = dtAsString; |
| 454 _.triggerEvent(inputElement, 'change'); |
| 455 expect(_.rootScope.context['model']).toEqual(dateTime); |
| 456 }); |
| 457 |
| 458 it('should clear input when model is the empty string', () { |
| 459 _.compile('<input type=week ng-model=model>'); |
| 460 inputElement = _.rootElement as dom.InputElement; |
| 461 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 462 |
| 463 _.rootScope.context['model'] = dateTime; |
| 464 _.rootScope.apply(); |
| 465 expect(inputValueAsDate()).toEqual(dateTime); |
| 466 |
| 467 _.rootScope.context['model'] = ''; |
| 468 _.rootScope.apply(); |
| 469 expect(inputValueAsDate()).toBeNull(); |
| 470 expect(inputElement.value).toEqual(''); |
| 471 }); |
| 472 |
| 473 it('should clear valid input when model is set to null', () { |
| 474 _.compile('<input type=week ng-model=model>'); |
| 475 inputElement = _.rootElement as dom.InputElement; |
| 476 if (!nonTextInputElementSupported(inputElement)) return; // skip test |
| 477 |
| 478 _.rootScope.context['model'] = dateTime; |
| 479 _.rootScope.apply(); |
| 480 expect(inputValueAsDate()).toEqual(dateTime); |
| 481 |
| 482 _.rootScope.context['model'] = null; |
| 483 _.rootScope.apply(); |
| 484 expect(inputValueAsDate()).toBeNull(); |
| 485 expect(inputElement.value).toEqual(''); |
| 486 }); |
| 487 }); |
| 488 }); |
| 489 } |
OLD | NEW |