From 454626ad39bc19f03390363f3033ee88c3efd417 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Thu, 6 Jan 2011 14:34:21 -0800 Subject: converted last of tests to specs --- test/BinderSpec.js | 667 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 667 insertions(+) create mode 100644 test/BinderSpec.js (limited to 'test/BinderSpec.js') diff --git a/test/BinderSpec.js b/test/BinderSpec.js new file mode 100644 index 00000000..9515accb --- /dev/null +++ b/test/BinderSpec.js @@ -0,0 +1,667 @@ +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, 'keyup'); + 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); + }); + +}); \ No newline at end of file -- cgit v1.2.3