diff options
Diffstat (limited to 'test/ng/directive')
22 files changed, 4405 insertions, 0 deletions
diff --git a/test/ng/directive/aSpec.js b/test/ng/directive/aSpec.js new file mode 100644 index 00000000..8aa2449d --- /dev/null +++ b/test/ng/directive/aSpec.js @@ -0,0 +1,46 @@ +'use strict'; + +describe('a', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + it('should prevent default action to be executed when href is empty', + inject(function($rootScope, $compile) { + var orgLocation = document.location.href, + preventDefaultCalled = false, + event; + + element = $compile('<a href="">empty link</a>')($rootScope); + + if (msie < 9) { + + event = document.createEventObject(); + expect(event.returnValue).not.toBeDefined(); + element[0].fireEvent('onclick', event); + expect(event.returnValue).toEqual(false); + + } else { + + event = document.createEvent('MouseEvent'); + event.initMouseEvent( + 'click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + + event.preventDefaultOrg = event.preventDefault; + event.preventDefault = function() { + preventDefaultCalled = true; + if (this.preventDefaultOrg) this.preventDefaultOrg(); + }; + + element[0].dispatchEvent(event); + + expect(preventDefaultCalled).toEqual(true); + } + + expect(document.location.href).toEqual(orgLocation); + })); +}); diff --git a/test/ng/directive/booleanAttrDirSpecs.js b/test/ng/directive/booleanAttrDirSpecs.js new file mode 100644 index 00000000..7a4244a8 --- /dev/null +++ b/test/ng/directive/booleanAttrDirSpecs.js @@ -0,0 +1,125 @@ +'use strict'; + +describe('boolean attr directives', function() { + var element; + + afterEach(function() { + dealoc(element); + }); + + + it('should bind href', inject(function($rootScope, $compile) { + element = $compile('<a ng-href="{{url}}"></a>')($rootScope) + $rootScope.url = 'http://server' + $rootScope.$digest(); + expect(element.attr('href')).toEqual('http://server'); + })); + + + it('should bind disabled', inject(function($rootScope, $compile) { + element = $compile('<button ng-disabled="isDisabled">Button</button>')($rootScope) + $rootScope.isDisabled = false; + $rootScope.$digest(); + expect(element.attr('disabled')).toBeFalsy(); + $rootScope.isDisabled = true; + $rootScope.$digest(); + expect(element.attr('disabled')).toBeTruthy(); + })); + + + it('should bind checked', inject(function($rootScope, $compile) { + element = $compile('<input type="checkbox" ng-checked="isChecked" />')($rootScope) + $rootScope.isChecked = false; + $rootScope.$digest(); + expect(element.attr('checked')).toBeFalsy(); + $rootScope.isChecked=true; + $rootScope.$digest(); + expect(element.attr('checked')).toBeTruthy(); + })); + + + it('should bind selected', inject(function($rootScope, $compile) { + element = $compile('<select><option value=""></option><option ng-selected="isSelected">Greetings!</option></select>')($rootScope) + jqLite(document.body).append(element) + $rootScope.isSelected=false; + $rootScope.$digest(); + expect(element.children()[1].selected).toBeFalsy(); + $rootScope.isSelected=true; + $rootScope.$digest(); + expect(element.children()[1].selected).toBeTruthy(); + })); + + + it('should bind readonly', inject(function($rootScope, $compile) { + element = $compile('<input type="text" ng-readonly="isReadonly" />')($rootScope) + $rootScope.isReadonly=false; + $rootScope.$digest(); + expect(element.attr('readOnly')).toBeFalsy(); + $rootScope.isReadonly=true; + $rootScope.$digest(); + expect(element.attr('readOnly')).toBeTruthy(); + })); + + + it('should bind multiple', inject(function($rootScope, $compile) { + element = $compile('<select ng-multiple="isMultiple"></select>')($rootScope) + $rootScope.isMultiple=false; + $rootScope.$digest(); + expect(element.attr('multiple')).toBeFalsy(); + $rootScope.isMultiple='multiple'; + $rootScope.$digest(); + expect(element.attr('multiple')).toBeTruthy(); + })); + + + it('should bind src', inject(function($rootScope, $compile) { + element = $compile('<div ng-src="{{url}}" />')($rootScope) + $rootScope.url = 'http://localhost/'; + $rootScope.$digest(); + expect(element.attr('src')).toEqual('http://localhost/'); + })); + + + it('should bind href and merge with other attrs', inject(function($rootScope, $compile) { + element = $compile('<a ng-href="{{url}}" rel="{{rel}}"></a>')($rootScope); + $rootScope.url = 'http://server'; + $rootScope.rel = 'REL'; + $rootScope.$digest(); + expect(element.attr('href')).toEqual('http://server'); + expect(element.attr('rel')).toEqual('REL'); + })); +}); + + +describe('ng-src', function() { + + it('should interpolate the expression and bind to src', inject(function($compile, $rootScope) { + var element = $compile('<div ng-src="some/{{id}}"></div>')($rootScope) + $rootScope.$digest(); + expect(element.attr('src')).toEqual('some/'); + + $rootScope.$apply(function() { + $rootScope.id = 1; + }); + expect(element.attr('src')).toEqual('some/1'); + + dealoc(element); + })); +}); + + +describe('ng-href', function() { + + it('should interpolate the expression and bind to href', inject(function($compile, $rootScope) { + var element = $compile('<div ng-href="some/{{id}}"></div>')($rootScope) + $rootScope.$digest(); + expect(element.attr('href')).toEqual('some/'); + + $rootScope.$apply(function() { + $rootScope.id = 1; + }); + expect(element.attr('href')).toEqual('some/1'); + + dealoc(element); + })); +}); diff --git a/test/ng/directive/formSpec.js b/test/ng/directive/formSpec.js new file mode 100644 index 00000000..5c34b5ad --- /dev/null +++ b/test/ng/directive/formSpec.js @@ -0,0 +1,294 @@ +'use strict'; + +describe('form', function() { + var doc, control, scope, $compile; + + beforeEach(module(function($compileProvider) { + $compileProvider.directive('storeModelCtrl', function() { + return { + require: 'ngModel', + link: function(scope, elm, attr, ctrl) { + control = ctrl; + } + }; + }); + })); + + beforeEach(inject(function($injector) { + $compile = $injector.get('$compile'); + scope = $injector.get('$rootScope'); + })); + + afterEach(function() { + dealoc(doc); + }); + + + it('should instantiate form and attach it to DOM', function() { + doc = $compile('<form>')(scope); + expect(doc.data('$formController')).toBeTruthy(); + expect(doc.data('$formController') instanceof FormController).toBe(true); + }); + + + it('should remove the widget when element removed', function() { + doc = $compile( + '<form name="myForm">' + + '<input type="text" name="alias" ng-model="value" store-model-ctrl/>' + + '</form>')(scope); + + var form = scope.myForm; + control.$setValidity('required', false); + expect(form.alias).toBe(control); + expect(form.$error.required).toEqual([control]); + + doc.find('input').remove(); + expect(form.$error.required).toBe(false); + expect(form.alias).toBeUndefined(); + }); + + + it('should use ng-form as form name', function() { + doc = $compile( + '<div ng-form="myForm">' + + '<input type="text" name="alias" ng-model="value"/>' + + '</div>')(scope); + + expect(scope.myForm).toBeDefined(); + expect(scope.myForm.alias).toBeDefined(); + }); + + + it('should prevent form submission', function() { + var startingUrl = '' + window.location; + 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', function() { + var callback = jasmine.createSpy('submit').andCallFake(function(event) { + expect(event.isDefaultPrevented()).toBe(false); + event.preventDefault(); + }); + + 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 when name attr is defined', function() { + doc = $compile('<form name="myForm"></form>')(scope); + expect(scope.myForm).toBeTruthy(); + expect(doc.data('$formController')).toBeTruthy(); + expect(doc.data('$formController')).toEqual(scope.myForm); + }); + + + it('should allow form name to be an expression', function() { + doc = $compile('<form name="obj.myForm"></form>')(scope); + + expect(scope['obj.myForm']).toBeTruthy(); + }); + + + it('should support two forms on a single scope', function() { + doc = $compile( + '<div>' + + '<form name="formA">' + + '<input name="firstName" ng-model="firstName" required>' + + '</form>' + + '<form name="formB">' + + '<input name="lastName" ng-model="lastName" required>' + + '</form>' + + '</div>' + )(scope); + + scope.$apply(); + + expect(scope.formA.$error.required.length).toBe(1); + expect(scope.formA.$error.required).toEqual([scope.formA.firstName]); + expect(scope.formB.$error.required.length).toBe(1); + expect(scope.formB.$error.required).toEqual([scope.formB.lastName]); + + var inputA = doc.find('input').eq(0), + inputB = doc.find('input').eq(1); + + inputA.val('val1'); + browserTrigger(inputA, 'blur'); + inputB.val('val2'); + browserTrigger(inputB, 'blur'); + + expect(scope.firstName).toBe('val1'); + expect(scope.lastName).toBe('val2'); + + expect(scope.formA.$error.required).toBe(false); + expect(scope.formB.$error.required).toBe(false); + }); + + + 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('nested forms', function() { + + it('should chain nested forms', function() { + doc = jqLite( + '<ng:form name="parent">' + + '<ng:form name="child">' + + '<input ng:model="modelA" name="inputA">' + + '<input ng:model="modelB" name="inputB">' + + '</ng:form>' + + '</ng:form>'); + $compile(doc)(scope); + + var parent = scope.parent, + child = scope.child, + inputA = child.inputA, + inputB = child.inputB; + + inputA.$setValidity('MyError', false); + inputB.$setValidity('MyError', false); + expect(parent.$error.MyError).toEqual([child]); + expect(child.$error.MyError).toEqual([inputA, inputB]); + + inputA.$setValidity('MyError', true); + expect(parent.$error.MyError).toEqual([child]); + expect(child.$error.MyError).toEqual([inputB]); + + inputB.$setValidity('MyError', true); + expect(parent.$error.MyError).toBe(false); + expect(child.$error.MyError).toBe(false); + }); + + + it('should deregister a child form when its DOM is removed', function() { + doc = jqLite( + '<form name="parent">' + + '<div class="ng-form" name="child">' + + '<input ng:model="modelA" name="inputA" required>' + + '</div>' + + '</form>'); + $compile(doc)(scope); + scope.$apply(); + + var parent = scope.parent, + child = scope.child; + + expect(parent).toBeDefined(); + expect(child).toBeDefined(); + expect(parent.$error.required).toEqual([child]); + doc.children().remove(); //remove child + + expect(parent.child).toBeUndefined(); + expect(scope.child).toBeUndefined(); + expect(parent.$error.required).toBe(false); + }); + + + 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)(scope); + + 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.$setValidity('myRule', false); + expect(input.$error.myRule).toEqual(true); + expect(child.$error.myRule).toEqual([input]); + expect(parent.$error.myRule).toEqual([child]); + + input.$setValidity('myRule', true); + expect(parent.$error.myRule).toBe(false); + expect(child.$error.myRule).toBe(false); + }); + }) + + + describe('validation', function() { + + beforeEach(function() { + doc = $compile( + '<form name="form">' + + '<input 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(); + + control.$setValidity('error', false); + expect(doc).toBeInvalid(); + expect(doc.hasClass('ng-valid-error')).toBe(false); + expect(doc.hasClass('ng-invalid-error')).toBe(true); + + control.$setValidity('another', false); + expect(doc.hasClass('ng-valid-error')).toBe(false); + expect(doc.hasClass('ng-invalid-error')).toBe(true); + expect(doc.hasClass('ng-valid-another')).toBe(false); + expect(doc.hasClass('ng-invalid-another')).toBe(true); + + control.$setValidity('error', true); + expect(doc).toBeInvalid(); + expect(doc.hasClass('ng-valid-error')).toBe(true); + expect(doc.hasClass('ng-invalid-error')).toBe(false); + expect(doc.hasClass('ng-valid-another')).toBe(false); + expect(doc.hasClass('ng-invalid-another')).toBe(true); + + control.$setValidity('another', true); + expect(doc).toBeValid(); + expect(doc.hasClass('ng-valid-error')).toBe(true); + expect(doc.hasClass('ng-invalid-error')).toBe(false); + expect(doc.hasClass('ng-valid-another')).toBe(true); + expect(doc.hasClass('ng-invalid-another')).toBe(false); + }); + + + it('should have ng-pristine/ng-dirty css class', function() { + expect(doc).toBePristine(); + + control.$setViewValue(''); + scope.$apply(); + expect(doc).toBeDirty(); + }); + }); +}); diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js new file mode 100644 index 00000000..e5f083b3 --- /dev/null +++ b/test/ng/directive/inputSpec.js @@ -0,0 +1,1119 @@ +'use strict'; + +describe('NgModelController', function() { + var ctrl, scope, ngModelAccessor, element, parentFormCtrl; + + beforeEach(inject(function($rootScope, $controller) { + var attrs = {name: 'testAlias'}; + + parentFormCtrl = { + $setValidity: jasmine.createSpy('$setValidity'), + $setDirty: jasmine.createSpy('$setDirty') + } + + element = jqLite('<form><input></form>'); + element.data('$formController', parentFormCtrl); + + scope = $rootScope; + ngModelAccessor = jasmine.createSpy('ngModel accessor'); + ctrl = $controller(NgModelController, { + $scope: scope, $element: element.find('input'), ngModel: ngModelAccessor, $attrs: attrs + }); + // mock accessor (locals) + ngModelAccessor.andCallFake(function(val) { + if (isDefined(val)) scope.value = val; + return scope.value; + }); + })); + + + afterEach(function() { + dealoc(element); + }); + + + 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(); + + expect(ctrl.$formatters).toEqual([]); + expect(ctrl.$parsers).toEqual([]); + + expect(ctrl.$name).toBe('testAlias'); + }); + + + describe('setValidity', function() { + + it('should propagate invalid to the parent form only when valid', function() { + expect(parentFormCtrl.$setValidity).not.toHaveBeenCalled(); + ctrl.$setValidity('ERROR', false); + expect(parentFormCtrl.$setValidity).toHaveBeenCalledOnceWith('ERROR', false, ctrl); + + parentFormCtrl.$setValidity.reset(); + ctrl.$setValidity('ERROR', false); + expect(parentFormCtrl.$setValidity).not.toHaveBeenCalled(); + }); + + + it('should set and unset the error', function() { + ctrl.$setValidity('required', false); + expect(ctrl.$error.required).toBe(true); + + ctrl.$setValidity('required', true); + expect(ctrl.$error.required).toBe(false); + }); + + + it('should set valid/invalid', function() { + ctrl.$setValidity('first', false); + expect(ctrl.$valid).toBe(false); + expect(ctrl.$invalid).toBe(true); + + ctrl.$setValidity('second', false); + expect(ctrl.$valid).toBe(false); + expect(ctrl.$invalid).toBe(true); + + ctrl.$setValidity('second', true); + expect(ctrl.$valid).toBe(false); + expect(ctrl.$invalid).toBe(true); + + ctrl.$setValidity('first', true); + expect(ctrl.$valid).toBe(true); + expect(ctrl.$invalid).toBe(false); + }); + + + it('should emit $valid only when $invalid', function() { + ctrl.$setValidity('error', true); + expect(parentFormCtrl.$setValidity).toHaveBeenCalledOnceWith('error', true, ctrl); + parentFormCtrl.$setValidity.reset(); + + ctrl.$setValidity('error', false); + expect(parentFormCtrl.$setValidity).toHaveBeenCalledOnceWith('error', false, ctrl); + parentFormCtrl.$setValidity.reset(); + ctrl.$setValidity('error', true); + expect(parentFormCtrl.$setValidity).toHaveBeenCalledOnceWith('error', true, ctrl); + }); + }); + + + describe('view -> model', function() { + + it('should set the value to $viewValue', function() { + ctrl.$setViewValue('some-val'); + expect(ctrl.$viewValue).toBe('some-val'); + }); + + + it('should pipeline all registered parsers and set result to $modelValue', function() { + var log = []; + + ctrl.$parsers.push(function(value) { + log.push(value); + return value + '-a'; + }); + + ctrl.$parsers.push(function(value) { + log.push(value); + return value + '-b'; + }); + + ctrl.$setViewValue('init'); + expect(log).toEqual(['init', 'init-a']); + expect(ctrl.$modelValue).toBe('init-a-b'); + }); + + + it('should fire viewChangeListeners when the value changes in the view (even if invalid)', + function() { + var spy = jasmine.createSpy('viewChangeListener'); + ctrl.$viewChangeListeners.push(spy); + ctrl.$setViewValue('val'); + expect(spy).toHaveBeenCalledOnce(); + spy.reset(); + + // invalid + ctrl.$parsers.push(function() {return undefined;}); + ctrl.$setViewValue('val'); + expect(spy).toHaveBeenCalledOnce(); + }); + + + it('should reset the model when the view is invalid', function() { + ctrl.$setViewValue('aaaa'); + expect(ctrl.$modelValue).toBe('aaaa'); + + // add a validator that will make any input invalid + ctrl.$parsers.push(function() {return undefined;}); + expect(ctrl.$modelValue).toBe('aaaa'); + ctrl.$setViewValue('bbbb'); + expect(ctrl.$modelValue).toBeUndefined(); + }); + + + it('should call parentForm.$setDirty only when pristine', function() { + ctrl.$setViewValue(''); + expect(ctrl.$pristine).toBe(false); + expect(ctrl.$dirty).toBe(true); + expect(parentFormCtrl.$setDirty).toHaveBeenCalledOnce(); + + parentFormCtrl.$setDirty.reset(); + ctrl.$setViewValue(''); + expect(ctrl.$pristine).toBe(false); + expect(ctrl.$dirty).toBe(true); + expect(parentFormCtrl.$setDirty).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 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 + ''; + }); + + scope.$apply(function() { + scope.value = 3; + }); + expect(log).toEqual([3, 5]); + expect(ctrl.$viewValue).toBe('5'); + }); + + + it('should $render only if value changed', function() { + spyOn(ctrl, '$render'); + + scope.$apply(function() { + scope.value = 3; + }); + expect(ctrl.$render).toHaveBeenCalledOnce(); + ctrl.$render.reset(); + + ctrl.$formatters.push(function() {return 3;}); + scope.$apply(function() { + scope.value = 5; + }); + expect(ctrl.$render).not.toHaveBeenCalled(); + }); + + + it('should clear the view even if invalid', function() { + spyOn(ctrl, '$render'); + + ctrl.$formatters.push(function() {return undefined;}); + scope.$apply(function() { + scope.value = 5; + }); + expect(ctrl.$render).toHaveBeenCalledOnce(); + }); + }); +}); + +describe('ng-model', function() { + + 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(); + expect(element.hasClass('ng-valid-email')).toBe(true); + expect(element.hasClass('ng-invalid-email')).toBe(false); + + $rootScope.$apply(function() { + $rootScope.value = 'invalid-email'; + }); + expect(element).toBeInvalid(); + expect(element).toBePristine(); + expect(element.hasClass('ng-valid-email')).toBe(false); + expect(element.hasClass('ng-invalid-email')).toBe(true); + + element.val('invalid-again'); + browserTrigger(element, 'blur'); + expect(element).toBeInvalid(); + expect(element).toBeDirty(); + expect(element.hasClass('ng-valid-email')).toBe(false); + expect(element.hasClass('ng-invalid-email')).toBe(true); + + element.val('vojta@google.com'); + browserTrigger(element, 'blur'); + expect(element).toBeValid(); + expect(element).toBeDirty(); + expect(element.hasClass('ng-valid-email')).toBe(true); + expect(element.hasClass('ng-invalid-email')).toBe(false); + + dealoc(element); + })); + + + it('should set invalid classes on init', inject(function($compile, $rootScope) { + var element = $compile('<input type="email" ng-model="value" required />')($rootScope); + $rootScope.$digest(); + + expect(element).toBeInvalid(); + expect(element).toHaveClass('ng-invalid-required'); + })); +}); + + +describe('input', function() { + var formElm, inputElm, scope, $compile; + + function compileInput(inputHtml) { + formElm = jqLite('<form name="form">' + inputHtml + '</form>'); + inputElm = formElm.find('input'); + $compile(formElm)(scope); + } + + function changeInputValueTo(value) { + inputElm.val(value); + browserTrigger(inputElm, 'blur'); + } + + beforeEach(inject(function($injector) { + $compile = $injector.get('$compile'); + scope = $injector.get('$rootScope'); + })); + + afterEach(function() { + dealoc(formElm); + }); + + + it('should bind to a model', function() { + compileInput('<input type="text" ng-model="name" name="alias" ng-change="change()" />'); + + scope.$apply(function() { + scope.name = 'misko'; + }); + + expect(inputElm.val()).toBe('misko'); + }); + + + it('should not set readonly or disabled property on ie7', function() { + this.addMatchers({ + toBeOff: function(attributeName) { + var actualValue = this.actual.attr(attributeName); + this.message = function() { + return "Attribute '" + attributeName + "' expected to be off but was '" + actualValue + + "' in: " + angular.mock.dump(this.actual); + } + + return !actualValue || actualValue == 'false'; + } + }); + + compileInput('<input type="text" ng-model="name" name="alias"/>'); + expect(inputElm.prop('readOnly')).toBe(false); + expect(inputElm.prop('disabled')).toBe(false); + + expect(inputElm).toBeOff('readOnly'); + expect(inputElm).toBeOff('readonly'); + expect(inputElm).toBeOff('disabled'); + }); + + + it('should cleanup it self from the parent form', function() { + compileInput('<input ng-model="name" name="alias" required>'); + + scope.$apply(); + expect(scope.form.$error.required.length).toBe(1); + + inputElm.remove(); + expect(scope.form.$error.required).toBe(false); + }); + + + 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 ignore input without ng-model attr', function() { + compileInput('<input type="text" 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', function() { + expect(function() { + compileInput('<input type="text" ng-model="throw \'\'">'); + scope.$digest(); + }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at ['']."); + }); + + + it("should render as blank if null", function() { + compileInput('<input type="text" ng-model="age" />'); + + scope.$apply(function() { + scope.age = null; + }); + + expect(scope.age).toBeNull(); + expect(inputElm.val()).toEqual(''); + }); + + + it('should render 0 even if it is a number', function() { + compileInput('<input type="text" ng-model="value" />'); + scope.$apply(function() { + scope.value = 0; + }); + + expect(inputElm.val()).toBe('0'); + }); + + + 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(); + + 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(); + + 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 reset the model if view is 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).toBeUndefined(); + 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(inputElm.val()).toBe(''); + + scope.$apply(function() { + scope.age = null; + }); + + expect(scope.age).toBeNull(); + expect(inputElm.val()).toBe(''); + }); + + + it('should parse empty string to null', function() { + compileInput('<input type="number" ng-model="age" />'); + + 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(); + + changeInputValueTo('1'); + expect(inputElm).toBeInvalid(); + expect(scope.value).toBeFalsy(); + expect(scope.form.alias.$error.min).toBeTruthy(); + + changeInputValueTo('100'); + expect(inputElm).toBeValid(); + expect(scope.value).toBe(100); + expect(scope.form.alias.$error.min).toBeFalsy(); + }); + }); + + + describe('max', function() { + + it('should validate', function() { + compileInput('<input type="number" ng-model="value" name="alias" max="10" />'); + scope.$digest(); + + 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(); + }); + }); + + + describe('required', function() { + + 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 />'); + + scope.$apply(function() { + scope.value = 0; + }); + + expect(inputElm).toBeValid(); + expect(inputElm.val()).toBe('0') + expect(scope.form.alias.$error.required).toBeFalsy(); + }); + }); + }); + + describe('email', function() { + + it('should validate e-mail', function() { + compileInput('<input type="email" ng-model="email" name="alias" />'); + + var widget = scope.form.alias; + changeInputValueTo('vojta@google.com'); + + expect(scope.email).toBe('vojta@google.com'); + expect(inputElm).toBeValid(); + expect(widget.$error.email).toBe(false); + + changeInputValueTo('invalid@'); + expect(scope.email).toBeUndefined(); + 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 validate url', function() { + compileInput('<input type="url" ng-model="url" name="alias" />'); + var widget = scope.form.alias; + + changeInputValueTo('http://www.something.com'); + expect(scope.url).toBe('http://www.something.com'); + expect(inputElm).toBeValid(); + expect(widget.$error.url).toBe(false); + + changeInputValueTo('invalid.com'); + expect(scope.url).toBeUndefined(); + expect(inputElm).toBeInvalid(); + expect(widget.$error.url).toBeTruthy(); + }); + + + 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('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 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}}" />'); + + scope.$apply(function() { + scope.value = 'blue'; + scope.some = 'blue'; + scope.other = 'red'; + }); + + expect(inputElm[0].checked).toBe(true); + expect(inputElm[1].checked).toBe(false); + + browserTrigger(inputElm[1]); + expect(scope.value).toBe('red'); + + scope.$apply(function() { + scope.other = 'non-red'; + }); + + expect(inputElm[0].checked).toBe(false); + expect(inputElm[1].checked).toBe(false); + }); + }); + + + 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 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'); + }); + + + it('should be required if false', function() { + compileInput('<input type="checkbox" ng:model="value" required />'); + + browserTrigger(inputElm, 'click'); + expect(inputElm[0].checked).toBe(true); + expect(inputElm).toBeValid(); + + browserTrigger(inputElm, 'click'); + expect(inputElm[0].checked).toBe(false); + expect(inputElm).toBeInvalid(); + }); + }); + + + describe('textarea', function() { + + it("should process textarea", function() { + compileInput('<textarea ng-model="name"></textarea>'); + inputElm = formElm.find('textarea'); + + scope.$apply(function() { + scope.name = 'Adam'; + }); + expect(inputElm.val()).toEqual('Adam'); + + 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('ng-list', function() { + + it('should parse text into an array', function() { + compileInput('<input type="text" ng-model="list" ng-list />'); + + // 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']); + }); + + + 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 />'); + + changeInputValueTo('a '); + expect(inputElm.val()).toEqual('a '); + expect(scope.list).toEqual(['a']); + + changeInputValueTo('a ,'); + expect(inputElm.val()).toEqual('a ,'); + expect(scope.list).toEqual(['a']); + + 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']); + }); + + + xit('should require at least one item', function() { + compileInput('<input type="text" ng-model="list" ng-list required />'); + + changeInputValueTo(' , '); + expect(inputElm).toBeInvalid(); + }); + + + it('should convert empty string to an empty array', function() { + compileInput('<input type="text" ng-model="list" ng-list />'); + + changeInputValueTo(''); + expect(scope.list).toEqual([]); + }); + + + it('should allow custom separator', function() { + compileInput('<input type="text" ng-model="list" ng-list=":" />'); + + changeInputValueTo('a,a'); + expect(scope.list).toEqual(['a,a']); + + changeInputValueTo('a:b'); + expect(scope.list).toEqual(['a', 'b']); + }); + + + it('should allow regexp as a separator', function() { + compileInput('<input type="text" ng-model="list" ng-list="/:|,/" />'); + + changeInputValueTo('a,b'); + expect(scope.list).toEqual(['a', 'b']); + + changeInputValueTo('a,b: c'); + expect(scope.list).toEqual(['a', 'b', 'c']); + }); + }); + + describe('required', function() { + + it('should allow bindings on ng-required', function() { + compileInput('<input type="text" ng-model="value" ng-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(); + }); + }); + + + describe('ng-model-instant', function() { + + it('should bind keydown, change, input events', inject(function($browser) { + compileInput('<input type="text" ng-model="value" ng-model-instant />'); + + inputElm.val('value1'); + browserTrigger(inputElm, 'keydown'); + + // should be async (because of keydown) + expect(scope.value).toBeUndefined(); + + $browser.defer.flush(); + expect(scope.value).toBe('value1'); + + inputElm.val('value2'); + browserTrigger(inputElm, 'change'); + expect(scope.value).toBe('value2'); + + if (msie < 9) return; + + inputElm.val('value3'); + browserTrigger(inputElm, 'input'); + expect(scope.value).toBe('value3'); + })); + }); + + + describe('ng-value', function() { + + it('should evaluate and set constant expressions', function() { + compileInput('<input type="radio" ng-model="selected" ng-value="true">' + + '<input type="radio" ng-model="selected" ng-value="false">' + + '<input type="radio" ng-model="selected" ng-value="1">'); + scope.$digest(); + + browserTrigger(inputElm[0], 'click'); + expect(scope.selected).toBe(true); + + browserTrigger(inputElm[1], 'click'); + expect(scope.selected).toBe(false); + + browserTrigger(inputElm[2], 'click'); + expect(scope.selected).toBe(1); + }); + + + it('should watch the expression', function() { + compileInput('<input type="radio" ng-model="selected" ng-value="value">'); + + scope.$apply(function() { + scope.selected = scope.value = {some: 'object'}; + }); + expect(inputElm[0].checked).toBe(true); + + scope.$apply(function() { + scope.value = {some: 'other'}; + }); + expect(inputElm[0].checked).toBe(false); + + browserTrigger(inputElm, 'click'); + expect(scope.selected).toBe(scope.value); + }); + }); +}); diff --git a/test/ng/directive/ngBindSpec.js b/test/ng/directive/ngBindSpec.js new file mode 100644 index 00000000..01a07c52 --- /dev/null +++ b/test/ng/directive/ngBindSpec.js @@ -0,0 +1,80 @@ +'use strict'; + +describe('ng-bind-*', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + describe('ng-bind', function() { + + it('should set text', inject(function($rootScope, $compile) { + element = $compile('<div ng-bind="a"></div>')($rootScope); + expect(element.text()).toEqual(''); + $rootScope.a = 'misko'; + $rootScope.$digest(); + expect(element.hasClass('ng-binding')).toEqual(true); + expect(element.text()).toEqual('misko'); + })); + + it('should set text to blank if undefined', inject(function($rootScope, $compile) { + element = $compile('<div ng-bind="a"></div>')($rootScope); + $rootScope.a = 'misko'; + $rootScope.$digest(); + expect(element.text()).toEqual('misko'); + $rootScope.a = undefined; + $rootScope.$digest(); + expect(element.text()).toEqual(''); + $rootScope.a = null; + $rootScope.$digest(); + expect(element.text()).toEqual(''); + })); + + it('should set html', inject(function($rootScope, $compile) { + element = $compile('<div ng-bind-html="html"></div>')($rootScope); + $rootScope.html = '<div unknown>hello</div>'; + $rootScope.$digest(); + expect(lowercase(element.html())).toEqual('<div>hello</div>'); + })); + + it('should set unsafe html', inject(function($rootScope, $compile) { + element = $compile('<div ng-bind-html-unsafe="html"></div>')($rootScope); + $rootScope.html = '<div onclick="">hello</div>'; + $rootScope.$digest(); + expect(lowercase(element.html())).toEqual('<div onclick="">hello</div>'); + })); + + it('should suppress rendering of falsy values', inject(function($rootScope, $compile) { + element = $compile('<div>{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}</div>')($rootScope); + $rootScope.$digest(); + expect(element.text()).toEqual('-0false'); + })); + + it('should render object as JSON ignore $$', inject(function($rootScope, $compile) { + element = $compile('<div>{{ {key:"value", $$key:"hide"} }}</div>')($rootScope); + $rootScope.$digest(); + expect(fromJson(element.text())).toEqual({key:'value'}); + })); + }); + + + describe('ng-bind-template', function() { + + it('should ng-bind-template', inject(function($rootScope, $compile) { + element = $compile('<div ng-bind-template="Hello {{name}}!"></div>')($rootScope); + $rootScope.name = 'Misko'; + $rootScope.$digest(); + expect(element.hasClass('ng-binding')).toEqual(true); + expect(element.text()).toEqual('Hello Misko!'); + })); + + it('should render object as JSON ignore $$', inject(function($rootScope, $compile) { + element = $compile('<pre>{{ {key:"value", $$key:"hide"} }}</pre>')($rootScope); + $rootScope.$digest(); + expect(fromJson(element.text())).toEqual({key:'value'}); + })); + }); +}); diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js new file mode 100644 index 00000000..2297e343 --- /dev/null +++ b/test/ng/directive/ngClassSpec.js @@ -0,0 +1,204 @@ +'use strict'; + +describe('ng-class', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + it('should add new and remove old classes dynamically', inject(function($rootScope, $compile) { + element = $compile('<div class="existing" ng-class="dynClass"></div>')($rootScope); + $rootScope.dynClass = 'A'; + $rootScope.$digest(); + expect(element.hasClass('existing')).toBe(true); + expect(element.hasClass('A')).toBe(true); + + $rootScope.dynClass = 'B'; + $rootScope.$digest(); + expect(element.hasClass('existing')).toBe(true); + expect(element.hasClass('A')).toBe(false); + expect(element.hasClass('B')).toBe(true); + + delete $rootScope.dynClass; + $rootScope.$digest(); + expect(element.hasClass('existing')).toBe(true); + expect(element.hasClass('A')).toBe(false); + expect(element.hasClass('B')).toBe(false); + })); + + + it('should support adding multiple classes via an array', inject(function($rootScope, $compile) { + element = $compile('<div class="existing" ng-class="[\'A\', \'B\']"></div>')($rootScope); + $rootScope.$digest(); + expect(element.hasClass('existing')).toBeTruthy(); + expect(element.hasClass('A')).toBeTruthy(); + expect(element.hasClass('B')).toBeTruthy(); + })); + + + it('should support adding multiple classes conditionally via a map of class names to boolean' + + 'expressions', inject(function($rootScope, $compile) { + var element = $compile( + '<div class="existing" ' + + 'ng-class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB}">' + + '</div>')($rootScope); + $rootScope.conditionA = true; + $rootScope.$digest(); + expect(element.hasClass('existing')).toBeTruthy(); + expect(element.hasClass('A')).toBeTruthy(); + expect(element.hasClass('B')).toBeFalsy(); + expect(element.hasClass('AnotB')).toBeTruthy(); + + $rootScope.conditionB = function() { return true }; + $rootScope.$digest(); + expect(element.hasClass('existing')).toBeTruthy(); + expect(element.hasClass('A')).toBeTruthy(); + expect(element.hasClass('B')).toBeTruthy(); + expect(element.hasClass('AnotB')).toBeFalsy(); + })); + + + it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) { + element = $compile('<div class="existing" ng-class="\'A B\'"></div>')($rootScope); + $rootScope.$digest(); + expect(element.hasClass('existing')).toBeTruthy(); + expect(element.hasClass('A')).toBeTruthy(); + expect(element.hasClass('B')).toBeTruthy(); + })); + + + it('should preserve class added post compilation with pre-existing classes', inject(function($rootScope, $compile) { + element = $compile('<div class="existing" ng-class="dynClass"></div>')($rootScope); + $rootScope.dynClass = 'A'; + $rootScope.$digest(); + expect(element.hasClass('existing')).toBe(true); + + // add extra class, change model and eval + element.addClass('newClass'); + $rootScope.dynClass = 'B'; + $rootScope.$digest(); + + expect(element.hasClass('existing')).toBe(true); + expect(element.hasClass('B')).toBe(true); + expect(element.hasClass('newClass')).toBe(true); + })); + + + it('should preserve class added post compilation without pre-existing classes"', inject(function($rootScope, $compile) { + element = $compile('<div ng-class="dynClass"></div>')($rootScope); + $rootScope.dynClass = 'A'; + $rootScope.$digest(); + expect(element.hasClass('A')).toBe(true); + + // add extra class, change model and eval + element.addClass('newClass'); + $rootScope.dynClass = 'B'; + $rootScope.$digest(); + + expect(element.hasClass('B')).toBe(true); + expect(element.hasClass('newClass')).toBe(true); + })); + + + it('should preserve other classes with similar name"', inject(function($rootScope, $compile) { + element = $compile('<div class="ui-panel ui-selected" ng-class="dynCls"></div>')($rootScope); + $rootScope.dynCls = 'panel'; + $rootScope.$digest(); + $rootScope.dynCls = 'foo'; + $rootScope.$digest(); + expect(element[0].className).toBe('ui-panel ui-selected ng-scope foo'); + })); + + + it('should not add duplicate classes', inject(function($rootScope, $compile) { + element = $compile('<div class="panel bar" ng-class="dynCls"></div>')($rootScope); + $rootScope.dynCls = 'panel'; + $rootScope.$digest(); + expect(element[0].className).toBe('panel bar ng-scope'); + })); + + + it('should remove classes even if it was specified via class attribute', inject(function($rootScope, $compile) { + element = $compile('<div class="panel bar" ng-class="dynCls"></div>')($rootScope); + $rootScope.dynCls = 'panel'; + $rootScope.$digest(); + $rootScope.dynCls = 'window'; + $rootScope.$digest(); + expect(element[0].className).toBe('bar ng-scope window'); + })); + + + it('should remove classes even if they were added by another code', inject(function($rootScope, $compile) { + element = $compile('<div ng-class="dynCls"></div>')($rootScope); + $rootScope.dynCls = 'foo'; + $rootScope.$digest(); + element.addClass('foo'); + $rootScope.dynCls = ''; + $rootScope.$digest(); + })); + + + it('should convert undefined and null values to an empty string', inject(function($rootScope, $compile) { + element = $compile('<div ng-class="dynCls"></div>')($rootScope); + $rootScope.dynCls = [undefined, null]; + $rootScope.$digest(); + })); + + + it('should ng-class odd/even', inject(function($rootScope, $compile) { + element = $compile('<ul><li ng-repeat="i in [0,1]" class="existing" ng-class-odd="\'odd\'" ng-class-even="\'even\'"></li><ul>')($rootScope); + $rootScope.$digest(); + var e1 = jqLite(element[0].childNodes[1]); + var e2 = jqLite(element[0].childNodes[2]); + expect(e1.hasClass('existing')).toBeTruthy(); + expect(e1.hasClass('odd')).toBeTruthy(); + expect(e2.hasClass('existing')).toBeTruthy(); + expect(e2.hasClass('even')).toBeTruthy(); + })); + + + it('should allow both ng-class and ng-class-odd/even on the same element', inject(function($rootScope, $compile) { + element = $compile('<ul>' + + '<li ng-repeat="i in [0,1]" ng-class="\'plainClass\'" ' + + 'ng-class-odd="\'odd\'" ng-class-even="\'even\'"></li>' + + '<ul>')($rootScope); + $rootScope.$apply(); + var e1 = jqLite(element[0].childNodes[1]); + var e2 = jqLite(element[0].childNodes[2]); + + expect(e1.hasClass('plainClass')).toBeTruthy(); + expect(e1.hasClass('odd')).toBeTruthy(); + expect(e1.hasClass('even')).toBeFalsy(); + expect(e2.hasClass('plainClass')).toBeTruthy(); + expect(e2.hasClass('even')).toBeTruthy(); + expect(e2.hasClass('odd')).toBeFalsy(); + })); + + + it('should allow both ng-class and ng-class-odd/even with multiple classes', inject(function($rootScope, $compile) { + element = $compile('<ul>' + + '<li ng-repeat="i in [0,1]" ng-class="[\'A\', \'B\']" ' + + 'ng-class-odd="[\'C\', \'D\']" ng-class-even="[\'E\', \'F\']"></li>' + + '<ul>')($rootScope); + $rootScope.$apply(); + var e1 = jqLite(element[0].childNodes[1]); + var e2 = jqLite(element[0].childNodes[2]); + + expect(e1.hasClass('A')).toBeTruthy(); + expect(e1.hasClass('B')).toBeTruthy(); + expect(e1.hasClass('C')).toBeTruthy(); + expect(e1.hasClass('D')).toBeTruthy(); + expect(e1.hasClass('E')).toBeFalsy(); + expect(e1.hasClass('F')).toBeFalsy(); + + expect(e2.hasClass('A')).toBeTruthy(); + expect(e2.hasClass('B')).toBeTruthy(); + expect(e2.hasClass('E')).toBeTruthy(); + expect(e2.hasClass('F')).toBeTruthy(); + expect(e2.hasClass('C')).toBeFalsy(); + expect(e2.hasClass('D')).toBeFalsy(); + })); +}); diff --git a/test/ng/directive/ngClickSpec.js b/test/ng/directive/ngClickSpec.js new file mode 100644 index 00000000..f5086d1c --- /dev/null +++ b/test/ng/directive/ngClickSpec.js @@ -0,0 +1,26 @@ +'use strict'; + +describe('ng-click', function() { + var element; + + afterEach(function() { + dealoc(element); + }); + + it('should get called on a click', inject(function($rootScope, $compile) { + element = $compile('<div ng-click="clicked = true"></div>')($rootScope); + $rootScope.$digest(); + expect($rootScope.clicked).toBeFalsy(); + + browserTrigger(element, 'click'); + expect($rootScope.clicked).toEqual(true); + })); + + it('should pass event object', inject(function($rootScope, $compile) { + element = $compile('<div ng-click="event = $event"></div>')($rootScope); + $rootScope.$digest(); + + browserTrigger(element, 'click'); + expect($rootScope.event).toBeDefined(); + })); +}); diff --git a/test/ng/directive/ngCloakSpec.js b/test/ng/directive/ngCloakSpec.js new file mode 100644 index 00000000..f3c28b60 --- /dev/null +++ b/test/ng/directive/ngCloakSpec.js @@ -0,0 +1,49 @@ +'use strict'; + +describe('ng-cloak', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + it('should get removed when an element is compiled', inject(function($rootScope, $compile) { + element = jqLite('<div ng-cloak></div>'); + expect(element.attr('ng-cloak')).toBe(''); + $compile(element); + expect(element.attr('ng-cloak')).toBeUndefined(); + })); + + + it('should remove ng-cloak class from a compiled element with attribute', inject( + function($rootScope, $compile) { + element = jqLite('<div ng-cloak class="foo ng-cloak bar"></div>'); + + expect(element.hasClass('foo')).toBe(true); + expect(element.hasClass('ng-cloak')).toBe(true); + expect(element.hasClass('bar')).toBe(true); + + $compile(element); + + expect(element.hasClass('foo')).toBe(true); + expect(element.hasClass('ng-cloak')).toBe(false); + expect(element.hasClass('bar')).toBe(true); + })); + + + it('should remove ng-cloak class from a compiled element', inject(function($rootScope, $compile) { + element = jqLite('<div class="foo ng-cloak bar"></div>'); + + expect(element.hasClass('foo')).toBe(true); + expect(element.hasClass('ng-cloak')).toBe(true); + expect(element.hasClass('bar')).toBe(true); + + $compile(element); + + expect(element.hasClass('foo')).toBe(true); + expect(element.hasClass('ng-cloak')).toBe(false); + expect(element.hasClass('bar')).toBe(true); + })); +}); diff --git a/test/ng/directive/ngControllerSpec.js b/test/ng/directive/ngControllerSpec.js new file mode 100644 index 00000000..832a683d --- /dev/null +++ b/test/ng/directive/ngControllerSpec.js @@ -0,0 +1,65 @@ +'use strict'; + +describe('ng-controller', function() { + var element; + + beforeEach(inject(function($window) { + $window.Greeter = function($scope) { + // private stuff (not exported to scope) + this.prefix = 'Hello '; + + // public stuff (exported to scope) + var ctrl = this; + $scope.name = 'Misko'; + $scope.greet = function(name) { + return ctrl.prefix + name + ctrl.suffix; + }; + + $scope.protoGreet = bind(this, this.protoGreet); + }; + $window.Greeter.prototype = { + suffix: '!', + protoGreet: function(name) { + return this.prefix + name + this.suffix; + } + }; + + $window.Child = function($scope) { + $scope.name = 'Adam'; + }; + })); + + afterEach(function() { + dealoc(element); + }); + + + it('should instantiate controller and bind methods', inject(function($compile, $rootScope) { + element = $compile('<div ng-controller="Greeter">{{greet(name)}}</div>')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Hello Misko!'); + })); + + + it('should allow nested controllers', inject(function($compile, $rootScope) { + element = $compile('<div ng-controller="Greeter"><div ng-controller="Child">{{greet(name)}}</div></div>')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Hello Adam!'); + dealoc(element); + + element = $compile('<div ng-controller="Greeter"><div ng-controller="Child">{{protoGreet(name)}}</div></div>')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Hello Adam!'); + })); + + + it('should instantiate controller defined on scope', inject(function($compile, $rootScope) { + $rootScope.Greeter = function($scope) { + $scope.name = 'Vojta'; + }; + + element = $compile('<div ng-controller="Greeter">{{name}}</div>')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Vojta'); + })); +}); diff --git a/test/ng/directive/ngEventDirsSpec.js b/test/ng/directive/ngEventDirsSpec.js new file mode 100644 index 00000000..c42f9b26 --- /dev/null +++ b/test/ng/directive/ngEventDirsSpec.js @@ -0,0 +1,25 @@ +'use strict'; + +describe('event directives', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + describe('ng-submit', function() { + + it('should get called on form submit', inject(function($rootScope, $compile) { + element = $compile('<form action="" ng-submit="submitted = true">' + + '<input type="submit"/>' + + '</form>')($rootScope); + $rootScope.$digest(); + expect($rootScope.submitted).not.toBeDefined(); + + browserTrigger(element.children()[0]); + expect($rootScope.submitted).toEqual(true); + })); + }); +}); diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js new file mode 100644 index 00000000..ab63dd02 --- /dev/null +++ b/test/ng/directive/ngIncludeSpec.js @@ -0,0 +1,289 @@ +'use strict'; + +describe('ng-include', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + function putIntoCache(url, content) { + return function($templateCache) { + $templateCache.put(url, [200, content, {}]); + }; + } + + + it('should include on external file', inject(putIntoCache('myUrl', '{{name}}'), + function($rootScope, $compile) { + element = jqLite('<ng:include src="url" scope="childScope"></ng:include>'); + jqLite(document.body).append(element); + element = $compile(element)($rootScope); + $rootScope.childScope = $rootScope.$new(); + $rootScope.childScope.name = 'misko'; + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + expect(element.text()).toEqual('misko'); + jqLite(document.body).html(''); + })); + + + it('should support ng-include="src" syntax', inject(putIntoCache('myUrl', '{{name}}'), + function($rootScope, $compile) { + element = jqLite('<div ng-include="url"></div>'); + jqLite(document.body).append(element); + element = $compile(element)($rootScope); + $rootScope.name = 'Alibaba'; + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + expect(element.text()).toEqual('Alibaba'); + jqLite(document.body).html(''); + })); + + + it('should remove previously included text if a falsy value is bound to src', inject( + putIntoCache('myUrl', '{{name}}'), + function($rootScope, $compile) { + element = jqLite('<ng:include src="url" scope="childScope"></ng:include>'); + element = $compile(element)($rootScope); + $rootScope.childScope = $rootScope.$new(); + $rootScope.childScope.name = 'igor'; + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + + expect(element.text()).toEqual('igor'); + + $rootScope.url = undefined; + $rootScope.$digest(); + + expect(element.text()).toEqual(''); + })); + + + it('should allow this for scope', inject(putIntoCache('myUrl', '{{"abc"}}'), + function($rootScope, $compile) { + element = jqLite('<ng:include src="url" scope="this"></ng:include>'); + element = $compile(element)($rootScope); + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + + // TODO(misko): because we are using scope==this, the eval gets registered + // during the flush phase and hence does not get called. + // I don't think passing 'this' makes sense. Does having scope on ng-include makes sense? + // should we make scope="this" illegal? + $rootScope.$digest(); + + expect(element.text()).toEqual('abc'); + })); + + + it('should fire $includeContentLoaded event after linking the content', inject( + function($rootScope, $compile, $templateCache) { + var contentLoadedSpy = jasmine.createSpy('content loaded').andCallFake(function() { + expect(element.text()).toBe('partial content'); + }); + + $templateCache.put('url', [200, 'partial content', {}]); + $rootScope.$on('$includeContentLoaded', contentLoadedSpy); + + element = $compile('<ng:include src="\'url\'"></ng:include>')($rootScope); + $rootScope.$digest(); + + expect(contentLoadedSpy).toHaveBeenCalledOnce(); + })); + + + it('should evaluate onload expression when a partial is loaded', inject( + putIntoCache('myUrl', 'my partial'), + function($rootScope, $compile) { + element = jqLite('<ng:include src="url" onload="loaded = true"></ng:include>'); + element = $compile(element)($rootScope); + + expect($rootScope.loaded).not.toBeDefined(); + + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + + expect(element.text()).toEqual('my partial'); + expect($rootScope.loaded).toBe(true); + })); + + + it('should destroy old scope', inject(putIntoCache('myUrl', 'my partial'), + function($rootScope, $compile) { + element = jqLite('<ng:include src="url"></ng:include>'); + element = $compile(element)($rootScope); + + expect($rootScope.$$childHead).toBeFalsy(); + + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + expect($rootScope.$$childHead).toBeTruthy(); + + $rootScope.url = null; + $rootScope.$digest(); + expect($rootScope.$$childHead).toBeFalsy(); + })); + + + it('should do xhr request and cache it', + inject(function($rootScope, $httpBackend, $compile) { + element = $compile('<ng:include src="url"></ng:include>')($rootScope); + $httpBackend.expect('GET', 'myUrl').respond('my partial'); + + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('my partial'); + + $rootScope.url = null; + $rootScope.$digest(); + expect(element.text()).toEqual(''); + + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + expect(element.text()).toEqual('my partial'); + dealoc($rootScope); + })); + + + it('should clear content when error during xhr request', + inject(function($httpBackend, $compile, $rootScope) { + element = $compile('<ng:include src="url">content</ng:include>')($rootScope); + $httpBackend.expect('GET', 'myUrl').respond(404, ''); + + $rootScope.url = 'myUrl'; + $rootScope.$digest(); + $httpBackend.flush(); + + expect(element.text()).toBe(''); + })); + + + it('should be async even if served from cache', inject( + putIntoCache('myUrl', 'my partial'), + function($rootScope, $compile) { + element = $compile('<ng:include src="url"></ng:include>')($rootScope); + + $rootScope.url = 'myUrl'; + + var called = 0; + // we want to assert only during first watch + $rootScope.$watch(function() { + if (!called++) expect(element.text()).toBe(''); + }); + + $rootScope.$digest(); + expect(element.text()).toBe('my partial'); + })); + + + it('should discard pending xhr callbacks if a new template is requested before the current ' + + 'finished loading', inject(function($rootScope, $compile, $httpBackend) { + element = jqLite("<ng:include src='templateUrl'></ng:include>"); + var log = []; + + $rootScope.templateUrl = 'myUrl1'; + $rootScope.logger = function(msg) { + log.push(msg); + } + $compile(element)($rootScope); + expect(log.join('; ')).toEqual(''); + + $httpBackend.expect('GET', 'myUrl1').respond('<div>{{logger("url1")}}</div>'); + $rootScope.$digest(); + expect(log.join('; ')).toEqual(''); + $rootScope.templateUrl = 'myUrl2'; + $httpBackend.expect('GET', 'myUrl2').respond('<div>{{logger("url2")}}</div>'); + $rootScope.$digest(); + $httpBackend.flush(); // now that we have two requests pending, flush! + + expect(log.join('; ')).toEqual('url2; url2'); // it's here twice because we go through at + // least two digest cycles + })); + + + it('should compile only the content', inject(function($compile, $rootScope, $templateCache) { + // regression + + var onload = jasmine.createSpy('$includeContentLoaded'); + $rootScope.$on('$includeContentLoaded', onload); + $templateCache.put('tpl.html', [200, 'partial {{tpl}}', {}]); + + element = $compile('<div><div ng-repeat="i in [1]">' + + '<ng:include src="tpl"></ng:include></div></div>')($rootScope); + expect(onload).not.toHaveBeenCalled(); + + $rootScope.$apply(function() { + $rootScope.tpl = 'tpl.html'; + }); + expect(onload).toHaveBeenCalledOnce(); + })); + + + describe('autoscoll', function() { + var autoScrollSpy; + + function spyOnAnchorScroll() { + return function($provide) { + autoScrollSpy = jasmine.createSpy('$anchorScroll'); + $provide.value('$anchorScroll', autoScrollSpy); + }; + } + + function compileAndLink(tpl) { + return function($compile, $rootScope) { + element = $compile(tpl)($rootScope); + }; + } + + function changeTplAndValueTo(template, value) { + return function($rootScope, $browser) { + $rootScope.$apply(function() { + $rootScope.tpl = template; + $rootScope.value = value; + }); + }; + } + + beforeEach(module(spyOnAnchorScroll())); + beforeEach(inject( + putIntoCache('template.html', 'CONTENT'), + putIntoCache('another.html', 'CONTENT'))); + + + it('should call $anchorScroll if autoscroll attribute is present', inject( + compileAndLink('<ng:include src="tpl" autoscroll></ng:include>'), + changeTplAndValueTo('template.html'), function() { + expect(autoScrollSpy).toHaveBeenCalledOnce(); + })); + + + it('should call $anchorScroll if autoscroll evaluates to true', inject( + compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'), + changeTplAndValueTo('template.html', true), + changeTplAndValueTo('another.html', 'some-string'), + changeTplAndValueTo('template.html', 100), function() { + expect(autoScrollSpy).toHaveBeenCalled(); + expect(autoScrollSpy.callCount).toBe(3); + })); + + + it('should not call $anchorScroll if autoscroll attribute is not present', inject( + compileAndLink('<ng:include src="tpl"></ng:include>'), + changeTplAndValueTo('template.html'), function() { + expect(autoScrollSpy).not.toHaveBeenCalled(); + })); + + + it('should not call $anchorScroll if autoscroll evaluates to false', inject( + compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'), + changeTplAndValueTo('template.html', false), + changeTplAndValueTo('template.html', undefined), + changeTplAndValueTo('template.html', null), function() { + expect(autoScrollSpy).not.toHaveBeenCalled(); + })); + }); +}); diff --git a/test/ng/directive/ngInitSpec.js b/test/ng/directive/ngInitSpec.js new file mode 100644 index 00000000..92146089 --- /dev/null +++ b/test/ng/directive/ngInitSpec.js @@ -0,0 +1,16 @@ +'use strict'; + +describe('ng-init', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + it("should ng-init", inject(function($rootScope, $compile) { + element = $compile('<div ng-init="a=123"></div>')($rootScope); + expect($rootScope.a).toEqual(123); + })); +}); diff --git a/test/ng/directive/ngNonBindableSpec.js b/test/ng/directive/ngNonBindableSpec.js new file mode 100644 index 00000000..1f7bf25d --- /dev/null +++ b/test/ng/directive/ngNonBindableSpec.js @@ -0,0 +1,21 @@ +'use strict'; + + +describe('ng-non-bindable', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + it('should prevent compilation of the owning element and its children', + inject(function($rootScope, $compile) { + element = $compile('<div ng-non-bindable text="{{name}}"><span ng-bind="name"></span></div>')($rootScope); + $rootScope.name = 'misko'; + $rootScope.$digest(); + expect(element.text()).toEqual(''); + expect(element.attr('text')).toEqual('{{name}}'); + })); +}); diff --git a/test/ng/directive/ngPluralizeSpec.js b/test/ng/directive/ngPluralizeSpec.js new file mode 100644 index 00000000..c7766c7b --- /dev/null +++ b/test/ng/directive/ngPluralizeSpec.js @@ -0,0 +1,136 @@ +'use strict'; + +describe('ng-pluralize', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + describe('deal with pluralized strings without offset', function() { + beforeEach(inject(function($rootScope, $compile) { + element = $compile( + '<ng:pluralize count="email"' + + "when=\"{'0': 'You have no new email'," + + "'one': 'You have one new email'," + + "'other': 'You have {} new emails'}\">" + + '</ng:pluralize>')($rootScope); + })); + + + it('should show single/plural strings', inject(function($rootScope) { + $rootScope.email = 0; + $rootScope.$digest(); + expect(element.text()).toBe('You have no new email'); + + $rootScope.email = '0'; + $rootScope.$digest(); + expect(element.text()).toBe('You have no new email'); + + $rootScope.email = 1; + $rootScope.$digest(); + expect(element.text()).toBe('You have one new email'); + + $rootScope.email = 0.01; + $rootScope.$digest(); + expect(element.text()).toBe('You have 0.01 new emails'); + + $rootScope.email = '0.1'; + $rootScope.$digest(); + expect(element.text()).toBe('You have 0.1 new emails'); + + $rootScope.email = 2; + $rootScope.$digest(); + expect(element.text()).toBe('You have 2 new emails'); + + $rootScope.email = -0.1; + $rootScope.$digest(); + expect(element.text()).toBe('You have -0.1 new emails'); + + $rootScope.email = '-0.01'; + $rootScope.$digest(); + expect(element.text()).toBe('You have -0.01 new emails'); + + $rootScope.email = -2; + $rootScope.$digest(); + expect(element.text()).toBe('You have -2 new emails'); + })); + + + it('should show single/plural strings with mal-formed inputs', inject(function($rootScope) { + $rootScope.email = ''; + $rootScope.$digest(); + expect(element.text()).toBe(''); + + $rootScope.email = null; + $rootScope.$digest(); + expect(element.text()).toBe(''); + + $rootScope.email = undefined; + $rootScope.$digest(); + expect(element.text()).toBe(''); + + $rootScope.email = 'a3'; + $rootScope.$digest(); + expect(element.text()).toBe(''); + + $rootScope.email = '011'; + $rootScope.$digest(); + expect(element.text()).toBe('You have 11 new emails'); + + $rootScope.email = '-011'; + $rootScope.$digest(); + expect(element.text()).toBe('You have -11 new emails'); + + $rootScope.email = '1fff'; + $rootScope.$digest(); + expect(element.text()).toBe('You have one new email'); + + $rootScope.email = '0aa22'; + $rootScope.$digest(); + expect(element.text()).toBe('You have no new email'); + + $rootScope.email = '000001'; + $rootScope.$digest(); + expect(element.text()).toBe('You have one new email'); + })); + }); + + + describe('deal with pluralized strings with offset', function() { + it('should show single/plural strings with offset', inject(function($rootScope, $compile) { + element = $compile( + "<ng:pluralize count=\"viewCount\" offset=2 " + + "when=\"{'0': 'Nobody is viewing.'," + + "'1': '{{p1}} is viewing.'," + + "'2': '{{p1}} and {{p2}} are viewing.'," + + "'one': '{{p1}}, {{p2}} and one other person are viewing.'," + + "'other': '{{p1}}, {{p2}} and {} other people are viewing.'}\">" + + "</ng:pluralize>")($rootScope); + $rootScope.p1 = 'Igor'; + $rootScope.p2 = 'Misko'; + + $rootScope.viewCount = 0; + $rootScope.$digest(); + expect(element.text()).toBe('Nobody is viewing.'); + + $rootScope.viewCount = 1; + $rootScope.$digest(); + expect(element.text()).toBe('Igor is viewing.'); + + $rootScope.viewCount = 2; + $rootScope.$digest(); + expect(element.text()).toBe('Igor and Misko are viewing.'); + + $rootScope.viewCount = 3; + $rootScope.$digest(); + expect(element.text()).toBe('Igor, Misko and one other person are viewing.'); + + $rootScope.viewCount = 4; + $rootScope.$digest(); + expect(element.text()).toBe('Igor, Misko and 2 other people are viewing.'); + })); + }); +}); diff --git a/test/ng/directive/ngRepeatSpec.js b/test/ng/directive/ngRepeatSpec.js new file mode 100644 index 00000000..85aa1511 --- /dev/null +++ b/test/ng/directive/ngRepeatSpec.js @@ -0,0 +1,289 @@ +'use strict'; + +describe('ng-repeat', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + it('should ng-repeat over array', inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="item in items" ng-init="suffix = \';\'" ng-bind="item + suffix"></li>' + + '</ul>')($rootScope); + + Array.prototype.extraProperty = "should be ignored"; + // INIT + $rootScope.items = ['misko', 'shyam']; + $rootScope.$digest(); + expect(element.find('li').length).toEqual(2); + expect(element.text()).toEqual('misko;shyam;'); + delete Array.prototype.extraProperty; + + // GROW + $rootScope.items = ['adam', 'kai', 'brad']; + $rootScope.$digest(); + expect(element.find('li').length).toEqual(3); + expect(element.text()).toEqual('adam;kai;brad;'); + + // SHRINK + $rootScope.items = ['brad']; + $rootScope.$digest(); + expect(element.find('li').length).toEqual(1); + expect(element.text()).toEqual('brad;'); + })); + + + it('should ng-repeat over object', inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="(key, value) in items" ng-bind="key + \':\' + value + \';\' "></li>' + + '</ul>')($rootScope); + $rootScope.items = {misko:'swe', shyam:'set'}; + $rootScope.$digest(); + expect(element.text()).toEqual('misko:swe;shyam:set;'); + })); + + + it('should not ng-repeat over parent properties', inject(function($rootScope, $compile) { + var Class = function() {}; + Class.prototype.abc = function() {}; + Class.prototype.value = 'abc'; + + element = $compile( + '<ul>' + + '<li ng-repeat="(key, value) in items" ng-bind="key + \':\' + value + \';\' "></li>' + + '</ul>')($rootScope); + $rootScope.items = new Class(); + $rootScope.items.name = 'value'; + $rootScope.$digest(); + expect(element.text()).toEqual('name:value;'); + })); + + + it('should error on wrong parsing of ng-repeat', inject(function($rootScope, $compile) { + expect(function() { + element = $compile('<ul><li ng-repeat="i dont parse"></li></ul>')($rootScope); + }).toThrow("Expected ng-repeat in form of '_item_ in _collection_' but got 'i dont parse'."); + })); + + + it("should throw error when left-hand-side of ng-repeat can't be parsed", inject( + function($rootScope, $compile) { + expect(function() { + element = $compile('<ul><li ng-repeat="i dont parse in foo"></li></ul>')($rootScope); + }).toThrow("'item' in 'item in collection' should be identifier or (key, value) but got " + + "'i dont parse'."); + })); + + + it('should expose iterator offset as $index when iterating over arrays', + inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="item in items" ng-bind="item + $index + \'|\'"></li>' + + '</ul>')($rootScope); + $rootScope.items = ['misko', 'shyam', 'frodo']; + $rootScope.$digest(); + expect(element.text()).toEqual('misko0|shyam1|frodo2|'); + })); + + + it('should expose iterator offset as $index when iterating over objects', + inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="(key, val) in items" ng-bind="key + \':\' + val + $index + \'|\'"></li>' + + '</ul>')($rootScope); + $rootScope.items = {'misko':'m', 'shyam':'s', 'frodo':'f'}; + $rootScope.$digest(); + expect(element.text()).toEqual('frodo:f0|misko:m1|shyam:s2|'); + })); + + + it('should expose iterator position as $position when iterating over arrays', + inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="item in items" ng-bind="item + \':\' + $position + \'|\'"></li>' + + '</ul>')($rootScope); + $rootScope.items = ['misko', 'shyam', 'doug']; + $rootScope.$digest(); + expect(element.text()).toEqual('misko:first|shyam:middle|doug:last|'); + + $rootScope.items.push('frodo'); + $rootScope.$digest(); + expect(element.text()).toEqual('misko:first|shyam:middle|doug:middle|frodo:last|'); + + $rootScope.items.pop(); + $rootScope.items.pop(); + $rootScope.$digest(); + expect(element.text()).toEqual('misko:first|shyam:last|'); + })); + + + it('should expose iterator position as $position when iterating over objects', + inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="(key, val) in items" ng-bind="key + \':\' + val + \':\' + $position + \'|\'">' + + '</li>' + + '</ul>')($rootScope); + $rootScope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'}; + $rootScope.$digest(); + expect(element.text()).toEqual('doug:d:first|frodo:f:middle|misko:m:middle|shyam:s:last|'); + + delete $rootScope.items.doug; + delete $rootScope.items.frodo; + $rootScope.$digest(); + expect(element.text()).toEqual('misko:m:first|shyam:s:last|'); + })); + + + it('should ignore $ and $$ properties', inject(function($rootScope, $compile) { + element = $compile('<ul><li ng-repeat="i in items">{{i}}|</li></ul>')($rootScope); + $rootScope.items = ['a', 'b', 'c']; + $rootScope.items.$$hashkey = 'xxx'; + $rootScope.items.$root = 'yyy'; + $rootScope.$digest(); + + expect(element.text()).toEqual('a|b|c|'); + })); + + + it('should repeat over nested arrays', inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="subgroup in groups">' + + '<div ng-repeat="group in subgroup">{{group}}|</div>X' + + '</li>' + + '</ul>')($rootScope); + $rootScope.groups = [['a', 'b'], ['c','d']]; + $rootScope.$digest(); + + expect(element.text()).toEqual('a|b|Xc|d|X'); + })); + + + it('should ignore non-array element properties when iterating over an array', + inject(function($rootScope, $compile) { + element = $compile('<ul><li ng-repeat="item in array">{{item}}|</li></ul>')($rootScope); + $rootScope.array = ['a', 'b', 'c']; + $rootScope.array.foo = '23'; + $rootScope.array.bar = function() {}; + $rootScope.$digest(); + + expect(element.text()).toBe('a|b|c|'); + })); + + + it('should iterate over non-existent elements of a sparse array', + inject(function($rootScope, $compile) { + element = $compile('<ul><li ng-repeat="item in array">{{item}}|</li></ul>')($rootScope); + $rootScope.array = ['a', 'b']; + $rootScope.array[4] = 'c'; + $rootScope.array[6] = 'd'; + $rootScope.$digest(); + + expect(element.text()).toBe('a|b|||c||d|'); + })); + + + it('should iterate over all kinds of types', inject(function($rootScope, $compile) { + element = $compile('<ul><li ng-repeat="item in array">{{item}}|</li></ul>')($rootScope); + $rootScope.array = ['a', 1, null, undefined, {}]; + $rootScope.$digest(); + + expect(element.text()).toMatch(/a\|1\|\|\|\{\s*\}\|/); + })); + + + describe('stability', function() { + var a, b, c, d, lis; + + beforeEach(inject(function($rootScope, $compile) { + element = $compile( + '<ul>' + + '<li ng-repeat="item in items" ng-bind="key + \':\' + val + \':\' + $position + \'|\'"></li>' + + '</ul>')($rootScope); + a = {}; + b = {}; + c = {}; + d = {}; + + $rootScope.items = [a, b, c]; + $rootScope.$digest(); + lis = element.find('li'); + })); + + + it('should preserve the order of elements', inject(function($rootScope) { + $rootScope.items = [a, c, d]; + $rootScope.$digest(); + var newElements = element.find('li'); + expect(newElements[0]).toEqual(lis[0]); + expect(newElements[1]).toEqual(lis[2]); + expect(newElements[2]).not.toEqual(lis[1]); + })); + + + it('should support duplicates', inject(function($rootScope) { + $rootScope.items = [a, a, b, c]; + $rootScope.$digest(); + var newElements = element.find('li'); + expect(newElements[0]).toEqual(lis[0]); + expect(newElements[1]).not.toEqual(lis[0]); + expect(newElements[2]).toEqual(lis[1]); + expect(newElements[3]).toEqual(lis[2]); + + lis = newElements; + $rootScope.$digest(); + newElements = element.find('li'); + expect(newElements[0]).toEqual(lis[0]); + expect(newElements[1]).toEqual(lis[1]); + expect(newElements[2]).toEqual(lis[2]); + expect(newElements[3]).toEqual(lis[3]); + + $rootScope.$digest(); + newElements = element.find('li'); + expect(newElements[0]).toEqual(lis[0]); + expect(newElements[1]).toEqual(lis[1]); + expect(newElements[2]).toEqual(lis[2]); + expect(newElements[3]).toEqual(lis[3]); + })); + + + it('should remove last item when one duplicate instance is removed', + inject(function($rootScope) { + $rootScope.items = [a, a, a]; + $rootScope.$digest(); + lis = element.find('li'); + + $rootScope.items = [a, a]; + $rootScope.$digest(); + var newElements = element.find('li'); + expect(newElements.length).toEqual(2); + expect(newElements[0]).toEqual(lis[0]); + expect(newElements[1]).toEqual(lis[1]); + })); + + + it('should reverse items when the collection is reversed', + inject(function($rootScope) { + $rootScope.items = [a, b, c]; + $rootScope.$digest(); + lis = element.find('li'); + + $rootScope.items = [c, b, a]; + $rootScope.$digest(); + var newElements = element.find('li'); + expect(newElements.length).toEqual(3); + expect(newElements[0]).toEqual(lis[2]); + expect(newElements[1]).toEqual(lis[1]); + expect(newElements[2]).toEqual(lis[0]); + })); + }); +}); diff --git a/test/ng/directive/ngShowHideSpec.js b/test/ng/directive/ngShowHideSpec.js new file mode 100644 index 00000000..5005274d --- /dev/null +++ b/test/ng/directive/ngShowHideSpec.js @@ -0,0 +1,43 @@ +'use strict'; + +describe('ng-show / ng-hide', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + describe('ng-show', function() { + it('should show and hide an element', inject(function($rootScope, $compile) { + element = jqLite('<div ng-show="exp"></div>'); + element = $compile(element)($rootScope); + $rootScope.$digest(); + expect(isCssVisible(element)).toEqual(false); + $rootScope.exp = true; + $rootScope.$digest(); + expect(isCssVisible(element)).toEqual(true); + })); + + + it('should make hidden element visible', inject(function($rootScope, $compile) { + element = jqLite('<div style="display: none" ng-show="exp"></div>'); + element = $compile(element)($rootScope); + expect(isCssVisible(element)).toBe(false); + $rootScope.exp = true; + $rootScope.$digest(); + expect(isCssVisible(element)).toBe(true); + })); + }); + + describe('ng-hide', function() { + it('should hide an element', inject(function($rootScope, $compile) { + element = jqLite('<div ng-hide="exp"></div>'); + element = $compile(element)($rootScope); + expect(isCssVisible(element)).toBe(true); + $rootScope.exp = true; + $rootScope.$digest(); + expect(isCssVisible(element)).toBe(false); + })); + }); +}); diff --git a/test/ng/directive/ngStyleSpec.js b/test/ng/directive/ngStyleSpec.js new file mode 100644 index 00000000..c12f2f4d --- /dev/null +++ b/test/ng/directive/ngStyleSpec.js @@ -0,0 +1,88 @@ +'use strict'; + +describe('ng-style', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + it('should set', inject(function($rootScope, $compile) { + element = $compile('<div ng-style="{height: \'40px\'}"></div>')($rootScope); + $rootScope.$digest(); + expect(element.css('height')).toEqual('40px'); + })); + + + it('should silently ignore undefined style', inject(function($rootScope, $compile) { + element = $compile('<div ng-style="myStyle"></div>')($rootScope); + $rootScope.$digest(); + expect(element.hasClass('ng-exception')).toBeFalsy(); + })); + + + describe('preserving styles set before and after compilation', function() { + var scope, preCompStyle, preCompVal, postCompStyle, postCompVal, element; + + beforeEach(inject(function($rootScope, $compile) { + preCompStyle = 'width'; + preCompVal = '300px'; + postCompStyle = 'height'; + postCompVal = '100px'; + element = jqLite('<div ng-style="styleObj"></div>'); + element.css(preCompStyle, preCompVal); + jqLite(document.body).append(element); + $compile(element)($rootScope); + scope = $rootScope; + scope.styleObj = {'margin-top': '44px'}; + scope.$apply(); + element.css(postCompStyle, postCompVal); + })); + + afterEach(function() { + element.remove(); + }); + + + it('should not mess up stuff after compilation', function() { + element.css('margin', '44px'); + expect(element.css(preCompStyle)).toBe(preCompVal); + expect(element.css('margin-top')).toBe('44px'); + expect(element.css(postCompStyle)).toBe(postCompVal); + }); + + + it('should not mess up stuff after $apply with no model changes', function() { + element.css('padding-top', '33px'); + scope.$apply(); + expect(element.css(preCompStyle)).toBe(preCompVal); + expect(element.css('margin-top')).toBe('44px'); + expect(element.css(postCompStyle)).toBe(postCompVal); + expect(element.css('padding-top')).toBe('33px'); + }); + + + it('should not mess up stuff after $apply with non-colliding model changes', function() { + scope.styleObj = {'padding-top': '99px'}; + scope.$apply(); + expect(element.css(preCompStyle)).toBe(preCompVal); + expect(element.css('margin-top')).not.toBe('44px'); + expect(element.css('padding-top')).toBe('99px'); + expect(element.css(postCompStyle)).toBe(postCompVal); + }); + + + it('should overwrite original styles after a colliding model change', function() { + scope.styleObj = {'height': '99px', 'width': '88px'}; + scope.$apply(); + expect(element.css(preCompStyle)).toBe('88px'); + expect(element.css(postCompStyle)).toBe('99px'); + scope.styleObj = {}; + scope.$apply(); + expect(element.css(preCompStyle)).not.toBe('88px'); + expect(element.css(postCompStyle)).not.toBe('99px'); + }); + }); +}); diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js new file mode 100644 index 00000000..b4df109e --- /dev/null +++ b/test/ng/directive/ngSwitchSpec.js @@ -0,0 +1,93 @@ +'use strict'; + +describe('ng-switch', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + it('should switch on value change', inject(function($rootScope, $compile) { + element = $compile( + '<div ng-switch="select">' + + '<div ng-switch-when="1">first:{{name}}</div>' + + '<div ng-switch-when="2">second:{{name}}</div>' + + '<div ng-switch-when="true">true:{{name}}</div>' + + '</div>')($rootScope); + expect(element.html()).toEqual( + '<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->'); + $rootScope.select = 1; + $rootScope.$apply(); + expect(element.text()).toEqual('first:'); + $rootScope.name="shyam"; + $rootScope.$apply(); + expect(element.text()).toEqual('first:shyam'); + $rootScope.select = 2; + $rootScope.$apply(); + expect(element.text()).toEqual('second:shyam'); + $rootScope.name = 'misko'; + $rootScope.$apply(); + expect(element.text()).toEqual('second:misko'); + $rootScope.select = true; + $rootScope.$apply(); + expect(element.text()).toEqual('true:misko'); + })); + + + it('should switch on switch-when-default', inject(function($rootScope, $compile) { + element = $compile( + '<ng:switch on="select">' + + '<div ng:switch-when="1">one</div>' + + '<div ng:switch-default>other</div>' + + '</ng:switch>')($rootScope); + $rootScope.$apply(); + expect(element.text()).toEqual('other'); + $rootScope.select = 1; + $rootScope.$apply(); + expect(element.text()).toEqual('one'); + })); + + + it('should call change on switch', inject(function($rootScope, $compile) { + element = $compile( + '<ng:switch on="url" change="name=\'works\'">' + + '<div ng-switch-when="a">{{name}}</div>' + + '</ng:switch>')($rootScope); + $rootScope.url = 'a'; + $rootScope.$apply(); + expect($rootScope.name).toEqual('works'); + expect(element.text()).toEqual('works'); + })); + + + it('should properly create and destroy child scopes', inject(function($rootScope, $compile) { + element = $compile( + '<ng:switch on="url">' + + '<div ng-switch-when="a">{{name}}</div>' + + '</ng:switch>')($rootScope); + $rootScope.$apply(); + + var getChildScope = function() { return element.find('div').scope(); }; + + expect(getChildScope()).toBeUndefined(); + + $rootScope.url = 'a'; + $rootScope.$apply(); + var child1 = getChildScope(); + expect(child1).toBeDefined(); + spyOn(child1, '$destroy'); + + $rootScope.url = 'x'; + $rootScope.$apply(); + expect(getChildScope()).toBeUndefined(); + expect(child1.$destroy).toHaveBeenCalledOnce(); + + $rootScope.url = 'a'; + $rootScope.$apply(); + var child2 = getChildScope(); + expect(child2).toBeDefined(); + expect(child2).not.toBe(child1); + })); +}); diff --git a/test/ng/directive/ngViewSpec.js b/test/ng/directive/ngViewSpec.js new file mode 100644 index 00000000..636e15a8 --- /dev/null +++ b/test/ng/directive/ngViewSpec.js @@ -0,0 +1,459 @@ +'use strict'; + +describe('ng-view', function() { + var element; + + beforeEach(module(function() { + return function($rootScope, $compile) { + element = $compile('<ng:view onload="load()"></ng:view>')($rootScope); + }; + })); + + + afterEach(function(){ + dealoc(element); + }); + + + it('should do nothing when no routes are defined', + inject(function($rootScope, $compile, $location) { + $location.path('/unknown'); + $rootScope.$digest(); + expect(element.text()).toEqual(''); + })); + + + it('should instantiate controller after compiling the content', function() { + var log = [], controllerScope, + Ctrl = function($scope) { + controllerScope = $scope; + log.push('ctrl-init'); + }; + + module(function($compileProvider, $routeProvider) { + $compileProvider.directive('compileLog', function() { + return { + compile: function() { + log.push('compile'); + } + }; + }); + + $routeProvider.when('/some', {template: '/tpl.html', controller: Ctrl}); + }); + + inject(function($route, $rootScope, $templateCache, $location) { + $templateCache.put('/tpl.html', [200, '<div compile-log>partial</div>', {}]); + $location.path('/some'); + $rootScope.$digest(); + + expect(controllerScope.$parent).toBe($rootScope); + expect(controllerScope).toBe($route.current.scope); + expect(log).toEqual(['compile', 'ctrl-init']); + }); + }); + + + it('should support string controller declaration', function() { + var MyCtrl = jasmine.createSpy('MyCtrl'); + + module(function($controllerProvider, $routeProvider) { + $controllerProvider.register('MyCtrl', ['$scope', MyCtrl]); + $routeProvider.when('/foo', {controller: 'MyCtrl', template: '/tpl.html'}); + }); + + inject(function($route, $location, $rootScope, $templateCache) { + $templateCache.put('/tpl.html', [200, '<div></div>', {}]); + $location.path('/foo'); + $rootScope.$digest(); + + expect($route.current.controller).toBe('MyCtrl'); + expect(MyCtrl).toHaveBeenCalledWith(element.contents().scope()); + }); + }); + + + it('should load content via xhr when route changes', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'myUrl1'}); + $routeProvider.when('/bar', {template: 'myUrl2'}); + }); + + inject(function($rootScope, $compile, $httpBackend, $location, $route) { + expect(element.text()).toEqual(''); + + $location.path('/foo'); + $httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('4'); + + $location.path('/bar'); + $httpBackend.expect('GET', 'myUrl2').respond('angular is da best'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('angular is da best'); + }); + }); + + + it('should remove all content when location changes to an unknown route', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'myUrl1'}); + }); + + inject(function($rootScope, $compile, $location, $httpBackend, $route) { + $location.path('/foo'); + $httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('4'); + + $location.path('/unknown'); + $rootScope.$digest(); + expect(element.text()).toEqual(''); + }); + }); + + + it('should chain scopes and propagate evals to the child scope', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'myUrl1'}); + }); + + inject(function($rootScope, $compile, $location, $httpBackend, $route) { + $rootScope.parentVar = 'parent'; + + $location.path('/foo'); + $httpBackend.expect('GET', 'myUrl1').respond('<div>{{parentVar}}</div>'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('parent'); + + $rootScope.parentVar = 'new parent'; + $rootScope.$digest(); + expect(element.text()).toEqual('new parent'); + }); + }); + + + it('should be possible to nest ng-view in ng-include', inject(function() { + // TODO(vojta): refactor this test + dealoc(element); + var injector = angular.injector(['ng', 'ngMock', function($routeProvider) { + $routeProvider.when('/foo', {controller: angular.noop, template: 'viewPartial.html'}); + }]); + var myApp = injector.get('$rootScope'); + var $httpBackend = injector.get('$httpBackend'); + $httpBackend.expect('GET', 'includePartial.html').respond('view: <ng:view></ng:view>'); + injector.get('$location').path('/foo'); + + var $route = injector.get('$route'); + + element = injector.get('$compile')( + '<div>' + + 'include: <ng:include src="\'includePartial.html\'"> </ng:include>' + + '</div>')(myApp); + myApp.$apply(); + + $httpBackend.expect('GET', 'viewPartial.html').respond('content'); + $httpBackend.flush(); + + expect(element.text()).toEqual('include: view: content'); + expect($route.current.template).toEqual('viewPartial.html'); + dealoc(myApp); + dealoc(element); + })); + + + it('should initialize view template after the view controller was initialized even when ' + + 'templates were cached', function() { + //this is a test for a regression that was introduced by making the ng-view cache sync + function ParentCtrl($scope) { + $scope.log.push('parent'); + } + + module(function($routeProvider) { + $routeProvider.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'}); + }); + + + inject(function($rootScope, $compile, $location, $httpBackend, $route) { + $rootScope.log = []; + + $rootScope.ChildCtrl = function($scope) { + $scope.log.push('child'); + }; + + $location.path('/foo'); + $httpBackend.expect('GET', 'viewPartial.html'). + respond('<div ng-init="log.push(\'init\')">' + + '<div ng-controller="ChildCtrl"></div>' + + '</div>'); + $rootScope.$apply(); + $httpBackend.flush(); + + expect($rootScope.log).toEqual(['parent', 'init', 'child']); + + $location.path('/'); + $rootScope.$apply(); + expect($rootScope.log).toEqual(['parent', 'init', 'child']); + + $rootScope.log = []; + $location.path('/foo'); + $rootScope.$apply(); + + expect($rootScope.log).toEqual(['parent', 'init', 'child']); + }); + }); + + + it('should discard pending xhr callbacks if a new route is requested before the current ' + + 'finished loading', function() { + // this is a test for a bad race condition that affected feedback + + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'myUrl1'}); + $routeProvider.when('/bar', {template: 'myUrl2'}); + }); + + inject(function($route, $rootScope, $location, $httpBackend) { + expect(element.text()).toEqual(''); + + $location.path('/foo'); + $httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>'); + $rootScope.$digest(); + $location.path('/bar'); + $httpBackend.expect('GET', 'myUrl2').respond('<div>{{1+1}}</div>'); + $rootScope.$digest(); + $httpBackend.flush(); // now that we have two requests pending, flush! + + expect(element.text()).toEqual('2'); + }); + }); + + + it('should clear the content when error during xhr request', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {controller: noop, template: 'myUrl1'}); + }); + + inject(function($route, $location, $rootScope, $httpBackend) { + $location.path('/foo'); + $httpBackend.expect('GET', 'myUrl1').respond(404, ''); + element.text('content'); + + $rootScope.$digest(); + $httpBackend.flush(); + + expect(element.text()).toBe(''); + }); + }); + + + it('should be async even if served from cache', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {controller: noop, template: 'myUrl1'}); + }); + + inject(function($route, $rootScope, $location, $templateCache) { + $templateCache.put('myUrl1', [200, 'my partial', {}]); + $location.path('/foo'); + + var called = 0; + // we want to assert only during first watch + $rootScope.$watch(function() { + if (!called++) expect(element.text()).toBe(''); + }); + + $rootScope.$digest(); + expect(element.text()).toBe('my partial'); + }); + }); + + it('should fire $contentLoaded event when content compiled and linked', function() { + var log = []; + var logger = function(name) { + return function() { + log.push(name); + }; + }; + var Ctrl = function($scope) { + $scope.value = 'bound-value'; + log.push('init-ctrl'); + }; + + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'tpl.html', controller: Ctrl}); + }); + + inject(function($templateCache, $rootScope, $location) { + $rootScope.$on('$beforeRouteChange', logger('$beforeRouteChange')); + $rootScope.$on('$afterRouteChange', logger('$afterRouteChange')); + $rootScope.$on('$viewContentLoaded', logger('$viewContentLoaded')); + + $templateCache.put('tpl.html', [200, '{{value}}', {}]); + $location.path('/foo'); + $rootScope.$digest(); + + expect(element.text()).toBe('bound-value'); + expect(log).toEqual(['$beforeRouteChange', '$afterRouteChange', 'init-ctrl', + '$viewContentLoaded']); + }); + }); + + it('should destroy previous scope', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'tpl.html'}); + }); + + inject(function($templateCache, $rootScope, $location) { + $templateCache.put('tpl.html', [200, 'partial', {}]); + + expect($rootScope.$$childHead).toBeNull(); + expect($rootScope.$$childTail).toBeNull(); + + $location.path('/foo'); + $rootScope.$digest(); + + expect(element.text()).toBe('partial'); + expect($rootScope.$$childHead).not.toBeNull(); + expect($rootScope.$$childTail).not.toBeNull(); + + $location.path('/non/existing/route'); + $rootScope.$digest(); + + expect(element.text()).toBe(''); + expect($rootScope.$$childHead).toBeNull(); + expect($rootScope.$$childTail).toBeNull(); + }); + }); + + + it('should destroy previous scope if multiple route changes occur before server responds', + function() { + var log = []; + var createCtrl = function(name) { + return function($scope) { + log.push('init-' + name); + $scope.$on('$destroy', function() {log.push('destroy-' + name);}); + }; + }; + + module(function($routeProvider) { + $routeProvider.when('/one', {template: 'one.html', controller: createCtrl('ctrl1')}); + $routeProvider.when('/two', {template: 'two.html', controller: createCtrl('ctrl2')}); + }); + + inject(function($httpBackend, $rootScope, $location) { + $httpBackend.whenGET('one.html').respond('content 1'); + $httpBackend.whenGET('two.html').respond('content 2'); + + $location.path('/one'); + $rootScope.$digest(); + $location.path('/two'); + $rootScope.$digest(); + + $httpBackend.flush(); + expect(element.text()).toBe('content 2'); + expect(log).toEqual(['init-ctrl2']); + + $location.path('/non-existing'); + $rootScope.$digest(); + + expect(element.text()).toBe(''); + expect(log).toEqual(['init-ctrl2', 'destroy-ctrl2']); + + expect($rootScope.$$childHead).toBeNull(); + expect($rootScope.$$childTail).toBeNull(); + }); + }); + + + it('should $destroy scope after update and reload', function() { + // this is a regression of bug, where $route doesn't copy scope when only updating + + var log = []; + + function logger(msg) { + return function() { + log.push(msg); + }; + } + + function createController(name) { + return function($scope) { + log.push('init-' + name); + $scope.$on('$destroy', logger('destroy-' + name)); + $scope.$on('$routeUpdate', logger('route-update')); + }; + } + + module(function($routeProvider) { + $routeProvider.when('/bar', {template: 'tpl.html', controller: createController('bar')}); + $routeProvider.when('/foo', { + template: 'tpl.html', controller: createController('foo'), reloadOnSearch: false}); + }); + + inject(function($templateCache, $location, $rootScope) { + $templateCache.put('tpl.html', [200, 'partial', {}]); + + $location.url('/foo'); + $rootScope.$digest(); + expect(log).toEqual(['init-foo']); + + $location.search({q: 'some'}); + $rootScope.$digest(); + expect(log).toEqual(['init-foo', 'route-update']); + + $location.url('/bar'); + $rootScope.$digest(); + expect(log).toEqual(['init-foo', 'route-update', 'destroy-foo', 'init-bar']); + }); + }); + + + it('should evaluate onload expression after linking the content', function() { + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'tpl.html'}); + }); + + inject(function($templateCache, $location, $rootScope) { + $templateCache.put('tpl.html', [200, '{{1+1}}', {}]); + $rootScope.load = jasmine.createSpy('onload'); + + $location.url('/foo'); + $rootScope.$digest(); + expect($rootScope.load).toHaveBeenCalledOnce(); + }); + }) + + + it('should set $scope and $controllerController on the view', function() { + function MyCtrl($scope) { + $scope.state = 'WORKS'; + $scope.ctrl = this; + } + + module(function($routeProvider) { + $routeProvider.when('/foo', {template: 'tpl.html', controller: MyCtrl}); + }); + + inject(function($templateCache, $location, $rootScope, $route) { + $templateCache.put('tpl.html', [200, '<div>{{state}}</div>', {}]); + + $location.url('/foo'); + $rootScope.$digest(); + expect(element.text()).toEqual('WORKS'); + + var div = element.find('div'); + expect(nodeName_(div.parent())).toEqual('NG:VIEW'); + + expect(div.scope()).toBe($route.current.scope); + expect(div.scope().hasOwnProperty('state')).toBe(true); + expect(div.scope().state).toEqual('WORKS'); + + expect(div.controller()).toBe($route.current.scope.ctrl); + }); + }); +}); diff --git a/test/ng/directive/scriptSpec.js b/test/ng/directive/scriptSpec.js new file mode 100644 index 00000000..471e04ce --- /dev/null +++ b/test/ng/directive/scriptSpec.js @@ -0,0 +1,44 @@ +'use strict'; + +describe('scriptDirective', function() { + var element; + + + afterEach(function(){ + dealoc(element); + }); + + + it('should populate $templateCache with contents of a ng-template script element', inject( + function($compile, $templateCache) { + if (msie <=8) return; + // in ie8 it is not possible to create a script tag with the right content. + // it always comes up as empty. I was trying to set the text of the + // script tag, but that did not work either, so I gave up. + $compile('<div>foo' + + '<script id="/ignore">ignore me</script>' + + '<script type="text/ng-template" id="/myTemplate.html"><x>{{y}}</x></script>' + + '</div>' ); + expect($templateCache.get('/myTemplate.html')).toBe('<x>{{y}}</x>'); + expect($templateCache.get('/ignore')).toBeUndefined(); + } + )); + + + it('should not compile scripts', inject(function($compile, $templateCache, $rootScope) { + if (msie <=8) return; // see above + + var doc = jqLite('<div></div>'); + // jQuery is too smart and removes + doc[0].innerHTML = '<script type="text/javascript">some {{binding}}</script>' + + '<script type="text/ng-template" id="/some">other {{binding}}</script>'; + + $compile(doc)($rootScope); + $rootScope.$digest(); + + var scripts = doc.find('script'); + expect(scripts.eq(0).text()).toBe('some {{binding}}'); + expect(scripts.eq(1).text()).toBe('other {{binding}}'); + dealoc(doc); + })); +}); diff --git a/test/ng/directive/selectSpec.js b/test/ng/directive/selectSpec.js new file mode 100644 index 00000000..2e3cfaaf --- /dev/null +++ b/test/ng/directive/selectSpec.js @@ -0,0 +1,863 @@ +'use strict'; + +describe('select', function() { + var scope, formElement, element, $compile; + + 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; + $compile = $injector.get('$compile'); + formElement = element = null; + })); + + afterEach(function() { + dealoc(formElement); + }); + + + describe('select-one', function() { + + 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.$apply(function() { + scope.a = 'foo'; + scope.b = 'bar'; + }); + + expect(element.text()).toBe('foobarC'); + }); + + + 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.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.$apply(function() { + scope.selection = ''; + }); + + expect(scope.form.select.$error.required).toBeTruthy(); + expect(element).toBeInvalid(); + expect(element).toBePristine(); + expect(scope.log).toEqual(''); + + element[0].value = 'c'; + browserTrigger(element, 'change'); + 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">' + + '<option value=""></option>' + + '<option value="c">C</option>' + + '</select>'); + + 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.$apply(function() { + scope.selection = ['A']; + }); + + expect(element.find('option')[0].selected).toEqual(true); + expect(element.find('option')[1].selected).toEqual(false); + + scope.$apply(function() { + scope.selection.push('B'); + }); + + expect(element.find('option')[0].selected).toEqual(true); + expect(element.find('option')[1].selected).toEqual(true); + }); + + + it('should require', function() { + compile( + '<select name="select" ng-model="selection" multiple required>' + + '<option>A</option>' + + '<option>B</option>' + + '</select>'); + + scope.$apply(function() { + scope.selection = []; + }); + + expect(scope.form.select.$error.required).toBeTruthy(); + expect(element).toBeInvalid(); + expect(element).toBePristine(); + + scope.$apply(function() { + scope.selection = ['A']; + }); + + expect(element).toBeValid(); + expect(element).toBePristine(); + + element[0].value = 'B'; + browserTrigger(element, 'change'); + expect(element).toBeValid(); + expect(element).toBeDirty(); + }); + }); + + + describe('ng-options', function() { + function createSelect(attrs, blank, unknown) { + var html = '<select'; + forEach(attrs, function(value, key) { + if (isBoolean(value)) { + if (value) html += ' ' + key; + } else { + html += ' ' + key + '="' + value + '"'; + } + }); + html += '>' + + (blank ? (isString(blank) ? blank : '<option value="">blank</option>') : '') + + (unknown ? (isString(unknown) ? unknown : '<option value="?">unknown</option>') : '') + + '</select>'; + + compile(html); + } + + function createSingleSelect(blank, unknown) { + createSelect({ + 'ng-model':'selected', + 'ng-options':'value.name for value in values' + }, blank, unknown); + } + + function createMultiSelect(blank, unknown) { + createSelect({ + 'ng-model':'selected', + 'multiple':true, + 'ng-options':'value.name for value in values' + }, blank, unknown); + } + + + 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.$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-options': 'value as key for (key, value) in object' + }); + + 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.$apply(function() { + scope.object.azur = '8888FF'; + }); + + options = element.find('option'); + expect(options[3].selected).toEqual(true); + }); + + + it('should grow list', function() { + createSingleSelect(); + + 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.$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.$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.$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.$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.$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.$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(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(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.$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.$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' + }); + + 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' + }); + + 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.$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.$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.$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.$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.$apply(function() { + scope.blankVal = 'so blank'; + scope.values = [{name: 'A'}]; + }); + + // check blank option is first and is compiled + 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'); + + scope.$apply(function() { + scope.blankVal = 'not so blank'; + }); + + // check blank option is first and is compiled + 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.$apply(function() { + scope.blankVal = 'so blank'; + scope.values = [{name: 'A'}]; + }); + + // check blank option is first and is compiled + 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.$apply(function() { + scope.blankVal = 'is blank'; + scope.values = [{name: 'A'}]; + }); + + // check blank option is first and is compiled + 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.$apply(function() { + scope.blankVal = 'is blank'; + }); + + // check blank option is first and is compiled + 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'); + }); + }); + + + describe('on change', function() { + + it('should update model on change', function() { + createSingleSelect(); + + 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.$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.$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.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = []; + }); + + expect(element.find('option').length).toEqual(2); + expect(element.find('option')[0].selected).toBeFalsy(); + expect(element.find('option')[1].selected).toBeFalsy(); + + 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.$apply(function() { + scope.values = [{name: 'A'}, {name: 'B'}]; + scope.selected = []; + }); + + element.find('option')[0].selected = true; + + browserTrigger(element, 'change'); + expect(scope.selected).toEqual([scope.values[0]]); + }); + + it('should select from object', function() { + createSelect({ + 'ng-model':'selected', + 'multiple':true, + 'ng-options':'key as value for (key,value) in values' + }); + scope.values = {'0':'A', '1':'B'}; + + scope.selected = ['1']; + scope.$digest(); + expect(element.find('option')[1].selected).toBe(true); + + element.find('option')[0].selected = true; + browserTrigger(element, 'change'); + expect(scope.selected).toEqual(['0', '1']); + + 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(); + }); + }); + }); + + + describe('OPTION value', function() { + beforeEach(function() { + this.addMatchers({ + toHaveValue: function(expected){ + this.message = function() { + return 'Expected "' + this.actual.html() + '" to have value="' + expected + '".'; + }; + + var value; + htmlParser(this.actual.html(), { + start:function(tag, attrs){ + value = attrs.value; + }, + end:noop, + chars:noop + }); + return trim(value) == trim(expected); + } + }); + }); + + + it('should populate value attribute on OPTION', inject(function($rootScope, $compile) { + element = $compile('<select ng-model="x"><option>abc</option></select>')($rootScope) + expect(element).toHaveValue('abc'); + })); + + it('should ignore value if already exists', inject(function($rootScope, $compile) { + element = $compile('<select ng-model="x"><option value="abc">xyz</option></select>')($rootScope) + expect(element).toHaveValue('abc'); + })); + + it('should set value even if newlines present', inject(function($rootScope, $compile) { + element = $compile('<select ng-model="x"><option attr="\ntext\n" \n>\nabc\n</option></select>')($rootScope) + expect(element).toHaveValue('\nabc\n'); + })); + + it('should set value even if self closing HTML', inject(function($rootScope, $compile) { + // IE removes the \n from option, which makes this test pointless + if (msie) return; + element = $compile('<select ng-model="x"><option>\n</option></select>')($rootScope) + expect(element).toHaveValue('\n'); + })); + }); +}); diff --git a/test/ng/directive/styleSpec.js b/test/ng/directive/styleSpec.js new file mode 100644 index 00000000..bdc4ea85 --- /dev/null +++ b/test/ng/directive/styleSpec.js @@ -0,0 +1,31 @@ +'use strict'; + +describe('style', function() { + var element; + + + afterEach(function() { + dealoc(element); + }); + + + it('should not compile style element', inject(function($compile, $rootScope) { + element = jqLite('<style type="text/css">should {{notBound}}</style>'); + $compile(element)($rootScope); + $rootScope.$digest(); + + // read innerHTML and trim to pass on IE8 + expect(trim(element[0].innerHTML)).toBe('should {{notBound}}'); + })); + + + it('should compile content of element with style attr', inject(function($compile, $rootScope) { + element = jqLite('<div style="some">{{bind}}</div>'); + $compile(element)($rootScope); + $rootScope.$apply(function() { + $rootScope.bind = 'value'; + }); + + expect(element.text()).toBe('value'); + })); +}); |