diff options
Diffstat (limited to 'test')
| -rw-r--r-- | test/BinderSpec.js | 5 | ||||
| -rw-r--r-- | test/service/formFactorySpec.js | 206 | ||||
| -rw-r--r-- | test/widget/formSpec.js | 207 | ||||
| -rw-r--r-- | test/widget/inputSpec.js | 1255 | ||||
| -rw-r--r-- | test/widget/selectSpec.js | 806 |
5 files changed, 1435 insertions, 1044 deletions
diff --git a/test/BinderSpec.js b/test/BinderSpec.js index 5e27fd0f..eb916d00 100644 --- a/test/BinderSpec.js +++ b/test/BinderSpec.js @@ -156,7 +156,7 @@ describe('Binder', function() { expect(html.indexOf('action="foo();"')).toBeGreaterThan(0); }); - it('RepeaterAdd', inject(function($rootScope, $compile, $browser) { + it('RepeaterAdd', inject(function($rootScope, $compile) { element = $compile('<div><input type="text" ng:model="item.x" ng:repeat="item in items"></div>')($rootScope); $rootScope.items = [{x:'a'}, {x:'b'}]; $rootScope.$apply(); @@ -166,8 +166,7 @@ describe('Binder', function() { expect(second.val()).toEqual('b'); first.val('ABC'); - browserTrigger(first, 'keydown'); - $browser.defer.flush(); + browserTrigger(first, 'blur'); expect($rootScope.items[0].x).toEqual('ABC'); })); diff --git a/test/service/formFactorySpec.js b/test/service/formFactorySpec.js deleted file mode 100644 index 1a23aa49..00000000 --- a/test/service/formFactorySpec.js +++ /dev/null @@ -1,206 +0,0 @@ -'use strict'; - -describe('$formFactory', function() { - - it('should have global form', inject(function($rootScope, $formFactory) { - expect($formFactory.rootForm).toBeTruthy(); - expect($formFactory.rootForm.$createWidget).toBeTruthy(); - })); - - - describe('new form', function() { - var form; - var scope; - var log; - - function WidgetCtrl($formFactory, $scope) { - log += '<init>'; - $scope.$render = function() { - log += '$render();'; - }; - $scope.$on('$validate', function(e){ - log += '$validate();'; - }); - - this.$formFactory = $formFactory; - } - - WidgetCtrl.$inject = ['$formFactory', '$scope']; - - WidgetCtrl.prototype = { - getFormFactory: function() { - return this.$formFactory; - } - }; - - beforeEach(inject(function($rootScope, $formFactory) { - log = ''; - scope = $rootScope.$new(); - form = $formFactory(scope); - })); - - describe('$createWidget', function() { - var widget; - - beforeEach(function() { - widget = form.$createWidget({ - scope:scope, - model:'text', - alias:'text', - controller:WidgetCtrl - }); - }); - - - describe('data flow', function() { - it('should have status properties', inject(function($rootScope, $formFactory) { - expect(widget.$error).toEqual({}); - expect(widget.$valid).toBe(true); - expect(widget.$invalid).toBe(false); - })); - - - it('should update view when model changes', inject(function($rootScope, $formFactory) { - scope.text = 'abc'; - scope.$digest(); - expect(log).toEqual('<init>$validate();$render();'); - expect(widget.$modelValue).toEqual('abc'); - - scope.text = 'xyz'; - scope.$digest(); - expect(widget.$modelValue).toEqual('xyz'); - - })); - }); - - - describe('validation', function() { - it('should update state on error', inject(function($rootScope, $formFactory) { - widget.$emit('$invalid', 'E'); - expect(widget.$valid).toEqual(false); - expect(widget.$invalid).toEqual(true); - - widget.$emit('$valid', 'E'); - expect(widget.$valid).toEqual(true); - expect(widget.$invalid).toEqual(false); - })); - - - it('should have called the model setter before the validation', inject(function($rootScope, $formFactory) { - var modelValue; - widget.$on('$validate', function() { - modelValue = scope.text; - }); - widget.$emit('$viewChange', 'abc'); - expect(modelValue).toEqual('abc'); - })); - - - describe('form', function() { - it('should invalidate form when widget is invalid', inject(function($rootScope, $formFactory) { - expect(form.$error).toEqual({}); - expect(form.$valid).toEqual(true); - expect(form.$invalid).toEqual(false); - - widget.$emit('$invalid', 'REASON'); - - expect(form.$error.REASON).toEqual([widget]); - expect(form.$valid).toEqual(false); - expect(form.$invalid).toEqual(true); - - var widget2 = form.$createWidget({ - scope:scope, model:'text', - alias:'text', - controller:WidgetCtrl - }); - widget2.$emit('$invalid', 'REASON'); - - expect(form.$error.REASON).toEqual([widget, widget2]); - expect(form.$valid).toEqual(false); - expect(form.$invalid).toEqual(true); - - widget.$emit('$valid', 'REASON'); - - expect(form.$error.REASON).toEqual([widget2]); - expect(form.$valid).toEqual(false); - expect(form.$invalid).toEqual(true); - - widget2.$emit('$valid', 'REASON'); - - expect(form.$error).toEqual({}); - expect(form.$valid).toEqual(true); - expect(form.$invalid).toEqual(false); - })); - }); - - }); - - describe('id assignment', function() { - it('should default to name expression', inject(function($rootScope, $formFactory) { - expect(form.text).toEqual(widget); - })); - - - it('should use ng:id', inject(function($rootScope, $formFactory) { - widget = form.$createWidget({ - scope:scope, - model:'text', - alias:'my.id', - controller:WidgetCtrl - }); - expect(form['my.id']).toEqual(widget); - })); - - - it('should not override existing names', inject(function($rootScope, $formFactory) { - var widget2 = form.$createWidget({ - scope:scope, - model:'text', - alias:'text', - controller:WidgetCtrl - }); - expect(form.text).toEqual(widget); - expect(widget2).not.toEqual(widget); - })); - }); - - describe('dealocation', function() { - it('should dealocate', inject(function($rootScope, $formFactory) { - var widget2 = form.$createWidget({ - scope:scope, - model:'text', - alias:'myId', - controller:WidgetCtrl - }); - expect(form.myId).toEqual(widget2); - var widget3 = form.$createWidget({ - scope:scope, - model:'text', - alias:'myId', - controller:WidgetCtrl - }); - expect(form.myId).toEqual(widget2); - - widget3.$destroy(); - expect(form.myId).toEqual(widget2); - - widget2.$destroy(); - expect(form.myId).toBeUndefined(); - })); - - - it('should remove invalid fields from errors, when child widget removed', inject(function($rootScope, $formFactory) { - widget.$emit('$invalid', 'MyError'); - - expect(form.$error.MyError).toEqual([widget]); - expect(form.$invalid).toEqual(true); - - widget.$destroy(); - - expect(form.$error.MyError).toBeUndefined(); - expect(form.$invalid).toEqual(false); - })); - }); - }); - }); -}); diff --git a/test/widget/formSpec.js b/test/widget/formSpec.js index f2e90d9e..bc5f3ea7 100644 --- a/test/widget/formSpec.js +++ b/test/widget/formSpec.js @@ -1,122 +1,205 @@ 'use strict'; describe('form', function() { - var doc; + var doc, widget, scope, $compile; + + beforeEach(module(function($compileProvider) { + $compileProvider.directive('storeModelCtrl', function() { + return { + require: 'ngModel', + link: function(scope, elm, attr, ctrl) { + widget = ctrl; + } + }; + }); + })); + + beforeEach(inject(function($injector) { + $compile = $injector.get('$compile'); + scope = $injector.get('$rootScope'); + })); afterEach(function() { dealoc(doc); }); - it('should attach form to DOM', inject(function($rootScope, $compile) { - doc = angular.element('<form>'); - $compile(doc)($rootScope); + it('should instantiate form and attach it to DOM', function() { + doc = $compile('<form>')(scope); expect(doc.data('$form')).toBeTruthy(); - })); + expect(doc.data('$form') instanceof FormController).toBe(true); + }); + + it('should remove the widget when element removed', function() { + doc = $compile( + '<form name="form">' + + '<input type="text" name="alias" ng:model="value" store-model-ctrl/>' + + '</form>')(scope); - it('should prevent form submission', inject(function($rootScope, $compile) { + var form = scope.form; + widget.emitValidity('REQUIRED', false); + expect(form.alias).toBe(widget); + expect(form.error.REQUIRED).toEqual([widget]); + + doc.find('input').remove(); + expect(form.error.REQUIRED).toBeUndefined(); + expect(form.alias).toBeUndefined(); + }); + + + it('should prevent form submission', function() { var startingUrl = '' + window.location; - doc = angular.element('<form name="myForm"><input type=submit val=submit>'); - $compile(doc)($rootScope); + doc = jqLite('<form name="myForm"><input type="submit" value="submit" />'); + $compile(doc)(scope); + browserTrigger(doc.find('input')); waitsFor( function() { return true; }, 'let browser breath, so that the form submision can manifest itself', 10); + runs(function() { expect('' + window.location).toEqual(startingUrl); }); - })); + }); - it('should not prevent form submission if action attribute present', - inject(function($compile, $rootScope) { + it('should not prevent form submission if action attribute present', function() { var callback = jasmine.createSpy('submit').andCallFake(function(event) { expect(event.isDefaultPrevented()).toBe(false); event.preventDefault(); }); - doc = angular.element('<form name="x" action="some.py" />'); - $compile(doc)($rootScope); + doc = $compile('<form name="x" action="some.py" />')(scope); doc.bind('submit', callback); browserTrigger(doc, 'submit'); expect(callback).toHaveBeenCalledOnce(); - })); + }); - it('should publish form to scope', inject(function($rootScope, $compile) { - doc = angular.element('<form name="myForm"></form>'); - $compile(doc)($rootScope); - expect($rootScope.myForm).toBeTruthy(); + it('should publish form to scope', function() { + doc = $compile('<form name="myForm"></form>')(scope); + expect(scope.myForm).toBeTruthy(); expect(doc.data('$form')).toBeTruthy(); - expect(doc.data('$form')).toEqual($rootScope.myForm); - })); - + expect(doc.data('$form')).toEqual(scope.myForm); + }); - it('should have ng-valide/ng-invalid style', inject(function($rootScope, $compile) { - doc = angular.element('<form name="myForm"><input type=text ng:model=text required>'); - $compile(doc)($rootScope); - $rootScope.text = 'misko'; - $rootScope.$digest(); - expect(doc.hasClass('ng-valid')).toBe(true); - expect(doc.hasClass('ng-invalid')).toBe(false); + it('should allow name to be an expression', function() { + doc = $compile('<form name="obj.myForm"></form>')(scope); - $rootScope.text = ''; - $rootScope.$digest(); - expect(doc.hasClass('ng-valid')).toBe(false); - expect(doc.hasClass('ng-invalid')).toBe(true); - })); + expect(scope.obj).toBeDefined(); + expect(scope.obj.myForm).toBeTruthy(); + }); - it('should chain nested forms', inject(function($rootScope, $compile) { - doc = angular.element( - '<ng:form name=parent>' + - '<ng:form name=child>' + - '<input type=text ng:model=text name=text>' + + it('should chain nested forms', function() { + doc = jqLite( + '<ng:form name="parent">' + + '<ng:form name="child">' + + '<input type="text" ng:model="text" name="text">' + '</ng:form>' + '</ng:form>'); - $compile(doc)($rootScope); - var parent = $rootScope.parent; - var child = $rootScope.child; + $compile(doc)(scope); + + var parent = scope.parent; + var child = scope.child; var input = child.text; - input.$emit('$invalid', 'MyError'); - expect(parent.$error.MyError).toEqual([input]); - expect(child.$error.MyError).toEqual([input]); + input.emitValidity('MyError', false); + expect(parent.error.MyError).toEqual([input]); + expect(child.error.MyError).toEqual([input]); - input.$emit('$valid', 'MyError'); - expect(parent.$error.MyError).toBeUndefined(); - expect(child.$error.MyError).toBeUndefined(); - })); + input.emitValidity('MyError', true); + expect(parent.error.MyError).toBeUndefined(); + expect(child.error.MyError).toBeUndefined(); + }); - it('should chain nested forms in repeater', inject(function($rootScope, $compile) { - doc = angular.element( + it('should chain nested forms in repeater', function() { + doc = jqLite( '<ng:form name=parent>' + '<ng:form ng:repeat="f in forms" name=child>' + '<input type=text ng:model=text name=text>' + '</ng:form>' + '</ng:form>'); - $compile(doc)($rootScope); - $rootScope.forms = [1]; - $rootScope.$digest(); + $compile(doc)(scope); - var parent = $rootScope.parent; + scope.$apply(function() { + scope.forms = [1]; + }); + + var parent = scope.parent; var child = doc.find('input').scope().child; var input = child.text; + expect(parent).toBeDefined(); expect(child).toBeDefined(); expect(input).toBeDefined(); - input.$emit('$invalid', 'myRule'); - expect(input.$error.myRule).toEqual(true); - expect(child.$error.myRule).toEqual([input]); - expect(parent.$error.myRule).toEqual([input]); + input.emitValidity('myRule', false); + expect(input.error.myRule).toEqual(true); + expect(child.error.myRule).toEqual([input]); + expect(parent.error.myRule).toEqual([input]); - input.$emit('$valid', 'myRule'); - expect(parent.$error.myRule).toBeUndefined(); - expect(child.$error.myRule).toBeUndefined(); - })); + input.emitValidity('myRule', true); + expect(parent.error.myRule).toBeUndefined(); + expect(child.error.myRule).toBeUndefined(); + }); + + + it('should publish widgets', function() { + doc = jqLite('<form name="form"><input type="text" name="w1" ng:model="some" /></form>'); + $compile(doc)(scope); + + var widget = scope.form.w1; + expect(widget).toBeDefined(); + expect(widget.pristine).toBe(true); + expect(widget.dirty).toBe(false); + expect(widget.valid).toBe(true); + expect(widget.invalid).toBe(false); + }); + + + describe('validation', function() { + + beforeEach(function() { + doc = $compile( + '<form name="form">' + + '<input type="text" ng:model="name" name="name" store-model-ctrl/>' + + '</form>')(scope); + + scope.$digest(); + }); + + + it('should have ng-valid/ng-invalid css class', function() { + expect(doc).toBeValid(); + + widget.emitValidity('ERROR', false); + scope.$apply(); + expect(doc).toBeInvalid(); + + widget.emitValidity('ANOTHER', false); + scope.$apply(); + + widget.emitValidity('ERROR', true); + scope.$apply(); + expect(doc).toBeInvalid(); + + widget.emitValidity('ANOTHER', true); + scope.$apply(); + expect(doc).toBeValid(); + }); + + + it('should have ng-pristine/ng-dirty css class', function() { + expect(doc).toBePristine(); + + widget.touch(); + scope.$apply(); + expect(doc).toBeDirty(); + }); + }); }); diff --git a/test/widget/inputSpec.js b/test/widget/inputSpec.js index 3b3aa282..daea7246 100644 --- a/test/widget/inputSpec.js +++ b/test/widget/inputSpec.js @@ -1,630 +1,953 @@ 'use strict'; -describe('widget: input', function() { - var compile = null, element = null, scope = null, defer = null; - var $compile = null; - var doc = null; +describe('NgModelController', function() { + var ctrl, scope, ngModelAccessor; - beforeEach(inject(function($rootScope, $compile, $browser) { + beforeEach(inject(function($rootScope, $controller) { scope = $rootScope; - defer = $browser.defer; - set$compile($compile); - element = null; - compile = function(html, parent) { - if (parent) { - parent.html(html); - element = parent.children(); - } else { - element = jqLite(html); - } - $compile(element)(scope); - scope.$apply(); - return scope; - }; + ngModelAccessor = jasmine.createSpy('ngModel accessor'); + ctrl = $controller(NgModelController, {$scope: scope, ngModel: ngModelAccessor}); + + // mock accessor (locals) + ngModelAccessor.andCallFake(function(val) { + if (isDefined(val)) scope.value = val; + return scope.value; + }); })); - function set$compile(c) { $compile = c; } - afterEach(function() { - dealoc(element); - dealoc(doc); - }); + it('should init the properties', function() { + expect(ctrl.dirty).toBe(false); + expect(ctrl.pristine).toBe(true); + expect(ctrl.valid).toBe(true); + expect(ctrl.invalid).toBe(false); + expect(ctrl.viewValue).toBeDefined(); + expect(ctrl.modelValue).toBeDefined(); - describe('text', function() { - var form = null, - formElement = null, - inputElement = null; + expect(ctrl.formatters).toEqual([]); + expect(ctrl.parsers).toEqual([]); + }); - function createInput(flags){ - var prefix = ''; - forEach(flags, function(value, key){ - prefix += key + '="' + value + '" '; - }); - formElement = doc = angular.element('<form name="form"><input ' + prefix + - 'type="text" ng:model="name" name="name" ng:change="change()"></form>'); - inputElement = formElement.find('input'); - $compile(doc)(scope); - form = formElement.inheritedData('$form'); - }; + describe('touch', function() { + it('should only fire $viewTouch when pristine', function() { + var spy = jasmine.createSpy('$viewTouch'); + scope.$on('$viewTouch', spy); - it('should bind update scope from model', function() { - createInput(); - scope.name = 'misko'; - scope.$digest(); - expect(inputElement.val()).toEqual('misko'); + ctrl.touch(); + expect(ctrl.pristine).toBe(false); + expect(ctrl.dirty).toBe(true); + expect(spy).toHaveBeenCalledOnce(); + + spy.reset(); + ctrl.touch(); + expect(ctrl.pristine).toBe(false); + expect(ctrl.dirty).toBe(true); + expect(spy).not.toHaveBeenCalled(); }); + }); - it('should require', function() { - createInput({required:''}); - scope.$digest(); - expect(scope.form.name.$valid).toBe(false); - scope.name = 'misko'; - scope.$digest(); - expect(scope.form.name.$valid).toBe(true); + describe('emitValidity', function() { + + it('should emit $invalid only when $valid', function() { + var spy = jasmine.createSpy('$invalid'); + scope.$on('$invalid', spy); + + ctrl.emitValidity('ERROR', false); + expect(spy).toHaveBeenCalledOnce(); + + spy.reset(); + ctrl.emitValidity('ERROR', false); + expect(spy).not.toHaveBeenCalled(); }); - it('should call $destroy on element remove', function() { - createInput(); - var log = ''; - form.$on('$destroy', function() { - log += 'destroy;'; - }); - inputElement.remove(); - expect(log).toEqual('destroy;'); + it('should set and unset the error', function() { + ctrl.emitValidity('REQUIRED', false); + expect(ctrl.error.REQUIRED).toBe(true); + + ctrl.emitValidity('REQUIRED', true); + expect(ctrl.error.REQUIRED).toBeUndefined(); }); - it('should update the model and trim input', function() { - createInput(); - var log = ''; - scope.change = function() { - log += 'change();'; - }; - inputElement.val(' a '); - browserTrigger(inputElement); - defer.flush(); - expect(scope.name).toEqual('a'); - expect(log).toEqual('change();'); + it('should set valid/invalid', function() { + ctrl.emitValidity('FIRST', false); + expect(ctrl.valid).toBe(false); + expect(ctrl.invalid).toBe(true); + + ctrl.emitValidity('SECOND', false); + expect(ctrl.valid).toBe(false); + expect(ctrl.invalid).toBe(true); + + ctrl.emitValidity('SECOND', true); + expect(ctrl.valid).toBe(false); + expect(ctrl.invalid).toBe(true); + + ctrl.emitValidity('FIRST', true); + expect(ctrl.valid).toBe(true); + expect(ctrl.invalid).toBe(false); }); - it('should change non-html5 types to text', inject(function($rootScope, $compile) { - doc = angular.element('<form name="form"><input type="abc" ng:model="name"></form>'); - $compile(doc)($rootScope); - expect(doc.find('input').attr('type')).toEqual('text'); - })); + it('should emit $valid only when $invalid', function() { + var spy = jasmine.createSpy('$valid'); + scope.$on('$valid', spy); + ctrl.emitValidity('ERROR', true); + expect(spy).not.toHaveBeenCalled(); - it('should not change html5 types to text', inject(function($rootScope, $compile) { - doc = angular.element('<form name="form"><input type="number" ng:model="name"></form>'); - $compile(doc)($rootScope); - expect(doc.find('input')[0].getAttribute('type')).toEqual('number'); - })); + ctrl.emitValidity('ERROR', false); + ctrl.emitValidity('ERROR', true); + expect(spy).toHaveBeenCalledOnce(); + }); }); - describe("input", function() { + describe('view -> model', function() { - describe("text", function() { - it('should input-text auto init and listen on keydown/change/input events', function() { - compile('<input type="text" ng:model="name"/>'); + it('should set the value to $viewValue', function() { + ctrl.read('some-val'); + expect(ctrl.viewValue).toBe('some-val'); + }); - scope.name = 'Adam'; - scope.$digest(); - expect(element.val()).toEqual("Adam"); - element.val('Shyam'); - browserTrigger(element, 'keydown'); - // keydown event must be deferred - expect(scope.name).toEqual('Adam'); - defer.flush(); - expect(scope.name).toEqual('Shyam'); + it('should pipeline all registered parsers and set result to $modelValue', function() { + var log = []; - element.val('Kai'); - browserTrigger(element, 'change'); - defer.flush(); - expect(scope.name).toEqual('Kai'); + ctrl.parsers.push(function(value) { + log.push(value); + return value + '-a'; + }); - if (!(msie<=8)) { - element.val('Lunar'); - browserTrigger(element, 'input'); - defer.flush(); - expect(scope.name).toEqual('Lunar'); - } + ctrl.parsers.push(function(value) { + log.push(value); + return value + '-b'; }); + ctrl.read('init'); + expect(log).toEqual(['init', 'init-a']); + expect(ctrl.modelValue).toBe('init-a-b'); + }); - it('should not trigger eval if value does not change', function() { - compile('<input type="text" ng:model="name" ng:change="count = count + 1" ng:init="count=0"/>'); - scope.name = 'Misko'; - scope.$digest(); - expect(scope.name).toEqual("Misko"); - expect(scope.count).toEqual(0); - browserTrigger(element, 'keydown'); - defer.flush(); - expect(scope.name).toEqual("Misko"); - expect(scope.count).toEqual(0); + + it('should fire $viewChange only if value changed and is valid', function() { + var spy = jasmine.createSpy('$viewChange'); + scope.$on('$viewChange', spy); + + ctrl.read('val'); + expect(spy).toHaveBeenCalledOnce(); + spy.reset(); + + // invalid + ctrl.parsers.push(function() {return undefined;}); + ctrl.read('val'); + expect(spy).not.toHaveBeenCalled(); + }); + }); + + + describe('model -> view', function() { + + it('should set the value to $modelValue', function() { + scope.$apply(function() { + scope.value = 10; }); + expect(ctrl.modelValue).toBe(10); + }); - it('should allow complex reference binding', function() { - compile('<div>'+ - '<input type="text" ng:model="obj[\'abc\'].name"/>'+ - '</div>'); - scope.obj = { abc: { name: 'Misko'} }; - scope.$digest(); - expect(element.find('input').val()).toEqual('Misko'); + it('should pipeline all registered formatters in reversed order and set result to $viewValue', + function() { + var log = []; + + ctrl.formatters.unshift(function(value) { + log.push(value); + return value + 2; }); + ctrl.formatters.unshift(function(value) { + log.push(value); + return value + ''; + }); - describe("ng:format", function() { - it("should format text", function() { - compile('<input type="list" ng:model="list"/>'); + scope.$apply(function() { + scope.value = 3; + }); + expect(log).toEqual([3, 5]); + expect(ctrl.viewValue).toBe('5'); + }); - scope.list = ['x', 'y', 'z']; - scope.$digest(); - expect(element.val()).toEqual("x, y, z"); - element.val('1, 2, 3'); - browserTrigger(element); - defer.flush(); - expect(scope.list).toEqual(['1', '2', '3']); - }); + it('should $render only if value changed and is valid', function() { + spyOn(ctrl, 'render'); + scope.$apply(function() { + scope.value= 3; + }); + expect(ctrl.render).toHaveBeenCalledOnce(); + ctrl.render.reset(); - it("should render as blank if null", function() { - compile('<input type="text" ng:model="age" ng:format="number" ng:init="age=null"/>'); - expect(scope.age).toBeNull(); - expect(element[0].value).toEqual(''); - }); + // invalid + ctrl.formatters.push(function() {return undefined;}); + scope.$apply(function() { + scope.value= 5; + }); + expect(ctrl.render).not.toHaveBeenCalled(); + }); + }); +}); +describe('ng:model', function() { - it("should show incorrect text while number does not parse", function() { - compile('<input type="number" ng:model="age"/>'); - scope.age = 123; - scope.$digest(); - expect(element.val()).toEqual('123'); - try { - // to allow non-number values, we have to change type so that - // the browser which have number validation will not interfere with - // this test. IE8 won't allow it hence the catch. - element[0].setAttribute('type', 'text'); - } catch (e){} - element.val('123X'); - browserTrigger(element, 'change'); - defer.flush(); - expect(element.val()).toEqual('123X'); - expect(scope.age).toEqual(123); - expect(element).toBeInvalid(); - }); + it('should set css classes (ng-valid, ng-invalid, ng-pristine, ng-dirty)', + inject(function($compile, $rootScope) { + var element = $compile('<input type="email" ng:model="value" />')($rootScope); + $rootScope.$digest(); + expect(element).toBeValid(); + expect(element).toBePristine(); - it("should not clobber text if model changes due to itself", function() { - // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the - // $parseModel function runs it will change to 'a', in essence preventing - // the user from ever typying ','. - compile('<input type="list" ng:model="list"/>'); - - element.val('a '); - browserTrigger(element, 'change'); - defer.flush(); - expect(element.val()).toEqual('a '); - expect(scope.list).toEqual(['a']); - - element.val('a ,'); - browserTrigger(element, 'change'); - defer.flush(); - expect(element.val()).toEqual('a ,'); - expect(scope.list).toEqual(['a']); - - element.val('a , '); - browserTrigger(element, 'change'); - defer.flush(); - expect(element.val()).toEqual('a , '); - expect(scope.list).toEqual(['a']); - - element.val('a , b'); - browserTrigger(element, 'change'); - defer.flush(); - expect(element.val()).toEqual('a , b'); - expect(scope.list).toEqual(['a', 'b']); - }); + $rootScope.$apply(function() { + $rootScope.value = 'invalid-email'; + }); + expect(element).toBeInvalid(); + expect(element).toBePristine(); + element.val('invalid-again'); + browserTrigger(element, 'blur'); + expect(element).toBeInvalid(); + expect(element).toBeDirty(); - it("should come up blank when no value specified", function() { - compile('<input type="number" ng:model="age"/>'); - scope.$digest(); - expect(element.val()).toEqual(''); - expect(scope.age).toEqual(null); - }); - }); + element.val('vojta@google.com'); + browserTrigger(element, 'blur'); + expect(element).toBeValid(); + expect(element).toBeDirty(); + dealoc(element); + })); +}); - describe("checkbox", function() { - it("should format booleans", function() { - compile('<input type="checkbox" ng:model="name" ng:init="name=false"/>'); - expect(scope.name).toBe(false); - expect(element[0].checked).toBe(false); - }); +describe('input', function() { + var formElm, inputElm, scope, $compile; - it('should support type="checkbox" with non-standard capitalization', function() { - compile('<input type="checkBox" ng:model="checkbox"/>'); + function compileInput(inputHtml) { + formElm = jqLite('<form name="form">' + inputHtml + '</form>'); + inputElm = formElm.find('input'); + $compile(formElm)(scope); + } - browserTrigger(element); - expect(scope.checkbox).toBe(true); + function changeInputValueTo(value) { + inputElm.val(value); + browserTrigger(inputElm, 'blur'); + } - browserTrigger(element); - expect(scope.checkbox).toBe(false); - }); + beforeEach(inject(function($injector) { + $compile = $injector.get('$compile'); + scope = $injector.get('$rootScope'); + })); + afterEach(function() { + dealoc(formElm); + }); - it('should allow custom enumeration', function() { - compile('<input type="checkbox" ng:model="name" ng:true-value="y" ng:false-value="n">'); - scope.name='y'; - scope.$digest(); - expect(element[0].checked).toBe(true); + it('should bind to a model', function() { + compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />'); - scope.name='n'; - scope.$digest(); - expect(element[0].checked).toBe(false); + scope.$apply(function() { + scope.name = 'misko'; + }); - scope.name='abc'; - scope.$digest(); - expect(element[0].checked).toBe(false); + expect(inputElm.val()).toBe('misko'); + }); - browserTrigger(element); - expect(scope.name).toEqual('y'); - browserTrigger(element); - expect(scope.name).toEqual('n'); - }); + it('should call $destroy on element remove', function() { + compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />'); + var spy = jasmine.createSpy('on destroy'); + scope.$on('$destroy', spy); - it('should fire ng:change when the value changes', function() { - compile('<input type="checkbox" ng:model="foo" ng:change="changeFn()">'); - scope.changeFn = jasmine.createSpy('changeFn'); - scope.$digest(); - expect(scope.changeFn).not.toHaveBeenCalledOnce(); - browserTrigger(element); - expect(scope.changeFn).toHaveBeenCalledOnce(); - }); - }); + inputElm.remove(); + expect(spy).toHaveBeenCalled(); + }); + + + it('should update the model on "blur" event', function() { + compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />'); + + changeInputValueTo('adam'); + expect(scope.name).toEqual('adam'); + }); + + + it('should update the model and trim the value', function() { + compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />'); + + changeInputValueTo(' a '); + expect(scope.name).toEqual('a'); + }); + + + it('should allow complex reference binding', function() { + compileInput('<input type="text" ng:model="obj[\'abc\'].name"/>'); + + scope.$apply(function() { + scope.obj = { abc: { name: 'Misko'} }; }); + expect(inputElm.val()).toEqual('Misko'); + }); - it("should process required", inject(function($formFactory) { - compile('<input type="text" ng:model="price" name="p" required/>', jqLite(document.body)); - expect(element.hasClass('ng-invalid')).toBeTruthy(); + it('should ignore input without ng:model attr', function() { + compileInput('<input type="text" name="whatever" required />'); - scope.price = 'xxx'; + browserTrigger(inputElm, 'blur'); + expect(inputElm.hasClass('ng-valid')).toBe(false); + expect(inputElm.hasClass('ng-invalid')).toBe(false); + expect(inputElm.hasClass('ng-pristine')).toBe(false); + expect(inputElm.hasClass('ng-dirty')).toBe(false); + }); + + + it('should report error on assignment error', function() { + expect(function() { + compileInput('<input type="text" ng:model="throw \'\'">'); scope.$digest(); - expect(element.hasClass('ng-invalid')).toBeFalsy(); + }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at ['']."); + }); - element.val(''); - browserTrigger(element); - defer.flush(); - expect(element.hasClass('ng-invalid')).toBeTruthy(); - })); + it("should render as blank if null", function() { + compileInput('<input type="text" ng:model="age" />'); - it('should allow bindings on ng:required', function() { - compile('<input type="text" ng:model="price" ng:required="{{required}}"/>', - jqLite(document.body)); - scope.price = ''; - scope.required = false; + scope.$apply(function() { + scope.age = null; + }); + + expect(scope.age).toBeNull(); + expect(inputElm.val()).toEqual(''); + }); + + + describe('pattern', function() { + + it('should validate in-lined pattern', function() { + compileInput('<input type="text" ng:model="value" ng:pattern="/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/" />'); scope.$digest(); - expect(element).toBeValid(); - scope.price = 'xxx'; + changeInputValueTo('x000-00-0000x'); + expect(inputElm).toBeInvalid(); + + changeInputValueTo('000-00-0000'); + expect(inputElm).toBeValid(); + + changeInputValueTo('000-00-0000x'); + expect(inputElm).toBeInvalid(); + + changeInputValueTo('123-45-6789'); + expect(inputElm).toBeValid(); + + changeInputValueTo('x'); + expect(inputElm).toBeInvalid(); + }); + + + it('should validate pattern from scope', function() { + compileInput('<input type="text" ng:model="value" ng:pattern="regexp" />'); + scope.regexp = /^\d\d\d-\d\d-\d\d\d\d$/; scope.$digest(); - expect(element).toBeValid(); - scope.price = ''; - scope.required = true; + changeInputValueTo('x000-00-0000x'); + expect(inputElm).toBeInvalid(); + + changeInputValueTo('000-00-0000'); + expect(inputElm).toBeValid(); + + changeInputValueTo('000-00-0000x'); + expect(inputElm).toBeInvalid(); + + changeInputValueTo('123-45-6789'); + expect(inputElm).toBeValid(); + + changeInputValueTo('x'); + expect(inputElm).toBeInvalid(); + + scope.regexp = /abc?/; + + changeInputValueTo('ab'); + expect(inputElm).toBeValid(); + + changeInputValueTo('xx'); + expect(inputElm).toBeInvalid(); + }); + + + xit('should throw an error when scope pattern can\'t be found', function() { + compileInput('<input type="text" ng:model="foo" ng:pattern="fooRegexp" />'); + + expect(function() { changeInputValueTo('xx'); }). + toThrow('Expected fooRegexp to be a RegExp but was undefined'); + }); + }); + + + describe('minlength', function() { + + it('should invalid shorter than given minlenght', function() { + compileInput('<input type="text" ng:model="value" ng:minlength="3" />'); + + changeInputValueTo('aa'); + expect(scope.value).toBeUndefined(); + + changeInputValueTo('aaa'); + expect(scope.value).toBe('aaa'); + }); + }); + + + describe('maxlength', function() { + + it('should invalid shorter than given maxlenght', function() { + compileInput('<input type="text" ng:model="value" ng:maxlength="5" />'); + + changeInputValueTo('aaaaaaaa'); + expect(scope.value).toBeUndefined(); + + changeInputValueTo('aaa'); + expect(scope.value).toBe('aaa'); + }); + }); + + + // INPUT TYPES + + describe('number', function() { + + it('should not update model if view invalid', function() { + compileInput('<input type="number" ng:model="age"/>'); + + scope.$apply(function() { + scope.age = 123; + }); + expect(inputElm.val()).toBe('123'); + + try { + // to allow non-number values, we have to change type so that + // the browser which have number validation will not interfere with + // this test. IE8 won't allow it hence the catch. + inputElm[0].setAttribute('type', 'text'); + } catch (e) {} + + changeInputValueTo('123X'); + expect(inputElm.val()).toBe('123X'); + expect(scope.age).toBe(123); + expect(inputElm).toBeInvalid(); + }); + + + it('should render as blank if null', function() { + compileInput('<input type="number" ng:model="age" />'); + + scope.$apply(function() { + scope.age = null; + }); + + expect(scope.age).toBeNull(); + expect(inputElm.val()).toEqual(''); + }); + + + it('should come up blank when no value specified', function() { + compileInput('<input type="number" ng:model="age" />'); + scope.$digest(); - expect(element).toBeInvalid(); + expect(inputElm.val()).toBe(''); + + scope.$apply(function() { + scope.age = null; + }); - element.val('abc'); - browserTrigger(element); - defer.flush(); - expect(element).toBeValid(); + expect(scope.age).toBeNull(); + expect(inputElm.val()).toBe(''); }); - describe('textarea', function() { - it("should process textarea", function() { - compile('<textarea ng:model="name"></textarea>'); + it('should parse empty string to null', function() { + compileInput('<input type="number" ng:model="age" />'); - scope.name = 'Adam'; + scope.$apply(function() { + scope.age = 10; + }); + + changeInputValueTo(''); + expect(scope.age).toBeNull(); + expect(inputElm).toBeValid(); + }); + + + describe('min', function() { + + it('should validate', function() { + compileInput('<input type="number" ng:model="value" name="alias" min="10" />'); scope.$digest(); - expect(element.val()).toEqual("Adam"); - element.val('Shyam'); - browserTrigger(element); - defer.flush(); - expect(scope.name).toEqual('Shyam'); + changeInputValueTo('1'); + expect(inputElm).toBeInvalid(); + expect(scope.value).toBeFalsy(); + expect(scope.form.alias.error.MIN).toBeTruthy(); - element.val('Kai'); - browserTrigger(element); - defer.flush(); - expect(scope.name).toEqual('Kai'); + changeInputValueTo('100'); + expect(inputElm).toBeValid(); + expect(scope.value).toBe(100); + expect(scope.form.alias.error.MIN).toBeFalsy(); }); }); - describe('radio', function() { - it('should support type="radio"', function() { - compile('<div>' + - '<input type="radio" name="r" ng:model="chose" value="A"/>' + - '<input type="radio" name="r" ng:model="chose" value="B"/>' + - '<input type="radio" name="r" ng:model="chose" value="C"/>' + - '</div>'); - var a = element[0].childNodes[0]; - var b = element[0].childNodes[1]; - expect(b.name.split('@')[1]).toEqual('r'); - scope.chose = 'A'; - scope.$digest(); - expect(a.checked).toBe(true); + describe('max', function() { - scope.chose = 'B'; + it('should validate', function() { + compileInput('<input type="number" ng:model="value" name="alias" max="10" />'); scope.$digest(); - expect(a.checked).toBe(false); - expect(b.checked).toBe(true); - expect(scope.clicked).not.toBeDefined(); - browserTrigger(a); - expect(scope.chose).toEqual('A'); + changeInputValueTo('20'); + expect(inputElm).toBeInvalid(); + expect(scope.value).toBeFalsy(); + expect(scope.form.alias.error.MAX).toBeTruthy(); + + changeInputValueTo('0'); + expect(inputElm).toBeValid(); + expect(scope.value).toBe(0); + expect(scope.form.alias.error.MAX).toBeFalsy(); }); + }); - it('should honor model over html checked keyword after', function() { - compile('<div ng:init="choose=\'C\'">' + - '<input type="radio" ng:model="choose" value="A""/>' + - '<input type="radio" ng:model="choose" value="B" checked/>' + - '<input type="radio" ng:model="choose" value="C"/>' + - '</div>'); + describe('required', function() { - expect(scope.choose).toEqual('C'); - var inputs = element.find('input'); - expect(inputs[1].checked).toBe(false); - expect(inputs[2].checked).toBe(true); + it('should be valid even if value is 0', function() { + compileInput('<input type="number" ng:model="value" name="alias" required />'); + + changeInputValueTo('0'); + expect(inputElm).toBeValid(); + expect(scope.value).toBe(0); + expect(scope.form.alias.error.REQUIRED).toBeFalsy(); }); + it('should be valid even if value 0 is set from model', function() { + compileInput('<input type="number" ng:model="value" name="alias" required />'); - it('should honor model over html checked keyword before', function() { - compile('<div ng:init="choose=\'A\'">' + - '<input type="radio" ng:model="choose" value="A""/>' + - '<input type="radio" ng:model="choose" value="B" checked/>' + - '<input type="radio" ng:model="choose" value="C"/>' + - '</div>'); + scope.$apply(function() { + scope.value = 0; + }); - expect(scope.choose).toEqual('A'); - var inputs = element.find('input'); - expect(inputs[0].checked).toBe(true); - expect(inputs[1].checked).toBe(false); + expect(inputElm).toBeValid(); + expect(inputElm.val()).toBe('0') + expect(scope.form.alias.error.REQUIRED).toBeFalsy(); }); + }); + }); + describe('email', function() { - it('it should work with value attribute that is data-bound', function(){ - compile( - '<li>'+ - '<input ng:repeat="item in [\'a\', \'b\']" ' + - ' type="radio" ng:model="choice" value="{{item}}" name="choice">'+ - '</li>'); + it('should validate e-mail', function() { + compileInput('<input type="email" ng:model="email" name="alias" />'); - var inputs = element.find('input'); - expect(inputs[0].checked).toBe(false); - expect(inputs[1].checked).toBe(false); + var widget = scope.form.alias; + changeInputValueTo('vojta@google.com'); - scope.choice = 'b'; - scope.$digest(); - expect(inputs[0].checked).toBe(false); - expect(inputs[1].checked).toBe(true); + expect(scope.email).toBe('vojta@google.com'); + expect(inputElm).toBeValid(); + expect(widget.error.EMAIL).toBeUndefined(); + + changeInputValueTo('invalid@'); + expect(scope.email).toBe('vojta@google.com'); + expect(inputElm).toBeInvalid(); + expect(widget.error.EMAIL).toBeTruthy(); + }); + + + describe('EMAIL_REGEXP', function() { + + it('should validate email', function() { + expect(EMAIL_REGEXP.test('a@b.com')).toBe(true); + expect(EMAIL_REGEXP.test('a@B.c')).toBe(false); }); + }); + }); + + + describe('url', function() { - it('should data-bind the value attribute on initialization', inject( - function($rootScope, $compile){ - $rootScope.choice = 'b'; - $rootScope.items = ['a', 'b']; - element = $compile( - '<li>'+ - '<input ng:repeat="item in items" ' + - ' type="radio" ng:model="choice" value="{{item}}" name="choice">'+ - '</li>')($rootScope); + it('should validate url', function() { + compileInput('<input type="url" ng:model="url" name="alias" />'); + var widget = scope.form.alias; - $rootScope.$digest(); - var inputs = element.find('input'); - expect(inputs[0].checked).toBe(false); - expect(inputs[1].checked).toBe(true); - })); + changeInputValueTo('http://www.something.com'); + expect(scope.url).toBe('http://www.something.com'); + expect(inputElm).toBeValid(); + expect(widget.error.URL).toBeUndefined(); + + changeInputValueTo('invalid.com'); + expect(scope.url).toBe('http://www.something.com'); + expect(inputElm).toBeInvalid(); + expect(widget.error.URL).toBeTruthy(); }); - describe('password', function () { - it('should not change password type to text', function () { - compile('<input type="password" ng:model="name" >'); - expect(element.attr('type')).toBe('password'); + describe('URL_REGEXP', function() { + + it('should validate url', function() { + expect(URL_REGEXP.test('http://server:123/path')).toBe(true); + expect(URL_REGEXP.test('a@B.c')).toBe(false); }); }); + }); + - describe('number', function(){ - it('should clear number on non-number', inject(function($compile, $rootScope){ - $rootScope.value = 123; - var element = $compile('<input type="number" ng:model="value" >')($rootScope); - $rootScope.$digest(); - expect(element.val()).toEqual('123'); - $rootScope.value = undefined; - $rootScope.$digest(); - expect(element.val()).toEqual(''); - dealoc(element); - })); + describe('radio', function() { + + it('should update the model', function() { + compileInput( + '<input type="radio" ng:model="color" value="white" />' + + '<input type="radio" ng:model="color" value="red" />' + + '<input type="radio" ng:model="color" value="blue" />'); + + scope.$apply(function() { + scope.color = 'white'; + }); + expect(inputElm[0].checked).toBe(true); + expect(inputElm[1].checked).toBe(false); + expect(inputElm[2].checked).toBe(false); + + scope.$apply(function() { + scope.color = 'red'; + }); + expect(inputElm[0].checked).toBe(false); + expect(inputElm[1].checked).toBe(true); + expect(inputElm[2].checked).toBe(false); + + browserTrigger(inputElm[2]); + expect(scope.color).toBe('blue'); }); - it('should ignore text widget which have no name', function() { - compile('<input type="text"/>'); - expect(element.attr('ng-exception')).toBeFalsy(); - expect(element.hasClass('ng-exception')).toBeFalsy(); + // TODO(vojta): change interpolate ? + xit('should allow {{expr}} as value', function() { + scope.some = 11; + compileInput( + '<input type="radio" ng:model="value" value="{{some}}" />' + + '<input type="radio" ng:model="value" value="{{other}}" />'); + + browserTrigger(inputElm[0]); + expect(scope.value).toBe(true); + + browserTrigger(inputElm[1]); + expect(scope.value).toBe(false); }); + }); - it('should ignore checkbox widget which have no name', function() { - compile('<input type="checkbox"/>'); - expect(element.attr('ng-exception')).toBeFalsy(); - expect(element.hasClass('ng-exception')).toBeFalsy(); + describe('checkbox', function() { + + it('should ignore checkbox without ng:model attr', function() { + compileInput('<input type="checkbox" name="whatever" required />'); + + browserTrigger(inputElm, 'blur'); + expect(inputElm.hasClass('ng-valid')).toBe(false); + expect(inputElm.hasClass('ng-invalid')).toBe(false); + expect(inputElm.hasClass('ng-pristine')).toBe(false); + expect(inputElm.hasClass('ng-dirty')).toBe(false); }); - it('should report error on assignment error', inject(function($log) { - expect(function() { - compile('<input type="text" ng:model="throw \'\'">'); - }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at ['']."); - $log.error.logs.shift(); - })); + it('should format booleans', function() { + compileInput('<input type="checkbox" ng:model="name" />'); + + scope.$apply(function() { + scope.name = false; + }); + expect(inputElm[0].checked).toBe(false); + + scope.$apply(function() { + scope.name = true; + }); + expect(inputElm[0].checked).toBe(true); + }); + + + it('should support type="checkbox" with non-standard capitalization', function() { + compileInput('<input type="checkBox" ng:model="checkbox" />'); + + browserTrigger(inputElm, 'click'); + expect(scope.checkbox).toBe(true); + + browserTrigger(inputElm, 'click'); + expect(scope.checkbox).toBe(false); + }); + + + it('should allow custom enumeration', function() { + compileInput('<input type="checkbox" ng:model="name" ng:true-value="y" ' + + 'ng:false-value="n">'); + + scope.$apply(function() { + scope.name = 'y'; + }); + expect(inputElm[0].checked).toBe(true); + + scope.$apply(function() { + scope.name = 'n'; + }); + expect(inputElm[0].checked).toBe(false); + + scope.$apply(function() { + scope.name = 'something else'; + }); + expect(inputElm[0].checked).toBe(false); + + browserTrigger(inputElm, 'click'); + expect(scope.name).toEqual('y'); + + browserTrigger(inputElm, 'click'); + expect(scope.name).toEqual('n'); + }); }); - describe('scope declaration', function() { - it('should read the declaration from scope', inject(function($rootScope, $compile, $formFactory) { - var input, formFactory; - var element = angular.element('<input type="@MyType" ng:model="abc">'); - $rootScope.MyType = function($f, i) { - input = i; - formFactory = $f; - }; - $rootScope.MyType.$inject = ['$formFactory', '$element']; + describe('textarea', function() { - $compile(element)($rootScope); + it("should process textarea", function() { + compileInput('<textarea ng:model="name"></textarea>'); + inputElm = formElm.find('textarea'); - expect(formFactory).toBe($formFactory); - expect(input[0]).toBe(element[0]); - dealoc(element); - })); + scope.$apply(function() { + scope.name = 'Adam'; + }); + expect(inputElm.val()).toEqual('Adam'); - it('should throw an error of Controller not declared in scope', inject(function($rootScope, $compile) { - var input; - var element = angular.element('<input type="@DontExist" ng:model="abc">'); - var error; - try { - $compile(element)($rootScope); - error = 'no error thrown'; - } catch (e) { - error = e; - } - expect(error.message).toEqual("Argument 'DontExist' is not a function, got undefined"); - })); + changeInputValueTo('Shyam'); + expect(scope.name).toEqual('Shyam'); + + changeInputValueTo('Kai'); + expect(scope.name).toEqual('Kai'); + }); + + + it('should ignore textarea without ng:model attr', function() { + compileInput('<textarea name="whatever" required></textarea>'); + inputElm = formElm.find('textarea'); + + browserTrigger(inputElm, 'blur'); + expect(inputElm.hasClass('ng-valid')).toBe(false); + expect(inputElm.hasClass('ng-invalid')).toBe(false); + expect(inputElm.hasClass('ng-pristine')).toBe(false); + expect(inputElm.hasClass('ng-dirty')).toBe(false); + }); }); - describe('text subtypes', function() { + describe('ng:list', function() { - function itShouldVerify(type, validList, invalidList, params, fn) { - describe(type, function() { - forEach(validList, function(value){ - it('should validate "' + value + '"', function() { - setup(value); - expect(element).toBeValid(); - }); - }); - forEach(invalidList, function(value){ - it('should NOT validate "' + value + '"', function() { - setup(value); - expect(element).toBeInvalid(); - }); - }); + it('should parse text into an array', function() { + compileInput('<input type="text" ng:model="list" ng:list />'); - function setup(value){ - var html = ['<input type="', type.split(' ')[0], '" ']; - forEach(params||{}, function(value, key){ - html.push(key + '="' + value + '" '); - }); - html.push('ng:model="value">'); - compile(html.join('')); - (fn||noop)(scope); - scope.value = null; - try { - // to allow non-number values, we have to change type so that - // the browser which have number validation will not interfere with - // this test. IE8 won't allow it hence the catch. - element[0].setAttribute('type', 'text'); - } catch (e){} - if (value != undefined) { - element.val(value); - browserTrigger(element, 'keydown'); - defer.flush(); - } - scope.$digest(); - } + // model -> view + scope.$apply(function() { + scope.list = ['x', 'y', 'z']; }); - } + expect(inputElm.val()).toBe('x, y, z'); + // view -> model + changeInputValueTo('1, 2, 3'); + expect(scope.list).toEqual(['1', '2', '3']); + }); - itShouldVerify('email', ['a@b.com'], ['a@B.c']); + it("should not clobber text if model changes due to itself", function() { + // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the + // $parseModel function runs it will change to 'a', in essence preventing + // the user from ever typying ','. + compileInput('<input type="text" ng:model="list" ng:list />'); - itShouldVerify('url', ['http://server:123/path'], ['a@b.c']); + changeInputValueTo('a '); + expect(inputElm.val()).toEqual('a '); + expect(scope.list).toEqual(['a']); + changeInputValueTo('a ,'); + expect(inputElm.val()).toEqual('a ,'); + expect(scope.list).toEqual(['a']); - itShouldVerify('number', - ['', '1', '12.34', '-4', '+13', '.1'], - ['x', '12b', '-6', '101'], - {min:-5, max:100}); + changeInputValueTo('a , '); + expect(inputElm.val()).toEqual('a , '); + expect(scope.list).toEqual(['a']); + changeInputValueTo('a , b'); + expect(inputElm.val()).toEqual('a , b'); + expect(scope.list).toEqual(['a', 'b']); + }); - itShouldVerify('integer', - [null, '', '1', '12', '-4', '+13'], - ['x', '12b', '-6', '101', '1.', '1.2'], - {min:-5, max:100}); + xit('should require at least one item', function() { + compileInput('<input type="text" ng:model="list" ng:list required />'); - itShouldVerify('integer', - [null, '', '0', '1'], - ['-1', '2'], - {min:0, max:1}); + changeInputValueTo(' , '); + expect(inputElm).toBeInvalid(); + }); - itShouldVerify('text with inlined pattern constraint', - ['', '000-00-0000', '123-45-6789'], - ['x000-00-0000x', 'x000-00-0000', '000-00-0000x', 'x'], - {'ng:pattern':'/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/'}); + it('should convert empty string to an empty array', function() { + compileInput('<input type="text" ng:model="list" ng:list />'); + changeInputValueTo(''); + expect(scope.list).toEqual([]); + }); + }); + + describe('required', function() { + + it('should allow bindings on required', function() { + compileInput('<input type="text" ng:model="value" required="{{required}}" />'); + + scope.$apply(function() { + scope.required = false; + }); + + changeInputValueTo(''); + expect(inputElm).toBeValid(); + + + scope.$apply(function() { + scope.required = true; + }); + expect(inputElm).toBeInvalid(); + + scope.$apply(function() { + scope.value = 'some'; + }); + expect(inputElm).toBeValid(); + + changeInputValueTo(''); + expect(inputElm).toBeInvalid(); + + scope.$apply(function() { + scope.required = false; + }); + expect(inputElm).toBeValid(); + }); + + + it('should invalid initial value with bound required', function() { + compileInput('<input type="text" ng:model="value" required="{{required}}" />'); + + scope.$apply(function() { + scope.required = true; + }); + + expect(inputElm).toBeInvalid(); + }); + + + it('should be $invalid but $pristine if not touched', function() { + compileInput('<input type="text" ng:model="name" name="alias" required />'); + + scope.$apply(function() { + scope.name = ''; + }); + + expect(inputElm).toBeInvalid(); + expect(inputElm).toBePristine(); + + changeInputValueTo(''); + expect(inputElm).toBeInvalid(); + expect(inputElm).toBeDirty(); + }); + + + it('should allow empty string if not required', function() { + compileInput('<input type="text" ng:model="foo" />'); + changeInputValueTo('a'); + changeInputValueTo(''); + expect(scope.foo).toBe(''); + }); + + + it('should set $invalid when model undefined', function() { + compileInput('<input type="text" ng:model="notDefiend" required />'); + scope.$digest(); + expect(inputElm).toBeInvalid(); + }) + }); + + + describe('ng:change', function() { + + it('should $eval expression after new value is set in the model', function() { + compileInput('<input type="text" ng:model="value" ng:change="change()" />'); + + scope.change = jasmine.createSpy('change').andCallFake(function() { + expect(scope.value).toBe('new value'); + }); + + changeInputValueTo('new value'); + expect(scope.change).toHaveBeenCalledOnce(); + }); + + it('should not $eval the expression if changed from model', function() { + compileInput('<input type="text" ng:model="value" ng:change="change()" />'); + + scope.change = jasmine.createSpy('change'); + scope.$apply(function() { + scope.value = true; + }); + + expect(scope.change).not.toHaveBeenCalled(); + }); + + + it('should $eval ng:change expression on checkbox', function() { + compileInput('<input type="checkbox" ng:model="foo" ng:change="changeFn()">'); + + scope.changeFn = jasmine.createSpy('changeFn'); + scope.$digest(); + expect(scope.changeFn).not.toHaveBeenCalled(); + + browserTrigger(inputElm, 'click'); + expect(scope.changeFn).toHaveBeenCalledOnce(); + }); + }); - itShouldVerify('text with pattern constraint on scope', - ['', '000-00-0000', '123-45-6789'], - ['x000-00-0000x', 'x'], - {'ng:pattern':'regexp'}, function(scope){ - scope.regexp = /^\d\d\d-\d\d-\d\d\d\d$/; - }); + describe('ng:bind-change', function() { - itShouldVerify('text with ng:minlength limit', - ['', 'aaa', 'aaaaa', 'aaaaaaaaa'], - ['a', 'aa'], - {'ng:minlength': 3}); + it('should bind keydown, change, input events', inject(function($browser) { + compileInput('<input type="text" ng:model="value" ng:bind-immediate />'); + inputElm.val('value1'); + browserTrigger(inputElm, 'keydown'); - itShouldVerify('text with ng:maxlength limit', - ['', 'a', 'aa', 'aaa'], - ['aaaa', 'aaaaa', 'aaaaaaaaa'], - {'ng:maxlength': 3}); + // should be async (because of keydown) + expect(scope.value).toBeUndefined(); + $browser.defer.flush(); + expect(scope.value).toBe('value1'); - it('should throw an error when scope pattern can\'t be found', inject(function($rootScope, $compile) { - var el = jqLite('<input ng:model="foo" ng:pattern="fooRegexp">'); - $compile(el)($rootScope); + inputElm.val('value2'); + browserTrigger(inputElm, 'change'); + $browser.defer.flush(); + expect(scope.value).toBe('value2'); - el.val('xx'); - browserTrigger(el, 'keydown'); - expect(function() { defer.flush(); }). - toThrow('Expected fooRegexp to be a RegExp but was undefined'); + if (msie < 9) return; - dealoc(el); + inputElm.val('value3'); + browserTrigger(inputElm, 'input'); + $browser.defer.flush(); + expect(scope.value).toBe('value3'); })); }); }); diff --git a/test/widget/selectSpec.js b/test/widget/selectSpec.js index 00bc2192..9db47c05 100644 --- a/test/widget/selectSpec.js +++ b/test/widget/selectSpec.js @@ -1,60 +1,69 @@ 'use strict'; describe('select', function() { - var compile = null, element = null, scope = null; + var scope, formElement, element, $compile; - beforeEach(inject(function($compile, $rootScope) { + function compile(html) { + formElement = jqLite('<form name="form">' + html + '</form>'); + element = formElement.find('select'); + $compile(formElement)(scope); + scope.$apply(); + } + + beforeEach(inject(function($injector, $rootScope) { scope = $rootScope; - element = null; - compile = function(html, parent) { - if (parent) { - parent.html(html); - element = parent.children(); - } else { - element = jqLite(html); - } - element = $compile(element)($rootScope); - scope.$apply(); - return scope; - }; + $compile = $injector.get('$compile'); + formElement = element = null; })); afterEach(function() { - dealoc(element); + dealoc(formElement); }); describe('select-one', function() { - it('should compile children of a select without a name, but not create a model for it', + it('should compile children of a select without a ng:model, but not create a model for it', function() { compile('<select>' + '<option selected="true">{{a}}</option>' + '<option value="">{{b}}</option>' + '<option>C</option>' + '</select>'); - scope.a = 'foo'; - scope.b = 'bar'; - scope.$digest(); + scope.$apply(function() { + scope.a = 'foo'; + scope.b = 'bar'; + }); expect(element.text()).toBe('foobarC'); }); - it('should require', inject(function($formFactory) { - compile('<select name="select" ng:model="selection" required ng:change="log=log+\'change;\'">' + + + it('should require', function() { + compile( + '<select name="select" ng:model="selection" required ng:change="change()">' + '<option value=""></option>' + '<option value="c">C</option>' + '</select>'); - scope.log = ''; - scope.selection = 'c'; - scope.$digest(); - expect($formFactory.forElement(element).select.$error.REQUIRED).toEqual(undefined); + + scope.change = function() { + scope.log += 'change;'; + }; + + scope.$apply(function() { + scope.log = ''; + scope.selection = 'c'; + }); + + expect(scope.form.select.error.REQUIRED).toBeFalsy(); expect(element).toBeValid(); expect(element).toBePristine(); - scope.selection = ''; - scope.$digest(); - expect($formFactory.forElement(element).select.$error.REQUIRED).toEqual(true); + scope.$apply(function() { + scope.selection = ''; + }); + + expect(scope.form.select.error.REQUIRED).toBeTruthy(); expect(element).toBeInvalid(); expect(element).toBePristine(); expect(scope.log).toEqual(''); @@ -64,10 +73,12 @@ describe('select', function() { expect(element).toBeValid(); expect(element).toBeDirty(); expect(scope.log).toEqual('change;'); - })); + }); + it('should not be invalid if no require', function() { - compile('<select name="select" ng:model="selection">' + + compile( + '<select name="select" ng:model="selection">' + '<option value=""></option>' + '<option value="c">C</option>' + '</select>'); @@ -75,35 +86,45 @@ describe('select', function() { expect(element).toBeValid(); expect(element).toBePristine(); }); - }); describe('select-multiple', function() { + it('should support type="select-multiple"', function() { - compile('<select ng:model="selection" multiple>' + - '<option>A</option>' + - '<option>B</option>' + - '</select>'); - scope.selection = ['A']; - scope.$digest(); + compile( + '<select ng:model="selection" multiple>' + + '<option>A</option>' + + '<option>B</option>' + + '</select>'); + + scope.$apply(function() { + scope.selection = ['A']; + }); + expect(element[0].childNodes[0].selected).toEqual(true); }); - it('should require', inject(function($formFactory) { - compile('<select name="select" ng:model="selection" multiple required>' + + + it('should require', function() { + compile( + '<select name="select" ng:model="selection" multiple required>' + '<option>A</option>' + '<option>B</option>' + '</select>'); - scope.selection = []; - scope.$digest(); - expect($formFactory.forElement(element).select.$error.REQUIRED).toEqual(true); + scope.$apply(function() { + scope.selection = []; + }); + + expect(scope.form.select.error.REQUIRED).toBeTruthy(); expect(element).toBeInvalid(); expect(element).toBePristine(); - scope.selection = ['A']; - scope.$digest(); + scope.$apply(function() { + scope.selection = ['A']; + }); + expect(element).toBeValid(); expect(element).toBePristine(); @@ -111,17 +132,14 @@ describe('select', function() { browserTrigger(element, 'change'); expect(element).toBeValid(); expect(element).toBeDirty(); - })); - + }); }); describe('ng:options', function() { - var select, scope; - - function createSelect(attrs, blank, unknown){ + function createSelect(attrs, blank, unknown) { var html = '<select'; - forEach(attrs, function(value, key){ + forEach(attrs, function(value, key) { if (isBoolean(value)) { if (value) html += ' ' + key; } else { @@ -132,18 +150,18 @@ describe('select', function() { (blank ? (isString(blank) ? blank : '<option value="">blank</option>') : '') + (unknown ? (isString(unknown) ? unknown : '<option value="?">unknown</option>') : '') + '</select>'; - select = jqLite(html); - scope = compile(select); + + compile(html); } - function createSingleSelect(blank, unknown){ + function createSingleSelect(blank, unknown) { createSelect({ 'ng:model':'selected', 'ng:options':'value.name for value in values' }, blank, unknown); } - function createMultiSelect(blank, unknown){ + function createMultiSelect(blank, unknown) { createSelect({ 'ng:model':'selected', 'multiple':true, @@ -151,366 +169,474 @@ describe('select', function() { }, blank, unknown); } - afterEach(function() { - dealoc(select); - dealoc(scope); - }); - it('should throw when not formated "? for ? in ?"', inject(function($rootScope, $exceptionHandler) { + it('should throw when not formated "? for ? in ?"', function() { expect(function() { compile('<select ng:model="selected" ng:options="i dont parse"></select>'); }).toThrow("Expected ng:options in form of '_select_ (as _label_)? for (_key_,)?_value_ in" + " _collection_' but got 'i dont parse'."); - })); + }); + it('should render a list', function() { createSingleSelect(); - scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; - scope.selected = scope.values[0]; - scope.$digest(); - var options = select.find('option'); + + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}]; + scope.selected = scope.values[0]; + }); + + var options = element.find('option'); expect(options.length).toEqual(3); expect(sortedHtml(options[0])).toEqual('<option value="0">A</option>'); expect(sortedHtml(options[1])).toEqual('<option value="1">B</option>'); expect(sortedHtml(options[2])).toEqual('<option value="2">C</option>'); }); + it('should render an object', function() { createSelect({ - 'ng:model':'selected', + 'ng:model': 'selected', 'ng:options': 'value as key for (key, value) in object' }); - scope.object = {'red':'FF0000', 'green':'00FF00', 'blue':'0000FF'}; - scope.selected = scope.object.red; - scope.$digest(); - var options = select.find('option'); + + scope.$apply(function() { + scope.object = {'red': 'FF0000', 'green': '00FF00', 'blue': '0000FF'}; + scope.selected = scope.object.red; + }); + + var options = element.find('option'); expect(options.length).toEqual(3); expect(sortedHtml(options[0])).toEqual('<option value="blue">blue</option>'); expect(sortedHtml(options[1])).toEqual('<option value="green">green</option>'); expect(sortedHtml(options[2])).toEqual('<option value="red">red</option>'); expect(options[2].selected).toEqual(true); - scope.object.azur = '8888FF'; - scope.$digest(); - options = select.find('option'); + scope.$apply(function() { + scope.object.azur = '8888FF'; + }); + + options = element.find('option'); expect(options[3].selected).toEqual(true); }); + it('should grow list', function() { createSingleSelect(); - scope.values = []; - scope.$digest(); - expect(select.find('option').length).toEqual(1); // because we add special empty option - expect(sortedHtml(select.find('option')[0])).toEqual('<option value="?"></option>'); - - scope.values.push({name:'A'}); - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.find('option').length).toEqual(1); - expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>'); - - scope.values.push({name:'B'}); - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>'); - expect(sortedHtml(select.find('option')[1])).toEqual('<option value="1">B</option>'); + + scope.$apply(function() { + scope.values = []; + }); + + expect(element.find('option').length).toEqual(1); // because we add special empty option + expect(sortedHtml(element.find('option')[0])).toEqual('<option value="?"></option>'); + + scope.$apply(function() { + scope.values.push({name:'A'}); + scope.selected = scope.values[0]; + }); + + expect(element.find('option').length).toEqual(1); + expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>'); + + scope.$apply(function() { + scope.values.push({name:'B'}); + }); + + expect(element.find('option').length).toEqual(2); + expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>'); + expect(sortedHtml(element.find('option')[1])).toEqual('<option value="1">B</option>'); }); + it('should shrink list', function() { createSingleSelect(); - scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.find('option').length).toEqual(3); - - scope.values.pop(); - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>'); - expect(sortedHtml(select.find('option')[1])).toEqual('<option value="1">B</option>'); - - scope.values.pop(); - scope.$digest(); - expect(select.find('option').length).toEqual(1); - expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>'); - - scope.values.pop(); - scope.selected = null; - scope.$digest(); - expect(select.find('option').length).toEqual(1); // we add back the special empty option + + scope.$apply(function() { + scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; + scope.selected = scope.values[0]; + }); + + expect(element.find('option').length).toEqual(3); + + scope.$apply(function() { + scope.values.pop(); + }); + + expect(element.find('option').length).toEqual(2); + expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>'); + expect(sortedHtml(element.find('option')[1])).toEqual('<option value="1">B</option>'); + + scope.$apply(function() { + scope.values.pop(); + }); + + expect(element.find('option').length).toEqual(1); + expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>'); + + scope.$apply(function() { + scope.values.pop(); + scope.selected = null; + }); + + expect(element.find('option').length).toEqual(1); // we add back the special empty option }); + it('should shrink and then grow list', function() { createSingleSelect(); - scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.find('option').length).toEqual(3); - - scope.values = [{name:'1'}, {name:'2'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.find('option').length).toEqual(2); - - scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.find('option').length).toEqual(3); + + scope.$apply(function() { + scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; + scope.selected = scope.values[0]; + }); + + expect(element.find('option').length).toEqual(3); + + scope.$apply(function() { + scope.values = [{name: '1'}, {name: '2'}]; + scope.selected = scope.values[0]; + }); + + expect(element.find('option').length).toEqual(2); + + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}]; + scope.selected = scope.values[0]; + }); + + expect(element.find('option').length).toEqual(3); }); + it('should update list', function() { createSingleSelect(); - scope.values = [{name:'A'}, {name:'B'}, {name:'C'}]; - scope.selected = scope.values[0]; - scope.$digest(); - - scope.values = [{name:'B'}, {name:'C'}, {name:'D'}]; - scope.selected = scope.values[0]; - scope.$digest(); - var options = select.find('option'); + + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}]; + scope.selected = scope.values[0]; + }); + + scope.$apply(function() { + scope.values = [{name: 'B'}, {name: 'C'}, {name: 'D'}]; + scope.selected = scope.values[0]; + }); + + var options = element.find('option'); expect(options.length).toEqual(3); expect(sortedHtml(options[0])).toEqual('<option value="0">B</option>'); expect(sortedHtml(options[1])).toEqual('<option value="1">C</option>'); expect(sortedHtml(options[2])).toEqual('<option value="2">D</option>'); }); + it('should preserve existing options', function() { createSingleSelect(true); - scope.values = []; - scope.$digest(); - expect(select.find('option').length).toEqual(1); - - scope.values = [{name:'A'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(jqLite(select.find('option')[0]).text()).toEqual('blank'); - expect(jqLite(select.find('option')[1]).text()).toEqual('A'); - - scope.values = []; - scope.selected = null; - scope.$digest(); - expect(select.find('option').length).toEqual(1); - expect(jqLite(select.find('option')[0]).text()).toEqual('blank'); + scope.$apply(function() { + scope.values = []; + }); + + expect(element.find('option').length).toEqual(1); + + scope.$apply(function() { + scope.values = [{name: 'A'}]; + scope.selected = scope.values[0]; + }); + + expect(element.find('option').length).toEqual(2); + expect(jqLite(element.find('option')[0]).text()).toEqual('blank'); + expect(jqLite(element.find('option')[1]).text()).toEqual('A'); + + scope.$apply(function() { + scope.values = []; + scope.selected = null; + }); + + expect(element.find('option').length).toEqual(1); + expect(jqLite(element.find('option')[0]).text()).toEqual('blank'); }); + describe('binding', function() { + it('should bind to scope value', function() { createSingleSelect(); - scope.values = [{name:'A'}, {name:'B'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.val()).toEqual('0'); - scope.selected = scope.values[1]; - scope.$digest(); - expect(select.val()).toEqual('1'); + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = scope.values[0]; + }); + + expect(element.val()).toEqual('0'); + + scope.$apply(function() { + scope.selected = scope.values[1]; + }); + + expect(element.val()).toEqual('1'); }); + it('should bind to scope value and group', function() { createSelect({ - 'ng:model':'selected', - 'ng:options':'item.name group by item.group for item in values' - }); - scope.values = [{name:'A'}, - {name:'B', group:'first'}, - {name:'C', group:'second'}, - {name:'D', group:'first'}, - {name:'E', group:'second'}]; - scope.selected = scope.values[3]; - scope.$digest(); - expect(select.val()).toEqual('3'); + 'ng:model': 'selected', + 'ng:options': 'item.name group by item.group for item in values' + }); + + scope.$apply(function() { + scope.values = [{name: 'A'}, + {name: 'B', group: 'first'}, + {name: 'C', group: 'second'}, + {name: 'D', group: 'first'}, + {name: 'E', group: 'second'}]; + scope.selected = scope.values[3]; + }); + + expect(element.val()).toEqual('3'); - var first = jqLite(select.find('optgroup')[0]); + var first = jqLite(element.find('optgroup')[0]); var b = jqLite(first.find('option')[0]); var d = jqLite(first.find('option')[1]); expect(first.attr('label')).toEqual('first'); expect(b.text()).toEqual('B'); expect(d.text()).toEqual('D'); - var second = jqLite(select.find('optgroup')[1]); + var second = jqLite(element.find('optgroup')[1]); var c = jqLite(second.find('option')[0]); var e = jqLite(second.find('option')[1]); expect(second.attr('label')).toEqual('second'); expect(c.text()).toEqual('C'); expect(e.text()).toEqual('E'); - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.val()).toEqual('0'); + scope.$apply(function() { + scope.selected = scope.values[0]; + }); + + expect(element.val()).toEqual('0'); }); + it('should bind to scope value through experession', function() { - createSelect({'ng:model':'selected', 'ng:options':'item.id as item.name for item in values'}); - scope.values = [{id:10, name:'A'}, {id:20, name:'B'}]; - scope.selected = scope.values[0].id; - scope.$digest(); - expect(select.val()).toEqual('0'); + createSelect({ + 'ng:model': 'selected', + 'ng:options': 'item.id as item.name for item in values' + }); - scope.selected = scope.values[1].id; - scope.$digest(); - expect(select.val()).toEqual('1'); + scope.$apply(function() { + scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}]; + scope.selected = scope.values[0].id; + }); + + expect(element.val()).toEqual('0'); + + scope.$apply(function() { + scope.selected = scope.values[1].id; + }); + + expect(element.val()).toEqual('1'); }); + it('should bind to object key', function() { createSelect({ - 'ng:model':'selected', - 'ng:options':'key as value for (key, value) in object' + 'ng:model': 'selected', + 'ng:options': 'key as value for (key, value) in object' }); - scope.object = {'red':'FF0000', 'green':'00FF00', 'blue':'0000FF'}; - scope.selected = 'green'; - scope.$digest(); - expect(select.val()).toEqual('green'); - scope.selected = 'blue'; - scope.$digest(); - expect(select.val()).toEqual('blue'); + scope.$apply(function() { + scope.object = {red: 'FF0000', green: '00FF00', blue: '0000FF'}; + scope.selected = 'green'; + }); + + expect(element.val()).toEqual('green'); + + scope.$apply(function() { + scope.selected = 'blue'; + }); + + expect(element.val()).toEqual('blue'); }); + it('should bind to object value', function() { createSelect({ - 'ng:model':'selected', - 'ng:options':'value as key for (key, value) in object' + 'ng:model': 'selected', + 'ng:options': 'value as key for (key, value) in object' }); - scope.object = {'red':'FF0000', 'green':'00FF00', 'blue':'0000FF'}; - scope.selected = '00FF00'; - scope.$digest(); - expect(select.val()).toEqual('green'); - scope.selected = '0000FF'; - scope.$digest(); - expect(select.val()).toEqual('blue'); + scope.$apply(function() { + scope.object = {red: 'FF0000', green: '00FF00', blue:'0000FF'}; + scope.selected = '00FF00'; + }); + + expect(element.val()).toEqual('green'); + + scope.$apply(function() { + scope.selected = '0000FF'; + }); + + expect(element.val()).toEqual('blue'); }); + it('should insert a blank option if bound to null', function() { createSingleSelect(); - scope.values = [{name:'A'}]; - scope.selected = null; - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(select.val()).toEqual(''); - expect(jqLite(select.find('option')[0]).val()).toEqual(''); - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.val()).toEqual('0'); - expect(select.find('option').length).toEqual(1); + scope.$apply(function() { + scope.values = [{name: 'A'}]; + scope.selected = null; + }); + + expect(element.find('option').length).toEqual(2); + expect(element.val()).toEqual(''); + expect(jqLite(element.find('option')[0]).val()).toEqual(''); + + scope.$apply(function() { + scope.selected = scope.values[0]; + }); + + expect(element.val()).toEqual('0'); + expect(element.find('option').length).toEqual(1); }); + it('should reuse blank option if bound to null', function() { createSingleSelect(true); - scope.values = [{name:'A'}]; - scope.selected = null; - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(select.val()).toEqual(''); - expect(jqLite(select.find('option')[0]).val()).toEqual(''); - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.val()).toEqual('0'); - expect(select.find('option').length).toEqual(2); + scope.$apply(function() { + scope.values = [{name: 'A'}]; + scope.selected = null; + }); + + expect(element.find('option').length).toEqual(2); + expect(element.val()).toEqual(''); + expect(jqLite(element.find('option')[0]).val()).toEqual(''); + + scope.$apply(function() { + scope.selected = scope.values[0]; + }); + + expect(element.val()).toEqual('0'); + expect(element.find('option').length).toEqual(2); }); + it('should insert a unknown option if bound to something not in the list', function() { createSingleSelect(); - scope.values = [{name:'A'}]; - scope.selected = {}; - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(select.val()).toEqual('?'); - expect(jqLite(select.find('option')[0]).val()).toEqual('?'); - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.val()).toEqual('0'); - expect(select.find('option').length).toEqual(1); + scope.$apply(function() { + scope.values = [{name: 'A'}]; + scope.selected = {}; + }); + + expect(element.find('option').length).toEqual(2); + expect(element.val()).toEqual('?'); + expect(jqLite(element.find('option')[0]).val()).toEqual('?'); + + scope.$apply(function() { + scope.selected = scope.values[0]; + }); + + expect(element.val()).toEqual('0'); + expect(element.find('option').length).toEqual(1); }); + it('should select correct input if previously selected option was "?"', function() { createSingleSelect(); - scope.values = [{name:'A'},{name:'B'}]; - scope.selected = {}; - scope.$digest(); - expect(select.find('option').length).toEqual(3); - expect(select.val()).toEqual('?'); - expect(select.find('option').eq(0).val()).toEqual('?'); - browserTrigger(select.find('option').eq(1)); - expect(select.val()).toEqual('0'); - expect(select.find('option').eq(0).prop('selected')).toBeTruthy(); - expect(select.find('option').length).toEqual(2); + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = {}; + }); + + expect(element.find('option').length).toEqual(3); + expect(element.val()).toEqual('?'); + expect(element.find('option').eq(0).val()).toEqual('?'); + + browserTrigger(element.find('option').eq(1)); + expect(element.val()).toEqual('0'); + expect(element.find('option').eq(0).prop('selected')).toBeTruthy(); + expect(element.find('option').length).toEqual(2); }); }); describe('blank option', function () { + it('should be compiled as template, be watched and updated', function () { var option; - createSingleSelect('<option value="">blank is {{blankVal}}</option>'); - scope.blankVal = 'so blank'; - scope.values = [{name:'A'}]; - scope.$digest(); + + scope.$apply(function() { + scope.blankVal = 'so blank'; + scope.values = [{name: 'A'}]; + }); // check blank option is first and is compiled - expect(select.find('option').length == 2); - option = jqLite(select.find('option')[0]); + expect(element.find('option').length).toBe(2); + option = element.find('option').eq(0); expect(option.val()).toBe(''); expect(option.text()).toBe('blank is so blank'); - // change blankVal and $digest - scope.blankVal = 'not so blank'; - scope.$digest(); + scope.$apply(function() { + scope.blankVal = 'not so blank'; + }); // check blank option is first and is compiled - expect(select.find('option').length == 2); - option = jqLite(select.find('option')[0]); + expect(element.find('option').length).toBe(2); + option = element.find('option').eq(0); expect(option.val()).toBe(''); expect(option.text()).toBe('blank is not so blank'); }); + it('should support binding via ng:bind-template attribute', function () { var option; - createSingleSelect('<option value="" ng:bind-template="blank is {{blankVal}}"></option>'); - scope.blankVal = 'so blank'; - scope.values = [{name:'A'}]; - scope.$digest(); + + scope.$apply(function() { + scope.blankVal = 'so blank'; + scope.values = [{name: 'A'}]; + }); // check blank option is first and is compiled - expect(select.find('option').length == 2); - option = jqLite(select.find('option')[0]); + expect(element.find('option').length).toBe(2); + option = element.find('option').eq(0); expect(option.val()).toBe(''); expect(option.text()).toBe('blank is so blank'); }); + it('should support biding via ng:bind attribute', function () { var option; - createSingleSelect('<option value="" ng:bind="blankVal"></option>'); - scope.blankVal = 'is blank'; - scope.values = [{name:'A'}]; - scope.$digest(); + + scope.$apply(function() { + scope.blankVal = 'is blank'; + scope.values = [{name: 'A'}]; + }); // check blank option is first and is compiled - expect(select.find('option').length == 2); - option = jqLite(select.find('option')[0]); + expect(element.find('option').length).toBe(2); + option = element.find('option').eq(0); expect(option.val()).toBe(''); expect(option.text()).toBe('is blank'); }); + it('should be rendered with the attributes preserved', function () { var option; - createSingleSelect('<option value="" class="coyote" id="road-runner" ' + 'custom-attr="custom-attr">{{blankVal}}</option>'); - scope.blankVal = 'is blank'; - scope.$digest(); + + scope.$apply(function() { + scope.blankVal = 'is blank'; + }); // check blank option is first and is compiled - option = jqLite(select.find('option')[0]); + option = element.find('option').eq(0); expect(option.hasClass('coyote')).toBeTruthy(); expect(option.attr('id')).toBe('road-runner'); expect(option.attr('custom-attr')).toBe('custom-attr'); @@ -519,76 +645,101 @@ describe('select', function() { describe('on change', function() { + it('should update model on change', function() { createSingleSelect(); - scope.values = [{name:'A'}, {name:'B'}]; - scope.selected = scope.values[0]; - scope.$digest(); - expect(select.val()).toEqual('0'); - select.val('1'); - browserTrigger(select, 'change'); + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = scope.values[0]; + }); + + expect(element.val()).toEqual('0'); + + element.val('1'); + browserTrigger(element, 'change'); expect(scope.selected).toEqual(scope.values[1]); }); + it('should update model on change through expression', function() { - createSelect({'ng:model':'selected', 'ng:options':'item.id as item.name for item in values'}); - scope.values = [{id:10, name:'A'}, {id:20, name:'B'}]; - scope.selected = scope.values[0].id; - scope.$digest(); - expect(select.val()).toEqual('0'); + createSelect({ + 'ng:model': 'selected', + 'ng:options': 'item.id as item.name for item in values' + }); - select.val('1'); - browserTrigger(select, 'change'); + scope.$apply(function() { + scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}]; + scope.selected = scope.values[0].id; + }); + + expect(element.val()).toEqual('0'); + + element.val('1'); + browserTrigger(element, 'change'); expect(scope.selected).toEqual(scope.values[1].id); }); + it('should update model to null on change', function() { createSingleSelect(true); - scope.values = [{name:'A'}, {name:'B'}]; - scope.selected = scope.values[0]; - select.val('0'); - scope.$digest(); - select.val(''); - browserTrigger(select, 'change'); + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = scope.values[0]; + element.val('0'); + }); + + element.val(''); + browserTrigger(element, 'change'); expect(scope.selected).toEqual(null); }); }); + describe('select-many', function() { + it('should read multiple selection', function() { createMultiSelect(); - scope.values = [{name:'A'}, {name:'B'}]; - scope.selected = []; - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(jqLite(select.find('option')[0]).prop('selected')).toBeFalsy(); - expect(jqLite(select.find('option')[1]).prop('selected')).toBeFalsy(); + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = []; + }); - scope.selected.push(scope.values[1]); - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(select.find('option')[0].selected).toEqual(false); - expect(select.find('option')[1].selected).toEqual(true); + expect(element.find('option').length).toEqual(2); + expect(element.find('option')[0].selected).toBeFalsy(); + expect(element.find('option')[1].selected).toBeFalsy(); - scope.selected.push(scope.values[0]); - scope.$digest(); - expect(select.find('option').length).toEqual(2); - expect(select.find('option')[0].selected).toEqual(true); - expect(select.find('option')[1].selected).toEqual(true); + scope.$apply(function() { + scope.selected.push(scope.values[1]); + }); + + expect(element.find('option').length).toEqual(2); + expect(element.find('option')[0].selected).toBeFalsy(); + expect(element.find('option')[1].selected).toBeTruthy(); + + scope.$apply(function() { + scope.selected.push(scope.values[0]); + }); + + expect(element.find('option').length).toEqual(2); + expect(element.find('option')[0].selected).toBeTruthy(); + expect(element.find('option')[1].selected).toBeTruthy(); }); + it('should update model on change', function() { createMultiSelect(); - scope.values = [{name:'A'}, {name:'B'}]; - scope.selected = []; - scope.$digest(); - select.find('option')[0].selected = true; + scope.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = []; + }); - browserTrigger(select, 'change'); + element.find('option')[0].selected = true; + + browserTrigger(element, 'change'); expect(scope.selected).toEqual([scope.values[0]]); }); @@ -602,16 +753,57 @@ describe('select', function() { scope.selected = ['1']; scope.$digest(); - expect(select.find('option')[1].selected).toBe(true); + expect(element.find('option')[1].selected).toBe(true); - select.find('option')[0].selected = true; - browserTrigger(select, 'change'); + element.find('option')[0].selected = true; + browserTrigger(element, 'change'); expect(scope.selected).toEqual(['0', '1']); - select.find('option')[1].selected = false; - browserTrigger(select, 'change'); + element.find('option')[1].selected = false; + browserTrigger(element, 'change'); expect(scope.selected).toEqual(['0']); }); }); + + + describe('ng:required', function() { + + it('should allow bindings on ng:required', function() { + createSelect({ + 'ng:model': 'value', + 'ng:options': 'item.name for item in values', + 'ng:required': '{{required}}' + }, true); + + + scope.$apply(function() { + scope.values = [{name: 'A', id: 1}, {name: 'B', id: 2}]; + scope.required = false; + }); + + element.val(''); + browserTrigger(element, 'change'); + expect(element).toBeValid(); + + scope.$apply(function() { + scope.required = true; + }); + expect(element).toBeInvalid(); + + scope.$apply(function() { + scope.value = scope.values[0]; + }); + expect(element).toBeValid(); + + element.val(''); + browserTrigger(element, 'change'); + expect(element).toBeInvalid(); + + scope.$apply(function() { + scope.required = false; + }); + expect(element).toBeValid(); + }); + }); }); }); |