BinderTest = TestCase('BinderTest'); BinderTest.prototype.setUp = function(){ var self = this; this.compile = function(html, initialScope, config) { var compiler = new Compiler(angularTextMarkup, angularAttrMarkup, angularDirective, angularWidget); var element = self.element = jqLite(html); var scope = compiler.compile(element)(element); extend(scope, initialScope); scope.$init(); return {node:element, scope:scope}; }; this.compileToHtml = function (content) { return sortedHtml(this.compile(content).node); }; }; BinderTest.prototype.tearDown = function(){ if (this.element && this.element.dealoc) this.element.dealoc(); }; BinderTest.prototype.testChangingTextfieldUpdatesModel = function(){ var state = this.compile('', {model:{}}); state.scope.$eval(); assertEquals('abc', state.scope.model.price); }; BinderTest.prototype.testChangingTextareaUpdatesModel = function(){ var c = this.compile(''); c.scope.$eval(); assertEquals(c.scope.model.note, 'abc'); }; BinderTest.prototype.testChangingRadioUpdatesModel = function(){ var c = this.compile('' + ''); c.scope.$eval(); assertEquals(c.scope.model.price, 'A'); }; BinderTest.prototype.testChangingCheckboxUpdatesModel = function(){ var form = this.compile(''); assertEquals(true, form.scope.model.price); }; BinderTest.prototype.testBindUpdate = function() { var c = this.compile('
'); assertEquals(123, c.scope.$get('a')); }; BinderTest.prototype.testChangingSelectNonSelectedUpdatesModel = function(){ var form = this.compile(''); assertEquals('A', form.scope.model.price); }; BinderTest.prototype.testChangingMultiselectUpdatesModel = function(){ var form = this.compile(''); assertJsonEquals(["A", "B"], form.scope.$get('Invoice').options); }; BinderTest.prototype.testChangingSelectSelectedUpdatesModel = function(){ var form = this.compile(''); assertEquals(form.scope.model.price, 'b'); }; BinderTest.prototype.testExecuteInitialization = function() { var c = this.compile('
'); assertEquals(c.scope.$get('a'), 123); }; BinderTest.prototype.testExecuteInitializationStatements = function() { var c = this.compile('
'); assertEquals(c.scope.$get('a'), 123); assertEquals(c.scope.$get('b'), 345); }; BinderTest.prototype.testApplyTextBindings = function(){ var form = this.compile('
x
'); form.scope.$set('model', {a:123}); form.scope.$eval(); assertEquals('123', form.node.text()); }; BinderTest.prototype.testReplaceBindingInTextWithSpan = function() { assertEquals(this.compileToHtml("a{{b}}c"), 'ac'); assertEquals(this.compileToHtml("{{b}}"), ''); }; BinderTest.prototype.testBindingSpaceConfusesIE = function() { if (!msie) return; var span = document.createElement("span"); span.innerHTML = ' '; var nbsp = span.firstChild.nodeValue; assertEquals( ''+nbsp+'', this.compileToHtml("{{a}} {{b}}")); assertEquals( ''+nbsp+'x '+nbsp+'(', this.compileToHtml("{{A}} x {{B}} ({{C}})")); }; BinderTest.prototype.testBindingOfAttributes = function() { var c = this.compile(""); var attrbinding = c.node.attr("ng-bind-attr"); var bindings = fromJson(attrbinding); assertEquals("http://s/a{{b}}c", decodeURI(bindings.href)); assertTrue(!bindings.foo); }; BinderTest.prototype.testMarkMultipleAttributes = function() { var c = this.compile(''); var attrbinding = c.node.attr("ng-bind-attr"); var bindings = fromJson(attrbinding); assertEquals(bindings.foo, "{{d}}"); assertEquals(decodeURI(bindings.href), "http://s/a{{b}}c"); }; BinderTest.prototype.testAttributesNoneBound = function() { var c = this.compile(""); var a = c.node; assertEquals(a[0].nodeName, "A"); assertTrue(!a.attr("ng-bind-attr")); }; BinderTest.prototype.testExistingAttrbindingIsAppended = function() { var c = this.compile(""); var a = c.node; assertEquals('{"b":"{{def}}","href":"http://s/{{abc}}"}', a.attr('ng-bind-attr')); }; BinderTest.prototype.testAttributesAreEvaluated = function(){ var c = this.compile(''); var binder = c.binder, form = c.node; c.scope.$eval('a=1;b=2'); c.scope.$eval(); var a = c.node; assertEquals(a.attr('a'), 'a'); assertEquals(a.attr('b'), 'a+b=3'); }; BinderTest.prototype.testInputTypeButtonActionExecutesInScope = function(){ var savedCalled = false; var c = this.compile(''); c.scope.$set("person.save", function(){ savedCalled = true; }); c.node.click(); assertTrue(savedCalled); }; BinderTest.prototype.testInputTypeButtonActionExecutesInScope2 = function(){ var log = ""; var c = this.compile(''); c.scope.$set("action", function(){ log += 'click;'; }); expect(log).toEqual(''); c.node.click(); expect(log).toEqual('click;'); }; BinderTest.prototype.testButtonElementActionExecutesInScope = function(){ var savedCalled = false; var c = this.compile(''); c.scope.$set("person.save", function(){ savedCalled = true; }); c.node.click(); assertTrue(savedCalled); }; BinderTest.prototype.XtestParseEmptyAnchor = function(){ var binder = this.compile("
").binder; var location = binder.location; var anchor = binder.anchor; location.url = "a#x=1"; binder.parseAnchor(); assertEquals(1, binder.anchor.x); location.url = "a#"; binder.parseAnchor(); assertTrue("old values did not get removed", !binder.anchor.x); assertTrue("anchor gor replaced", anchor === binder.anchor); assertEquals('undefined', typeof (anchor[""])); }; BinderTest.prototype.XtestParseAnchor = function(){ var binder = this.compile("
").binder; var location = binder.location; location.url = "a#x=1"; binder.parseAnchor(); assertEquals(binder.anchor.x, "1"); location.url = "a#a=b&c=%20&d"; binder.parseAnchor(); assertEquals(binder.anchor.a, 'b'); assertEquals(binder.anchor.c, ' '); assertTrue(binder.anchor.d !== null); assertTrue(!binder.anchor.x); }; BinderTest.prototype.XtestWriteAnchor = function(){ var binder = this.compile("
").binder; binder.location.set('a'); binder.anchor.a = 'b'; binder.anchor.c = ' '; binder.anchor.d = true; binder.updateAnchor(); assertEquals(binder.location.get(), "a#a=b&c=%20&d"); }; BinderTest.prototype.XtestWriteAnchorAsPartOfTheUpdateView = function(){ var binder = this.compile("
").binder; binder.location.set('a'); binder.anchor.a = 'b'; binder.updateView(); assertEquals(binder.location.get(), "a#a=b"); }; BinderTest.prototype.testRepeaterUpdateBindings = function(){ var a = this.compile('
'); var form = a.node; var items = [{a:"A"}, {a:"B"}]; a.scope.$set('model', {items:items}); a.scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • A
  • ' + '
  • B
  • ' + '
', sortedHtml(form)); items.unshift({a:'C'}); a.scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • C
  • ' + '
  • A
  • ' + '
  • B
  • ' + '
', sortedHtml(form)); items.shift(); a.scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • A
  • ' + '
  • B
  • ' + '
', sortedHtml(form)); items.shift(); items.shift(); a.scope.$eval(); }; BinderTest.prototype.testRepeaterContentDoesNotBind = function(){ var a = this.compile('
'); a.scope.$set('model', {items:[{a:"A"}]}); a.scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • A
  • ' + '
', sortedHtml(a.node)); }; BinderTest.prototype.testExpandEntityTag = function(){ assertEquals( '
', this.compileToHtml('
')); }; BinderTest.prototype.testDoNotOverwriteCustomAction = function(){ var html = this.compileToHtml(''); assertTrue(html.indexOf('action="foo();"') > 0 ); }; BinderTest.prototype.testRepeaterAdd = function(){ var c = this.compile('
'); var doc = c.node; c.scope.$set('items', [{x:'a'}, {x:'b'}]); c.scope.$eval(); var first = childNode(c.node, 1); var second = childNode(c.node, 2); assertEquals('a', first.val()); assertEquals('b', second.val()); first.val('ABC'); first.trigger('keyup'); assertEquals(c.scope.items[0].x, 'ABC'); }; BinderTest.prototype.testItShouldRemoveExtraChildrenWhenIteratingOverHash = function(){ var c = this.compile('
{{i}}
'); var items = {}; c.scope.$set("items", items); c.scope.$eval(); expect(c.node[0].childNodes.length - 1).toEqual(0); items.name = "misko"; c.scope.$eval(); expect(c.node[0].childNodes.length - 1).toEqual(1); delete items.name; c.scope.$eval(); expect(c.node[0].childNodes.length - 1).toEqual(0); }; BinderTest.prototype.testIfTextBindingThrowsErrorDecorateTheSpan = function(){ var a = this.compile('
{{error.throw()}}
'); var doc = a.node; a.scope.$set('error.throw', function(){throw "ErrorMsg1";}); a.scope.$eval(); var span = childNode(doc, 0); assertTrue(span.hasClass('ng-exception')); assertEquals('ErrorMsg1', fromJson(span.text())); assertEquals('"ErrorMsg1"', span.attr('ng-error')); a.scope.$set('error.throw', function(){throw "MyError";}); a.scope.$eval(); span = childNode(doc, 0); assertTrue(span.hasClass('ng-exception')); assertTrue(span.text(), span.text().match('MyError') !== null); assertEquals('"MyError"', span.attr('ng-error')); a.scope.$set('error.throw', function(){return "ok";}); a.scope.$eval(); assertFalse(span.hasClass('ng-exception')); assertEquals('ok', span.text()); assertEquals(null, span.attr('ng-error')); }; BinderTest.prototype.testIfAttrBindingThrowsErrorDecorateTheAttribute = function(){ var a = this.compile('
'); var doc = a.node; a.scope.$set('error.throw', function(){throw "ErrorMsg";}); a.scope.$eval(); assertTrue('ng-exception', doc.hasClass('ng-exception')); assertEquals('"ErrorMsg"', doc.attr('ng-error')); assertEquals('before "ErrorMsg" after', doc.attr('attr')); a.scope.$set('error.throw', function(){ return 'X';}); a.scope.$eval(); assertFalse('!ng-exception', doc.hasClass('ng-exception')); assertEquals('before X after', doc.attr('attr')); assertEquals(null, doc.attr('ng-error')); }; BinderTest.prototype.testNestedRepeater = function() { var a = this.compile('
' + '
    ' + '
    '); a.scope.$set('model', [{name:'a', item:['a1', 'a2']}, {name:'b', item:['b1', 'b2']}]); a.scope.$eval(); assertEquals('
    '+ '<#comment>'+ '
    '+ '<#comment>'+ '
      '+ '
        '+ '
        '+ '
        '+ '<#comment>'+ '
          '+ '
            '+ '
            ', sortedHtml(a.node)); }; BinderTest.prototype.XtestRadioButtonGetsPrefixed = function () { var a = this.compile('
            '); a.scope.$set('model', ['a1', 'a2']); a.scope.$eval(); assertEquals('
            ' + '<#comment>'+ ''+ '
            ', sortedHtml(a.node)); }; BinderTest.prototype.testHideBindingExpression = function() { var a = this.compile('
            '); a.scope.$set('hidden', 3); a.scope.$eval(); assertHidden(a.node); a.scope.$set('hidden', 2); a.scope.$eval(); assertVisible(a.node); }; BinderTest.prototype.testHideBinding = function() { var c = this.compile('
            '); c.scope.$set('hidden', 'true'); c.scope.$eval(); assertHidden(c.node); c.scope.$set('hidden', 'false'); c.scope.$eval(); assertVisible(c.node); c.scope.$set('hidden', ''); c.scope.$eval(); assertVisible(c.node); }; BinderTest.prototype.testShowBinding = function() { var c = this.compile('
            '); c.scope.$set('show', 'true'); c.scope.$eval(); assertVisible(c.node); c.scope.$set('show', 'false'); c.scope.$eval(); assertHidden(c.node); c.scope.$set('show', ''); c.scope.$eval(); assertHidden(c.node); }; BinderTest.prototype.testBindClassUndefined = function() { var doc = this.compile('
            '); doc.scope.$eval(); assertEquals( '
            ', sortedHtml(doc.node)); }; BinderTest.prototype.testBindClass = function() { var c = this.compile('
            '); c.scope.$set('class', 'testClass'); c.scope.$eval(); assertEquals(sortedHtml(c.node), '
            '); c.scope.$set('class', ['a', 'b']); c.scope.$eval(); assertEquals(sortedHtml(c.node), '
            '); }; BinderTest.prototype.testBindClassEvenOdd = function() { var x = this.compile('
            '); x.scope.$eval(); assertEquals( '
            <#comment>' + '
            ' + '
            ', sortedHtml(x.node)); }; BinderTest.prototype.testBindStyle = function() { var c = this.compile('
            '); c.scope.$eval('style={color:"red"}'); c.scope.$eval(); assertEquals("red", c.node.css('color')); c.scope.$eval('style={}'); c.scope.$eval(); }; BinderTest.prototype.testActionOnAHrefThrowsError = function(){ var model = {books:[]}; var c = this.compile('Add Phone', model); c.scope.action = function(){ throw {a:'abc', b:2}; }; var input = c.node; input.click(); assertEquals({a:"abc", b:2}, fromJson(input.attr('ng-error'))); assertTrue("should have an error class", input.hasClass('ng-exception')); // TODO: I think that exception should never get cleared so this portion of test makes no sense //c.scope.action = noop; //input.click(); //dump(input.attr('ng-error')); //assertFalse('error class should be cleared', input.hasClass('ng-exception')); }; BinderTest.prototype.testShoulIgnoreVbNonBindable = function(){ var c = this.compile("
            {{a}}" + "
            {{a}}
            " + "
            {{b}}
            " + "
            {{c}}
            "); c.scope.$set('a', 123); c.scope.$eval(); assertEquals('123{{a}}{{b}}{{c}}', c.node.text()); }; BinderTest.prototype.testOptionShouldUpdateParentToGetProperBinding = function() { var c = this.compile(''); c.scope.$set('s', 1); c.scope.$eval(); assertEquals(1, c.node[0].selectedIndex); }; BinderTest.prototype.testRepeaterShouldBindInputsDefaults = function () { var c = this.compile('
            '); c.scope.$set('items', [{}, {name:'misko'}]); c.scope.$eval(); assertEquals("123", c.scope.$eval('items[0].name')); assertEquals("misko", c.scope.$eval('items[1].name')); }; BinderTest.prototype.testRepeaterShouldCreateArray = function () { var c = this.compile(''); c.scope.$eval(); assertEquals(0, c.scope.$get('items').length); }; BinderTest.prototype.testShouldTemplateBindPreElements = function () { var c = this.compile('
            Hello {{name}}!
            '); c.scope.$set("name", "World"); c.scope.$eval(); assertEquals('
            Hello World!
            ', sortedHtml(c.node)); }; BinderTest.prototype.XtestDissableAutoSubmit = function() { var c = this.compile('', null, {autoSubmit:true}); assertEquals( '', sortedHtml(c.node)); c = this.compile('', null, {autoSubmit:false}); assertEquals( '', sortedHtml(c.node)); }; BinderTest.prototype.XtestSettingAnchorToNullOrUndefinedRemovesTheAnchorFromURL = function() { var c = this.compile(''); c.binder.location.set("http://server/#a=1&b=2"); c.binder.parseAnchor(); assertEquals('1', c.binder.anchor.a); assertEquals('2', c.binder.anchor.b); c.binder.anchor.a = null; c.binder.anchor.b = null; c.binder.updateAnchor(); assertEquals('http://server/#', c.binder.location.get()); }; BinderTest.prototype.testFillInOptionValueWhenMissing = function() { var c = this.compile( ''); c.scope.$set('a', 'A'); c.scope.$set('b', 'B'); c.scope.$eval(); var optionA = childNode(c.node, 0); var optionB = childNode(c.node, 1); var optionC = childNode(c.node, 2); expect(optionA.attr('value')).toEqual('A'); expect(optionA.text()).toEqual('A'); expect(optionB.attr('value')).toEqual(''); expect(optionB.text()).toEqual('B'); expect(optionC.attr('value')).toEqual('C'); expect(optionC.text()).toEqual('C'); }; BinderTest.prototype.XtestValidateForm = function() { var c = this.compile('' + '
            '); var items = [{}, {}]; c.scope.$set("items", items); c.scope.$eval(); assertEquals(3, c.scope.$get("$invalidWidgets.length")); c.scope.$set('name', ''); c.scope.$eval(); assertEquals(3, c.scope.$get("$invalidWidgets.length")); c.scope.$set('name', ' '); c.scope.$eval(); assertEquals(3, c.scope.$get("$invalidWidgets.length")); c.scope.$set('name', 'abc'); c.scope.$eval(); assertEquals(2, c.scope.$get("$invalidWidgets.length")); items[0].name = 'abc'; c.scope.$eval(); assertEquals(1, c.scope.$get("$invalidWidgets.length")); items[1].name = 'abc'; c.scope.$eval(); assertEquals(0, c.scope.$get("$invalidWidgets.length")); }; BinderTest.prototype.XtestValidateOnlyVisibleItems = function(){ var c = this.compile(''); c.scope.$set("show", true); c.scope.$eval(); assertEquals(2, c.scope.$get("$invalidWidgets.length")); c.scope.$set("show", false); c.scope.$eval(); assertEquals(1, c.scope.$get("$invalidWidgets.length")); }; BinderTest.prototype.testDeleteAttributeIfEvaluatesFalse = function() { var c = this.compile('
            ' + '' + '' + '
            '); c.scope.$eval(); function assertChild(index, disabled) { var child = childNode(c.node, index); assertEquals(sortedHtml(child), disabled, !!child.attr('disabled')); } assertChild(0, true); assertChild(1, false); assertChild(2, true); assertChild(3, false); assertChild(4, true); assertChild(5, false); }; BinderTest.prototype.testRepeaterErrorShouldBePlacedOnInstanceNotOnTemplateComment = function () { var c = this.compile( ''); c.scope.$eval(); assertTrue(c.node.hasClass("ng-exception")); }; BinderTest.prototype.testItShouldApplyAttributesBeforeTheWidgetsAreMaterialized = function() { var c = this.compile( ''); c.scope.$set('person', {a:'misko', b:'adam'}); c.scope.$eval(); assertEquals("", c.node.html()); }; BinderTest.prototype.XtestItShouldCallListenersWhenAnchorChanges = function() { var log = ""; var c = this.compile('
            '); c.scope.$set("count", 0); c.scope.$watch("$anchor.counter", function(newValue, oldValue){ log += oldValue + "->" + newValue + ";"; }); assertEquals(0, c.scope.$get("count")); c.binder.location.url = "#counter=1"; c.binder.onUrlChange(); assertEquals(1, c.scope.$get("count")); c.binder.location.url = "#counter=1"; c.binder.onUrlChange(); assertEquals(1, c.scope.$get("count")); c.binder.location.url = "#counter=2"; c.binder.onUrlChange(); assertEquals(2, c.scope.$get("count")); c.binder.location.url = "#counter=2"; c.binder.onUrlChange(); assertEquals(2, c.scope.$get("count")); c.binder.location.url = "#"; c.binder.onUrlChange(); assertEquals("undefined->1;1->2;2->undefined;", log); assertEquals(3, c.scope.$get("count")); }; BinderTest.prototype.XtestParseQueryString = function(){ var binder = new Binder(); assertJsonEquals({"a":"1"}, binder.parseQueryString("a=1")); assertJsonEquals({"a":"1", "b":"two"}, binder.parseQueryString("a=1&b=two")); assertJsonEquals({}, binder.parseQueryString("")); assertJsonEquals({"a":"1", "b":""}, binder.parseQueryString("a=1&b=")); assertJsonEquals({"a":"1", "b":""}, binder.parseQueryString("a=1&b")); assertJsonEquals({"a":"1", "b":" 2 "}, binder.parseQueryString("a=1&b=%202%20")); assertJsonEquals({"a a":"1", "b":"2"}, binder.parseQueryString("a%20a=1&b=2")); }; BinderTest.prototype.XtestSetBinderAnchorTriggersListeners = function(){ expectAsserts(2); var doc = this.compile("
            "); doc.scope.$watch("$anchor.name", function(newVal, oldVal) { assertEquals("new", newVal); assertEquals(undefined, oldVal); }); doc.$anchor.name = "new"; doc.binder.onUrlChange("http://base#name=new"); }; BinderTest.prototype.testItShouldDisplayErrorWhenActionIsSyntacticlyIncorect = function(){ var c = this.compile('
            ' + '' + '
            '); var first = jqLite(c.node[0].childNodes[0]); var second = jqLite(c.node[0].childNodes[1]); first.click(); assertEquals("ABC", c.scope.$get('greeting')); second.click(); assertTrue(second.hasClass("ng-exception")); }; BinderTest.prototype.testItShouldSelectTheCorrectRadioBox = function() { var c = this.compile('
            ' + '' + '
            '); var female = jqLite(c.node[0].childNodes[0]); var male = jqLite(c.node[0].childNodes[1]); female.click(); assertEquals("female", c.scope.$get("sex")); assertEquals(true, female[0].checked); assertEquals(false, male[0].checked); assertEquals("female", female.val()); male.click(); assertEquals("male", c.scope.$get("sex")); assertEquals(false, female[0].checked); assertEquals(true, male[0].checked); assertEquals("male", male.val()); }; BinderTest.prototype.testItShouldListenOnRightScope = function() { var c = this.compile( '
              ' + '
            '); c.scope.$eval(); assertEquals(0, c.scope.$get("counter")); assertEquals(0, c.scope.$get("gCounter")); c.scope.$set("w", "something"); c.scope.$eval(); assertEquals(1, c.scope.$get("counter")); assertEquals(7, c.scope.$get("gCounter")); }; BinderTest.prototype.testItShouldRepeatOnHashes = function() { var x = this.compile('
            '); x.scope.$eval(); assertEquals('
              ' + '<#comment>' + '
            • a0
            • ' + '
            • b1
            • ' + '
            ', sortedHtml(x.node)); }; BinderTest.prototype.testItShouldFireChangeListenersBeforeUpdate = function(){ var x = this.compile('
            '); x.scope.$set("name", ""); x.scope.$watch("watched", "name=123"); x.scope.$set("watched", "change"); x.scope.$eval(); assertEquals(123, x.scope.$get("name")); assertEquals( '
            123
            ', sortedHtml(x.node)); }; BinderTest.prototype.testItShouldHandleMultilineBindings = function(){ var x = this.compile('
            {{\n 1 \n + \n 2 \n}}
            '); x.scope.$eval(); assertEquals("3", x.node.text()); }; BinderTest.prototype.testItBindHiddenInputFields = function(){ var x = this.compile(''); x.scope.$eval(); assertEquals("abc", x.scope.$get("myName")); }; BinderTest.prototype.xtestItShouldRenderMultiRootHtmlInBinding = function() { var x = this.compile('
            before {{a|html}}after
            '); x.scope.$set("a", "acd"); x.scope.$eval(); assertEquals( '
            before acdafter
            ', sortedHtml(x.node)); }; BinderTest.prototype.testItShouldUseFormaterForText = function() { var x = this.compile(''); x.scope.$eval(); assertEquals(['a','b'], x.scope.$get('a')); var input = x.node; input[0].value = ' x,,yz'; input.trigger('change'); assertEquals(['x','yz'], x.scope.$get('a')); x.scope.$set('a', [1 ,2, 3]); x.scope.$eval(); assertEquals('1, 2, 3', input[0].value); };