describe('Binder', function(){ beforeEach(function(){ var self = this; this.compile = function(html, initialScope, parent) { var compiler = new Compiler(angularTextMarkup, angularAttrMarkup, angularDirective, angularWidget); if (self.element) dealoc(self.element); var element = self.element = jqLite(html); var scope = compiler.compile(element)(element); if (parent) parent.append(element); extend(scope, initialScope); scope.$init(); return {node:element, scope:scope}; }; this.compileToHtml = function (content) { return sortedHtml(this.compile(content).node); }; }); afterEach(function(){ if (this.element && this.element.dealoc) { this.element.dealoc(); } }); it('ChangingTextfieldUpdatesModel', function(){ var state = this.compile('', {model:{}}); state.scope.$eval(); assertEquals('abc', state.scope.model.price); }); it('ChangingTextareaUpdatesModel', function(){ var c = this.compile(''); c.scope.$eval(); assertEquals(c.scope.model.note, 'abc'); }); it('ChangingRadioUpdatesModel', function(){ var c = this.compile('' + ''); c.scope.$eval(); assertEquals(c.scope.model.price, 'A'); }); it('ChangingCheckboxUpdatesModel', function(){ var form = this.compile(''); assertEquals(true, form.scope.model.price); }); it('BindUpdate', function(){ var c = this.compile('
'); assertEquals(123, c.scope.$get('a')); }); it('ChangingSelectNonSelectedUpdatesModel', function(){ var form = this.compile(''); assertEquals('A', form.scope.model.price); }); it('ChangingMultiselectUpdatesModel', function(){ var form = this.compile(''); assertJsonEquals(["A", "B"], form.scope.$get('Invoice').options); }); it('ChangingSelectSelectedUpdatesModel', function(){ var form = this.compile(''); assertEquals(form.scope.model.price, 'b'); }); it('ExecuteInitialization', function(){ var c = this.compile('
'); assertEquals(c.scope.$get('a'), 123); }); it('ExecuteInitializationStatements', function(){ var c = this.compile('
'); assertEquals(c.scope.$get('a'), 123); assertEquals(c.scope.$get('b'), 345); }); it('ApplyTextBindings', function(){ var form = this.compile('
x
'); form.scope.$set('model', {a:123}); form.scope.$eval(); assertEquals('123', form.node.text()); }); it('ReplaceBindingInTextWithSpan', function(){ assertEquals(this.compileToHtml("a{{b}}c"), 'ac'); assertEquals(this.compileToHtml("{{b}}"), ''); }); it('BindingSpaceConfusesIE', 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}})")); }); it('BindingOfAttributes', 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); }); it('MarkMultipleAttributes', 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"); }); it('AttributesNoneBound', function(){ var c = this.compile(""); var a = c.node; assertEquals(a[0].nodeName, "A"); assertTrue(!a.attr("ng:bind-attr")); }); it('ExistingAttrbindingIsAppended', function(){ var c = this.compile(""); var a = c.node; assertEquals('{"b":"{{def}}","href":"http://s/{{abc}}"}', a.attr('ng:bind-attr')); }); it('AttributesAreEvaluated', 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'); }); it('InputTypeButtonActionExecutesInScope', function(){ var savedCalled = false; var c = this.compile(''); c.scope.$set("person.save", function(){ savedCalled = true; }); browserTrigger(c.node, 'click'); assertTrue(savedCalled); }); it('InputTypeButtonActionExecutesInScope2', function(){ var log = ""; var c = this.compile(''); c.scope.$set("action", function(){ log += 'click;'; }); expect(log).toEqual(''); browserTrigger(c.node, 'click'); expect(log).toEqual('click;'); }); it('ButtonElementActionExecutesInScope', function(){ var savedCalled = false; var c = this.compile(''); c.scope.$set("person.save", function(){ savedCalled = true; }); browserTrigger(c.node, 'click'); assertTrue(savedCalled); }); it('RepeaterUpdateBindings', 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(); }); it('RepeaterContentDoesNotBind', function(){ var a = this.compile('
'); a.scope.$set('model', {items:[{a:"A"}]}); a.scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • A
  • ' + '
', sortedHtml(a.node)); }); it('ExpandEntityTag', function(){ assertEquals( '
', this.compileToHtml('
')); }); it('DoNotOverwriteCustomAction', function(){ var html = this.compileToHtml(''); assertTrue(html.indexOf('action="foo();"') > 0 ); }); it('RepeaterAdd', 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'); browserTrigger(first, 'keydown'); c.scope.$service('$browser').defer.flush(); assertEquals(c.scope.items[0].x, 'ABC'); }); it('ItShouldRemoveExtraChildrenWhenIteratingOverHash', 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); }); it('IfTextBindingThrowsErrorDecorateTheSpan', 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')); assertTrue(!!span.text().match(/ErrorMsg1/)); assertTrue(!!span.attr('ng-exception').match(/ErrorMsg1/)); 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-exception')); 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-exception')); }); it('IfAttrBindingThrowsErrorDecorateTheAttribute', 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-exception')); 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-exception')); }); it('NestedRepeater', 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)); }); it('HideBindingExpression', 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); }); it('HideBinding', 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); }); it('ShowBinding', 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); }); it('BindClassUndefined', function(){ var doc = this.compile('
            '); doc.scope.$eval(); assertEquals( '
            ', sortedHtml(doc.node)); }); it('BindClass', 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)); }); it('BindClassEvenOdd', function(){ var x = this.compile('
            '); x.scope.$eval(); var d1 = jqLite(x.node[0].childNodes[1]); var d2 = jqLite(x.node[0].childNodes[2]); expect(d1.hasClass('o')).toBeTruthy(); expect(d2.hasClass('e')).toBeTruthy(); assertEquals( '
            <#comment>' + '
            ' + '
            ', sortedHtml(x.node)); }); it('BindStyle', 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(); }); it('ActionOnAHrefThrowsError', function(){ var model = {books:[]}; var c = this.compile('Add Phone', model); c.scope.action = function(){ throw new Error('MyError'); }; var input = c.node; browserTrigger(input, 'click'); var error = input.attr('ng-exception'); assertTrue(!!error.match(/MyError/)); 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; //browserTrigger(input, 'click'); //dump(input.attr('ng-error')); //assertFalse('error class should be cleared', input.hasClass('ng-exception')); }); it('ShoulIgnoreVbNonBindable', 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()); }); it('OptionShouldUpdateParentToGetProperBinding', function(){ var c = this.compile(''); c.scope.$set('s', 1); c.scope.$eval(); assertEquals(1, c.node[0].selectedIndex); }); it('RepeaterShouldBindInputsDefaults', 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')); }); it('ShouldTemplateBindPreElements', function () { var c = this.compile('
            Hello {{name}}!
            '); c.scope.$set("name", "World"); c.scope.$eval(); assertEquals('
            Hello World!
            ', sortedHtml(c.node)); }); it('FillInOptionValueWhenMissing', 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'); }); it('ValidateForm', function(){ var c = this.compile('
            ' + '
            ', undefined, jqLite(document.body)); var items = [{}, {}]; c.scope.$set("items", items); c.scope.$eval(); assertEquals(3, c.scope.$service('$invalidWidgets').length); c.scope.$set('name', ''); c.scope.$eval(); assertEquals(3, c.scope.$service('$invalidWidgets').length); c.scope.$set('name', ' '); c.scope.$eval(); assertEquals(3, c.scope.$service('$invalidWidgets').length); c.scope.$set('name', 'abc'); c.scope.$eval(); assertEquals(2, c.scope.$service('$invalidWidgets').length); items[0].name = 'abc'; c.scope.$eval(); assertEquals(1, c.scope.$service('$invalidWidgets').length); items[1].name = 'abc'; c.scope.$eval(); assertEquals(0, c.scope.$service('$invalidWidgets').length); }); it('ValidateOnlyVisibleItems', function(){ var c = this.compile('
            ', undefined, jqLite(document.body)); c.scope.$set("show", true); c.scope.$eval(); assertEquals(2, c.scope.$service('$invalidWidgets').length); c.scope.$set("show", false); c.scope.$eval(); assertEquals(1, c.scope.$service('$invalidWidgets').visible()); }); it('DeleteAttributeIfEvaluatesFalse', 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); }); it('ItShouldDisplayErrorWhenActionIsSyntacticlyIncorect', function(){ var c = this.compile('
            ' + '' + '
            '); var first = jqLite(c.node[0].childNodes[0]); var second = jqLite(c.node[0].childNodes[1]); browserTrigger(first, 'click'); assertEquals("ABC", c.scope.greeting); browserTrigger(second, 'click'); assertTrue(second.hasClass("ng-exception")); }); it('ItShouldSelectTheCorrectRadioBox', function(){ var c = this.compile('
            ' + '' + '
            '); var female = jqLite(c.node[0].childNodes[0]); var male = jqLite(c.node[0].childNodes[1]); browserTrigger(female); assertEquals("female", c.scope.sex); assertEquals(true, female[0].checked); assertEquals(false, male[0].checked); assertEquals("female", female.val()); browserTrigger(male); assertEquals("male", c.scope.sex); assertEquals(false, female[0].checked); assertEquals(true, male[0].checked); assertEquals("male", male.val()); }); it('ItShouldListenOnRightScope', function(){ var c = this.compile( '
              ' + '
            '); c.scope.$eval(); assertEquals(1, c.scope.$get("counter")); assertEquals(7, c.scope.$get("gCounter")); c.scope.$set("w", "something"); c.scope.$eval(); assertEquals(2, c.scope.$get("counter")); assertEquals(14, c.scope.$get("gCounter")); }); it('ItShouldRepeatOnHashes', function(){ var x = this.compile('
            '); x.scope.$eval(); assertEquals('
              ' + '<#comment>' + '
            • a0
            • ' + '
            • b1
            • ' + '
            ', sortedHtml(x.node)); }); it('ItShouldFireChangeListenersBeforeUpdate', 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)); }); it('ItShouldHandleMultilineBindings', function(){ var x = this.compile('
            {{\n 1 \n + \n 2 \n}}
            '); x.scope.$eval(); assertEquals("3", x.node.text()); }); it('ItBindHiddenInputFields', function(){ var x = this.compile(''); x.scope.$eval(); assertEquals("abc", x.scope.$get("myName")); }); it('ItShouldUseFormaterForText', function(){ var x = this.compile(''); x.scope.$eval(); assertEquals(['a','b'], x.scope.$get('a')); var input = x.node; input[0].value = ' x,,yz'; browserTrigger(input, '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); }); });