From 2430f52bb97fa9d682e5f028c977c5bf94c5ec38 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 23 Mar 2012 14:03:24 -0700 Subject: chore(module): move files around in preparation for more modules --- test/ng/directive/aSpec.js | 46 ++ test/ng/directive/booleanAttrDirSpecs.js | 125 ++++ test/ng/directive/formSpec.js | 294 ++++++++ test/ng/directive/inputSpec.js | 1119 ++++++++++++++++++++++++++++++ test/ng/directive/ngBindSpec.js | 80 +++ test/ng/directive/ngClassSpec.js | 204 ++++++ test/ng/directive/ngClickSpec.js | 26 + test/ng/directive/ngCloakSpec.js | 49 ++ test/ng/directive/ngControllerSpec.js | 65 ++ test/ng/directive/ngEventDirsSpec.js | 25 + test/ng/directive/ngIncludeSpec.js | 289 ++++++++ test/ng/directive/ngInitSpec.js | 16 + test/ng/directive/ngNonBindableSpec.js | 21 + test/ng/directive/ngPluralizeSpec.js | 136 ++++ test/ng/directive/ngRepeatSpec.js | 289 ++++++++ test/ng/directive/ngShowHideSpec.js | 43 ++ test/ng/directive/ngStyleSpec.js | 88 +++ test/ng/directive/ngSwitchSpec.js | 93 +++ test/ng/directive/ngViewSpec.js | 459 ++++++++++++ test/ng/directive/scriptSpec.js | 44 ++ test/ng/directive/selectSpec.js | 863 +++++++++++++++++++++++ test/ng/directive/styleSpec.js | 31 + 22 files changed, 4405 insertions(+) create mode 100644 test/ng/directive/aSpec.js create mode 100644 test/ng/directive/booleanAttrDirSpecs.js create mode 100644 test/ng/directive/formSpec.js create mode 100644 test/ng/directive/inputSpec.js create mode 100644 test/ng/directive/ngBindSpec.js create mode 100644 test/ng/directive/ngClassSpec.js create mode 100644 test/ng/directive/ngClickSpec.js create mode 100644 test/ng/directive/ngCloakSpec.js create mode 100644 test/ng/directive/ngControllerSpec.js create mode 100644 test/ng/directive/ngEventDirsSpec.js create mode 100644 test/ng/directive/ngIncludeSpec.js create mode 100644 test/ng/directive/ngInitSpec.js create mode 100644 test/ng/directive/ngNonBindableSpec.js create mode 100644 test/ng/directive/ngPluralizeSpec.js create mode 100644 test/ng/directive/ngRepeatSpec.js create mode 100644 test/ng/directive/ngShowHideSpec.js create mode 100644 test/ng/directive/ngStyleSpec.js create mode 100644 test/ng/directive/ngSwitchSpec.js create mode 100644 test/ng/directive/ngViewSpec.js create mode 100644 test/ng/directive/scriptSpec.js create mode 100644 test/ng/directive/selectSpec.js create mode 100644 test/ng/directive/styleSpec.js (limited to 'test/ng/directive') 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('empty link')($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('')($rootScope) + $rootScope.url = 'http://server' + $rootScope.$digest(); + expect(element.attr('href')).toEqual('http://server'); + })); + + + it('should bind disabled', inject(function($rootScope, $compile) { + element = $compile('')($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('')($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('')($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('')($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('')($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('
')($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('')($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('
')($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('
')($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('
')(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( + '' + + '' + + '
')(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( + '
' + + '' + + '
')(scope); + + expect(scope.myForm).toBeDefined(); + expect(scope.myForm.alias).toBeDefined(); + }); + + + it('should prevent form submission', function() { + var startingUrl = '' + window.location; + doc = jqLite('
'); + $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('')(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('
')(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('
')(scope); + + expect(scope['obj.myForm']).toBeTruthy(); + }); + + + it('should support two forms on a single scope', function() { + doc = $compile( + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + )(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('
'); + $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( + '' + + '' + + '' + + '' + + '' + + ''); + $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( + '
' + + '
' + + '' + + '
' + + '
'); + $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( + '' + + '' + + '' + + '' + + ''); + $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( + '
' + + '' + + '
')(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('
'); + 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('')($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('')($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('
' + inputHtml + '
'); + 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(''); + + 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(''); + 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(''); + + 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(''); + + changeInputValueTo('adam'); + expect(scope.name).toEqual('adam'); + }); + + + it('should update the model and trim the value', function() { + compileInput(''); + + changeInputValueTo(' a '); + expect(scope.name).toEqual('a'); + }); + + + it('should allow complex reference binding', function() { + compileInput(''); + + scope.$apply(function() { + scope.obj = { abc: { name: 'Misko'} }; + }); + expect(inputElm.val()).toEqual('Misko'); + }); + + + it('should ignore input without ng-model attr', function() { + compileInput(''); + + 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(''); + 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(''); + + 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(''); + scope.$apply(function() { + scope.value = 0; + }); + + expect(inputElm.val()).toBe('0'); + }); + + + describe('pattern', function() { + + it('should validate in-lined pattern', function() { + compileInput(''); + 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(''); + 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(''); + + 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(''); + + 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(''); + + 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(''); + + 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(''); + + 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(''); + + 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(''); + + scope.$apply(function() { + scope.age = 10; + }); + + changeInputValueTo(''); + expect(scope.age).toBeNull(); + expect(inputElm).toBeValid(); + }); + + + describe('min', function() { + + it('should validate', function() { + compileInput(''); + 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(''); + 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(''); + + 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(''); + + 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(''); + + 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(''); + 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( + '' + + '' + + ''); + + 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( + '' + + ''); + + 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(''); + + 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(''); + + 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(''); + + browserTrigger(inputElm, 'click'); + expect(scope.checkbox).toBe(true); + + browserTrigger(inputElm, 'click'); + expect(scope.checkbox).toBe(false); + }); + + + it('should allow custom enumeration', function() { + compileInput(''); + + 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(''); + + 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(''); + 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(''); + 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(''); + + // 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(''); + + 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(''); + + changeInputValueTo(' , '); + expect(inputElm).toBeInvalid(); + }); + + + it('should convert empty string to an empty array', function() { + compileInput(''); + + changeInputValueTo(''); + expect(scope.list).toEqual([]); + }); + + + it('should allow custom separator', function() { + compileInput(''); + + 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(''); + + 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(''); + + 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(''); + + scope.$apply(function() { + scope.required = true; + }); + + expect(inputElm).toBeInvalid(); + }); + + + it('should be $invalid but $pristine if not touched', function() { + compileInput(''); + + 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(''); + changeInputValueTo('a'); + changeInputValueTo(''); + expect(scope.foo).toBe(''); + }); + + + it('should set $invalid when model undefined', function() { + compileInput(''); + scope.$digest(); + expect(inputElm).toBeInvalid(); + }) + }); + + + describe('ng-change', function() { + + it('should $eval expression after new value is set in the model', function() { + compileInput(''); + + 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(''); + + 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(''); + + 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(''); + + 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('' + + '' + + ''); + 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(''); + + 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('
')($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('
')($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('
')($rootScope); + $rootScope.html = '
hello
'; + $rootScope.$digest(); + expect(lowercase(element.html())).toEqual('
hello
'); + })); + + it('should set unsafe html', inject(function($rootScope, $compile) { + element = $compile('
')($rootScope); + $rootScope.html = '
hello
'; + $rootScope.$digest(); + expect(lowercase(element.html())).toEqual('
hello
'); + })); + + it('should suppress rendering of falsy values', inject(function($rootScope, $compile) { + element = $compile('
{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}
')($rootScope); + $rootScope.$digest(); + expect(element.text()).toEqual('-0false'); + })); + + it('should render object as JSON ignore $$', inject(function($rootScope, $compile) { + element = $compile('
{{ {key:"value", $$key:"hide"} }}
')($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('
')($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('
{{ {key:"value", $$key:"hide"}  }}
')($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('
')($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('
')($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( + '
' + + '
')($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('
')($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('
')($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('
')($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('
')($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('
')($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('
')($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('
')($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('
')($rootScope); + $rootScope.dynCls = [undefined, null]; + $rootScope.$digest(); + })); + + + it('should ng-class odd/even', inject(function($rootScope, $compile) { + element = $compile('