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('
', 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>#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('
');
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>#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);
});
});