Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

port to jasmine

  • Loading branch information...
commit f79b40c6e65995f0e85a6ac100df9523a8f4a739 1 parent 2591251
@chrisprice chrisprice authored
Showing with 5,154 additions and 1,823 deletions.
  1. +138 −145 spec/bindingAttributeBehaviors.js
  2. +28 −28 spec/defaultBindings/attrBehaviors.js
  3. +59 −59 spec/defaultBindings/checkedBehaviors.js
  4. +7 −7 spec/defaultBindings/clickBehaviors.js
  5. +22 −22 spec/defaultBindings/cssBehaviors.js
  6. +16 −16 spec/defaultBindings/enableDisableBehaviors.js
  7. +35 −35 spec/defaultBindings/eventBehaviors.js
  8. +152 −152 spec/defaultBindings/foreachBehaviors.js
  9. +15 −15 spec/defaultBindings/hasfocusBehaviors.js
  10. +20 −20 spec/defaultBindings/htmlBehaviors.js
  11. +37 −37 spec/defaultBindings/ifBehaviors.js
  12. +27 −27 spec/defaultBindings/ifnotBehaviors.js
  13. +42 −42 spec/defaultBindings/optionsBehaviors.js
  14. +26 −26 spec/defaultBindings/selectedOptionsBehaviors.js
  15. +7 −7 spec/defaultBindings/styleBehaviors.js
  16. +6 −6 spec/defaultBindings/submitBehaviors.js
  17. +23 −23 spec/defaultBindings/textBehaviors.js
  18. +7 −7 spec/defaultBindings/uniqueNameBehaviors.js
  19. +114 −114 spec/defaultBindings/valueBehaviors.js
  20. +9 −9 spec/defaultBindings/visibleBehaviors.js
  21. +62 −62 spec/defaultBindings/withBehaviors.js
  22. +143 −143 spec/dependentObservableBehaviors.js
  23. +22 −24 spec/domNodeDisposalBehaviors.js
  24. +77 −84 spec/editDetectionBehaviors.js
  25. +67 −67 spec/expressionRewritingBehaviors.js
  26. +8 −8 spec/extenderBehaviors.js
  27. +19 −19 spec/jsonPostingBehaviors.js
  28. +20 −0 spec/lib/jasmine-1.2.0/MIT.LICENSE
  29. +616 −0 spec/lib/jasmine-1.2.0/jasmine-html.js
  30. +81 −0 spec/lib/jasmine-1.2.0/jasmine.css
  31. +2,529 −0 spec/lib/jasmine-1.2.0/jasmine.js
  32. +77 −0 spec/lib/jasmine.extensions.js
  33. +47 −47 spec/mappingHelperBehaviors.js
  34. +22 −22 spec/memoizationBehaviors.js
  35. +48 −48 spec/nativeTemplateEngineBehaviors.js
  36. +128 −128 spec/observableArrayBehaviors.js
  37. +90 −90 spec/observableBehaviors.js
  38. +38 −9 spec/runner.html
  39. +34 −34 spec/subscribableBehaviors.js
  40. +236 −241 spec/templatingBehaviors.js
View
283 spec/bindingAttributeBehaviors.js
@@ -1,55 +1,48 @@
-describe('Binding attribute syntax', {
- before_each: function () {
- var existingNode = document.getElementById("testNode");
- if (existingNode != null)
- existingNode.parentNode.removeChild(existingNode);
- testNode = document.createElement("div");
- testNode.id = "testNode";
- document.body.appendChild(testNode);
- },
-
- 'applyBindings should accept no parameters and then act on document.body with undefined model': function() {
+describe('Binding attribute syntax', function() {
+ beforeEach(jasmine.prepareTestNode);
+
+ it('applyBindings should accept no parameters and then act on document.body with undefined model', function() {
var didInit = false;
ko.bindingHandlers.test = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
- value_of(element.id).should_be("testElement");
- value_of(viewModel).should_be(undefined);
+ expect(element.id).toEqual("testElement");
+ expect(viewModel).toEqual(undefined);
didInit = true;
}
};
testNode.innerHTML = "<div id='testElement' data-bind='test:123'></div>";
ko.applyBindings();
- value_of(didInit).should_be(true);
+ expect(didInit).toEqual(true);
// Just to avoid interfering with other specs:
ko.utils.domData.clear(document.body);
- },
+ });
- 'applyBindings should accept one parameter and then act on document.body with parameter as model': function() {
+ it('applyBindings should accept one parameter and then act on document.body with parameter as model', function() {
var didInit = false;
var suppliedViewModel = {};
ko.bindingHandlers.test = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
- value_of(element.id).should_be("testElement");
- value_of(viewModel).should_be(suppliedViewModel);
+ expect(element.id).toEqual("testElement");
+ expect(viewModel).toEqual(suppliedViewModel);
didInit = true;
}
};
testNode.innerHTML = "<div id='testElement' data-bind='test:123'></div>";
ko.applyBindings(suppliedViewModel);
- value_of(didInit).should_be(true);
+ expect(didInit).toEqual(true);
// Just to avoid interfering with other specs:
ko.utils.domData.clear(document.body);
- },
+ });
- 'applyBindings should accept two parameters and then act on second param as DOM node with first param as model': function() {
+ it('applyBindings should accept two parameters and then act on second param as DOM node with first param as model', function() {
var didInit = false;
var suppliedViewModel = {};
ko.bindingHandlers.test = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
- value_of(element.id).should_be("testElement");
- value_of(viewModel).should_be(suppliedViewModel);
+ expect(element.id).toEqual("testElement");
+ expect(viewModel).toEqual(suppliedViewModel);
didInit = true;
}
};
@@ -59,52 +52,52 @@ describe('Binding attribute syntax', {
document.body.appendChild(shouldNotMatchNode);
try {
ko.applyBindings(suppliedViewModel, testNode);
- value_of(didInit).should_be(true);
+ expect(didInit).toEqual(true);
} finally {
shouldNotMatchNode.parentNode.removeChild(shouldNotMatchNode);
}
- },
+ });
- 'Should tolerate whitespace and nonexistent handlers': function () {
+ it('Should tolerate whitespace and nonexistent handlers', function () {
testNode.innerHTML = "<div data-bind=' nonexistentHandler : \"Hello\" '></div>";
ko.applyBindings(null, testNode); // No exception means success
- },
+ });
- 'Should tolerate arbitrary literals as the values for a handler': function () {
+ it('Should tolerate arbitrary literals as the values for a handler', function () {
testNode.innerHTML = "<div data-bind='stringLiteral: \"hello\", numberLiteral: 123, boolLiteral: true, objectLiteral: {}, functionLiteral: function() { }'></div>";
ko.applyBindings(null, testNode); // No exception means success
- },
+ });
- 'Should tolerate wacky IE conditional comments': function() {
+ it('Should tolerate wacky IE conditional comments', function() {
// Represents issue https://github.com/SteveSanderson/knockout/issues/186. Would fail on IE9, but work on earlier IE versions.
testNode.innerHTML = "<div><!--[if IE]><!-->Hello<!--<![endif]--></div>";
ko.applyBindings(null, testNode); // No exception means success
- },
+ });
- 'Should invoke registered handlers\' init() then update() methods passing binding data': function () {
+ it('Should invoke registered handlers\' init() then update() methods passing binding data', function () {
var methodsInvoked = [];
ko.bindingHandlers.test = {
init: function (element, valueAccessor, allBindingsAccessor) {
methodsInvoked.push("init");
- value_of(element.id).should_be("testElement");
- value_of(valueAccessor()).should_be("Hello");
- value_of(allBindingsAccessor().another).should_be(123);
+ expect(element.id).toEqual("testElement");
+ expect(valueAccessor()).toEqual("Hello");
+ expect(allBindingsAccessor().another).toEqual(123);
},
update: function (element, valueAccessor, allBindingsAccessor) {
methodsInvoked.push("update");
- value_of(element.id).should_be("testElement");
- value_of(valueAccessor()).should_be("Hello");
- value_of(allBindingsAccessor().another).should_be(123);
+ expect(element.id).toEqual("testElement");
+ expect(valueAccessor()).toEqual("Hello");
+ expect(allBindingsAccessor().another).toEqual(123);
}
}
testNode.innerHTML = "<div id='testElement' data-bind='test:\"Hello\", another:123'></div>";
ko.applyBindings(null, testNode);
- value_of(methodsInvoked.length).should_be(2);
- value_of(methodsInvoked[0]).should_be("init");
- value_of(methodsInvoked[1]).should_be("update");
- },
+ expect(methodsInvoked.length).toEqual(2);
+ expect(methodsInvoked[0]).toEqual("init");
+ expect(methodsInvoked[1]).toEqual("update");
+ });
- 'If the binding handler depends on an observable, invokes the init handler once and the update handler whenever a new value is available': function () {
+ it('If the binding handler depends on an observable, invokes the init handler once and the update handler whenever a new value is available', function () {
var observable = new ko.observable();
var initPassedValues = [], updatePassedValues = [];
ko.bindingHandlers.test = {
@@ -114,76 +107,76 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "<div data-bind='test: myObservable'></div>";
ko.applyBindings({ myObservable: observable }, testNode);
- value_of(initPassedValues.length).should_be(1);
- value_of(updatePassedValues.length).should_be(1);
- value_of(initPassedValues[0]).should_be(undefined);
- value_of(updatePassedValues[0]).should_be(undefined);
+ expect(initPassedValues.length).toEqual(1);
+ expect(updatePassedValues.length).toEqual(1);
+ expect(initPassedValues[0]).toEqual(undefined);
+ expect(updatePassedValues[0]).toEqual(undefined);
observable("A");
- value_of(initPassedValues.length).should_be(1);
- value_of(updatePassedValues.length).should_be(2);
- value_of(updatePassedValues[1]).should_be("A");
- },
+ expect(initPassedValues.length).toEqual(1);
+ expect(updatePassedValues.length).toEqual(2);
+ expect(updatePassedValues[1]).toEqual("A");
+ });
- 'If the associated DOM element was removed by KO, handler subscriptions are disposed immediately': function () {
+ it('If the associated DOM element was removed by KO, handler subscriptions are disposed immediately', function () {
var observable = new ko.observable("A");
testNode.innerHTML = "<div data-bind='anyHandler: myObservable()'></div>";
ko.applyBindings({ myObservable: observable }, testNode);
- value_of(observable.getSubscriptionsCount()).should_be(1);
+ expect(observable.getSubscriptionsCount()).toEqual(1);
ko.removeNode(testNode);
- value_of(observable.getSubscriptionsCount()).should_be(0);
- },
+ expect(observable.getSubscriptionsCount()).toEqual(0);
+ });
- 'If the associated DOM element was removed independently of KO, handler subscriptions are disposed on the next evaluation': function () {
+ it('If the associated DOM element was removed independently of KO, handler subscriptions are disposed on the next evaluation', function () {
var observable = new ko.observable("A");
testNode.innerHTML = "<div data-bind='anyHandler: myObservable()'></div>";
ko.applyBindings({ myObservable: observable }, testNode);
- value_of(observable.getSubscriptionsCount()).should_be(1);
+ expect(observable.getSubscriptionsCount()).toEqual(1);
testNode.parentNode.removeChild(testNode);
observable("B"); // Force re-evaluation
- value_of(observable.getSubscriptionsCount()).should_be(0);
- },
+ expect(observable.getSubscriptionsCount()).toEqual(0);
+ });
- 'If the binding attribute involves an observable, re-invokes the bindings if the observable notifies a change': function () {
+ it('If the binding attribute involves an observable, re-invokes the bindings if the observable notifies a change', function () {
var observable = new ko.observable({ message: "hello" });
var passedValues = [];
ko.bindingHandlers.test = { update: function (element, valueAccessor) { passedValues.push(valueAccessor()); } };
testNode.innerHTML = "<div data-bind='test: myObservable().message'></div>";
ko.applyBindings({ myObservable: observable }, testNode);
- value_of(passedValues.length).should_be(1);
- value_of(passedValues[0]).should_be("hello");
+ expect(passedValues.length).toEqual(1);
+ expect(passedValues[0]).toEqual("hello");
observable({ message: "goodbye" });
- value_of(passedValues.length).should_be(2);
- value_of(passedValues[1]).should_be("goodbye");
- },
+ expect(passedValues.length).toEqual(2);
+ expect(passedValues[1]).toEqual("goodbye");
+ });
- 'Should be able to use $element in binding value': function() {
+ it('Should be able to use $element in binding value', function() {
testNode.innerHTML = "<div data-bind='text: $element.tagName'></div>";
ko.applyBindings({}, testNode);
- value_of(testNode).should_contain_text("DIV");
- },
+ expect(testNode).toContainText("DIV");
+ });
- 'Should be able to use $context in binding value to refer to the context object': function() {
+ it('Should be able to use $context in binding value to refer to the context object', function() {
testNode.innerHTML = "<div data-bind='text: $context.$data === $data'></div>";
ko.applyBindings({}, testNode);
- value_of(testNode).should_contain_text("true");
- },
+ expect(testNode).toContainText("true");
+ });
- 'Should be able to refer to the bound object itself (at the root scope, the viewmodel) via $data': function() {
+ it('Should be able to refer to the bound object itself (at the root scope, the viewmodel) via $data', function() {
testNode.innerHTML = "<div data-bind='text: $data.someProp'></div>";
ko.applyBindings({ someProp: 'My prop value' }, testNode);
- value_of(testNode).should_contain_text("My prop value");
- },
+ expect(testNode).toContainText("My prop value");
+ });
- 'Bindings can signal that they control descendant bindings by returning a flag from their init function': function() {
+ it('Bindings can signal that they control descendant bindings by returning a flag from their init function', function() {
ko.bindingHandlers.test = {
init: function() { return { controlsDescendantBindings : true } }
};
@@ -193,11 +186,11 @@ describe('Binding attribute syntax', {
+ "<div data-bind='text: 123'>456</div>";
ko.applyBindings(null, testNode);
- value_of(testNode.childNodes[0].childNodes[0].innerHTML).should_be("456");
- value_of(testNode.childNodes[1].innerHTML).should_be("123");
- },
+ expect(testNode.childNodes[0].childNodes[0].innerHTML).toEqual("456");
+ expect(testNode.childNodes[1].innerHTML).toEqual("123");
+ });
- 'Should not be allowed to have multiple bindings on the same element that claim to control descendant bindings': function() {
+ it('Should not be allowed to have multiple bindings on the same element that claim to control descendant bindings', function() {
ko.bindingHandlers.test1 = {
init: function() { return { controlsDescendantBindings : true } }
};
@@ -206,17 +199,17 @@ describe('Binding attribute syntax', {
var didThrow = false;
try { ko.applyBindings(null, testNode) }
- catch(ex) { didThrow = true; value_of(ex.message).should_contain('Multiple bindings (test1 and test2) are trying to control descendant bindings of the same element.') }
- value_of(didThrow).should_be(true);
- },
+ catch(ex) { didThrow = true; expect(ex.message).toContain('Multiple bindings (test1 and test2) are trying to control descendant bindings of the same element.') }
+ expect(didThrow).toEqual(true);
+ });
- 'Should use properties on the view model in preference to properties on the binding context': function() {
+ it('Should use properties on the view model in preference to properties on the binding context', function() {
testNode.innerHTML = "<div data-bind='text: $data.someProp'></div>";
ko.applyBindings({ '$data': { someProp: 'Inner value'}, someProp: 'Outer value' }, testNode);
- value_of(testNode).should_contain_text("Inner value");
- },
+ expect(testNode).toContainText("Inner value");
+ });
- 'Should be able to extend a binding context, adding new custom properties, without mutating the original binding context': function() {
+ it('Should be able to extend a binding context, adding new custom properties, without mutating the original binding context', function() {
ko.bindingHandlers.addCustomProperty = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.applyBindingsToDescendants(bindingContext.extend({ '$customProp': 'my value' }), element);
@@ -226,16 +219,16 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "<div data-bind='with: sub'><div data-bind='addCustomProperty: true'><div data-bind='text: $customProp'></div></div></div>";
var vm = { sub: {} };
ko.applyBindings(vm, testNode);
- value_of(testNode).should_contain_text("my value");
- value_of(ko.contextFor(testNode.childNodes[0].childNodes[0].childNodes[0]).$customProp).should_be("my value");
- value_of(ko.contextFor(testNode.childNodes[0].childNodes[0]).$customProp).should_be(undefined); // Should not affect original binding context
+ expect(testNode).toContainText("my value");
+ expect(ko.contextFor(testNode.childNodes[0].childNodes[0].childNodes[0]).$customProp).toEqual("my value");
+ expect(ko.contextFor(testNode.childNodes[0].childNodes[0]).$customProp).toEqual(undefined); // Should not affect original binding context
// vale of $data and $parent should be unchanged in extended context
- value_of(ko.contextFor(testNode.childNodes[0].childNodes[0].childNodes[0]).$data).should_be(vm.sub);
- value_of(ko.contextFor(testNode.childNodes[0].childNodes[0].childNodes[0]).$parent).should_be(vm);
- },
+ expect(ko.contextFor(testNode.childNodes[0].childNodes[0].childNodes[0]).$data).toEqual(vm.sub);
+ expect(ko.contextFor(testNode.childNodes[0].childNodes[0].childNodes[0]).$parent).toEqual(vm);
+ });
- 'Binding contexts should inherit any custom properties from ancestor binding contexts': function() {
+ it('Binding contexts should inherit any custom properties from ancestor binding contexts', function() {
ko.bindingHandlers.addCustomProperty = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.applyBindingsToDescendants(bindingContext.extend({ '$customProp': 'my value' }), element);
@@ -244,41 +237,41 @@ describe('Binding attribute syntax', {
};
testNode.innerHTML = "<div data-bind='addCustomProperty: true'><div data-bind='with: true'><div data-bind='text: $customProp'></div></div></div>";
ko.applyBindings(null, testNode);
- value_of(testNode).should_contain_text("my value");
- },
+ expect(testNode).toContainText("my value");
+ });
- 'Should be able to retrieve the binding context associated with any node': function() {
+ it('Should be able to retrieve the binding context associated with any node', function() {
testNode.innerHTML = "<div><div data-bind='text: name'></div></div>";
ko.applyBindings({ name: 'Bert' }, testNode.childNodes[0]);
- value_of(testNode.childNodes[0].childNodes[0]).should_contain_text("Bert");
+ expect(testNode.childNodes[0].childNodes[0]).toContainText("Bert");
// Can't get binding context for unbound nodes
- value_of(ko.dataFor(testNode)).should_be(undefined);
- value_of(ko.contextFor(testNode)).should_be(undefined);
+ expect(ko.dataFor(testNode)).toEqual(undefined);
+ expect(ko.contextFor(testNode)).toEqual(undefined);
// Can get binding context for directly bound nodes
- value_of(ko.dataFor(testNode.childNodes[0]).name).should_be("Bert");
- value_of(ko.contextFor(testNode.childNodes[0]).$data.name).should_be("Bert");
+ expect(ko.dataFor(testNode.childNodes[0]).name).toEqual("Bert");
+ expect(ko.contextFor(testNode.childNodes[0]).$data.name).toEqual("Bert");
// Can get binding context for descendants of directly bound nodes
- value_of(ko.dataFor(testNode.childNodes[0].childNodes[0]).name).should_be("Bert");
- value_of(ko.contextFor(testNode.childNodes[0].childNodes[0]).$data.name).should_be("Bert");
- },
+ expect(ko.dataFor(testNode.childNodes[0].childNodes[0]).name).toEqual("Bert");
+ expect(ko.contextFor(testNode.childNodes[0].childNodes[0]).$data.name).toEqual("Bert");
+ });
- 'Should not be allowed to use containerless binding syntax for bindings other than whitelisted ones': function() {
+ it('Should not be allowed to use containerless binding syntax for bindings other than whitelisted ones', function() {
testNode.innerHTML = "Hello <!-- ko visible: false -->Some text<!-- /ko --> Goodbye"
var didThrow = false;
try {
ko.applyBindings(null, testNode);
} catch(ex) {
didThrow = true;
- value_of(ex.message).should_be("The binding 'visible' cannot be used with virtual elements");
+ expect(ex.message).toEqual("The binding 'visible' cannot be used with virtual elements");
}
- value_of(didThrow).should_be(true);
- },
+ expect(didThrow).toEqual(true);
+ });
- 'Should be able to set a custom binding to use containerless binding': function() {
+ it('Should be able to set a custom binding to use containerless binding', function() {
var initCalls = 0;
ko.bindingHandlers.test = { init: function () { initCalls++ } };
ko.virtualElements.allowedBindings['test'] = true;
@@ -286,11 +279,11 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "Hello <!-- ko test: false -->Some text<!-- /ko --> Goodbye";
ko.applyBindings(null, testNode);
- value_of(initCalls).should_be(1);
- value_of(testNode).should_contain_text("Hello Some text Goodbye");
- },
+ expect(initCalls).toEqual(1);
+ expect(testNode).toContainText("Hello Some text Goodbye");
+ });
- 'Should be allowed to express containerless bindings with arbitrary internal whitespace and newlines': function() {
+ it('Should be allowed to express containerless bindings with arbitrary internal whitespace and newlines', function() {
testNode.innerHTML = "Hello <!-- ko\n" +
" with\n" +
" : \n "+
@@ -301,10 +294,10 @@ describe('Binding attribute syntax', {
" /ko \n" +
"-->, Goodbye";
ko.applyBindings(null, testNode);
- value_of(testNode).should_contain_text('Hello Bert, Goodbye');
- },
+ expect(testNode).toContainText('Hello Bert, Goodbye');
+ });
- 'Should be able to access virtual children in custom containerless binding': function() {
+ it('Should be able to access virtual children in custom containerless binding', function() {
var countNodes = 0;
ko.bindingHandlers.test = {
init: function (element, valueAccessor) {
@@ -321,11 +314,11 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "Hello <!-- ko test: false -->Some text<!-- /ko --> Goodbye"
ko.applyBindings(null, testNode);
- value_of(countNodes).should_be(1);
- value_of(testNode).should_contain_text("Hello new text Goodbye");
- },
+ expect(countNodes).toEqual(1);
+ expect(testNode).toContainText("Hello new text Goodbye");
+ });
- 'Should only bind containerless binding once inside template': function() {
+ it('Should only bind containerless binding once inside template', function() {
var initCalls = 0;
ko.bindingHandlers.test = { init: function () { initCalls++ } };
ko.virtualElements.allowedBindings['test'] = true;
@@ -333,17 +326,17 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "Hello <!-- ko if: true --><!-- ko test: false -->Some text<!-- /ko --><!-- /ko --> Goodbye"
ko.applyBindings(null, testNode);
- value_of(initCalls).should_be(1);
- value_of(testNode).should_contain_text("Hello Some text Goodbye");
- },
+ expect(initCalls).toEqual(1);
+ expect(testNode).toContainText("Hello Some text Goodbye");
+ });
- 'Should automatically bind virtual descendants of containerless markers if no binding controlsDescendantBindings': function() {
+ it('Should automatically bind virtual descendants of containerless markers if no binding controlsDescendantBindings', function() {
testNode.innerHTML = "Hello <!-- ko dummy: false --><span data-bind='text: \"WasBound\"'>Some text</span><!-- /ko --> Goodbye";
ko.applyBindings(null, testNode);
- value_of(testNode).should_contain_text("Hello WasBound Goodbye");
- },
+ expect(testNode).toContainText("Hello WasBound Goodbye");
+ });
- 'Should be able to set and access correct context in custom containerless binding': function() {
+ it('Should be able to set and access correct context in custom containerless binding', function() {
ko.bindingHandlers.bindChildrenWithCustomContext = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var innerContext = bindingContext.createChildContext({ myCustomData: 123 });
@@ -356,10 +349,10 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "Hello <!-- ko bindChildrenWithCustomContext: true --><div>Some text</div><!-- /ko --> Goodbye"
ko.applyBindings(null, testNode);
- value_of(ko.dataFor(testNode.childNodes[2]).myCustomData).should_be(123);
- },
+ expect(ko.dataFor(testNode.childNodes[2]).myCustomData).toEqual(123);
+ });
- 'Should be able to set and access correct context in nested containerless binding': function() {
+ it('Should be able to set and access correct context in nested containerless binding', function() {
delete ko.bindingHandlers.nonexistentHandler;
ko.bindingHandlers.bindChildrenWithCustomContext = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
@@ -372,11 +365,11 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "Hello <div data-bind='bindChildrenWithCustomContext: true'><!-- ko nonexistentHandler: 123 --><div>Some text</div><!-- /ko --></div> Goodbye"
ko.applyBindings(null, testNode);
- value_of(ko.dataFor(testNode.childNodes[1].childNodes[0]).myCustomData).should_be(123);
- value_of(ko.dataFor(testNode.childNodes[1].childNodes[1]).myCustomData).should_be(123);
- },
+ expect(ko.dataFor(testNode.childNodes[1].childNodes[0]).myCustomData).toEqual(123);
+ expect(ko.dataFor(testNode.childNodes[1].childNodes[1]).myCustomData).toEqual(123);
+ });
- 'Should be able to access custom context variables in child context': function() {
+ it('Should be able to access custom context variables in child context', function() {
ko.bindingHandlers.bindChildrenWithCustomContext = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var innerContext = bindingContext.createChildContext({ myCustomData: 123 });
@@ -389,13 +382,13 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "Hello <div data-bind='bindChildrenWithCustomContext: true'><!-- ko with: myCustomData --><div>Some text</div><!-- /ko --></div> Goodbye"
ko.applyBindings(null, testNode);
- value_of(ko.contextFor(testNode.childNodes[1].childNodes[0]).customValue).should_be('xyz');
- value_of(ko.dataFor(testNode.childNodes[1].childNodes[1])).should_be(123);
- value_of(ko.contextFor(testNode.childNodes[1].childNodes[1]).$parent.myCustomData).should_be(123);
- value_of(ko.contextFor(testNode.childNodes[1].childNodes[1]).$parentContext.customValue).should_be('xyz');
- },
+ expect(ko.contextFor(testNode.childNodes[1].childNodes[0]).customValue).toEqual('xyz');
+ expect(ko.dataFor(testNode.childNodes[1].childNodes[1])).toEqual(123);
+ expect(ko.contextFor(testNode.childNodes[1].childNodes[1]).$parent.myCustomData).toEqual(123);
+ expect(ko.contextFor(testNode.childNodes[1].childNodes[1]).$parentContext.customValue).toEqual('xyz');
+ });
- 'Should not reinvoke init for notifications triggered during first evaluation': function () {
+ it('Should not reinvoke init for notifications triggered during first evaluation', function () {
var observable = ko.observable('A');
var initCalls = 0;
ko.bindingHandlers.test = {
@@ -413,10 +406,10 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "<div data-bind='test: myObservable'></div>";
ko.applyBindings({ myObservable: observable }, testNode);
- value_of(initCalls).should_be(1);
- },
+ expect(initCalls).toEqual(1);
+ });
- 'Should not run update before init, even if an associated observable is updated by a different binding before init': function() {
+ it('Should not run update before init, even if an associated observable is updated by a different binding before init', function() {
// Represents the "theoretical issue" posed by Ryan in comments on https://github.com/SteveSanderson/knockout/pull/193
var observable = ko.observable('A'), hasInittedSecondBinding = false, hasUpdatedSecondBinding = false;
@@ -442,6 +435,6 @@ describe('Binding attribute syntax', {
testNode.innerHTML = "<div data-bind='test1: myObservable, test2: true'></div>";
ko.applyBindings({ myObservable: observable }, testNode);
- value_of(hasUpdatedSecondBinding).should_be(true);
- }
+ expect(hasUpdatedSecondBinding).toEqual(true);
+ });
});
View
56 spec/defaultBindings/attrBehaviors.js
@@ -1,65 +1,65 @@
-describe('Binding: Attr', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: Attr', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Should be able to set arbitrary attribute values': function() {
+ it('Should be able to set arbitrary attribute values', function() {
var model = { myValue: "first value" };
testNode.innerHTML = "<div data-bind='attr: {firstAttribute: myValue, \"second-attribute\": true}'></div>";
ko.applyBindings(model, testNode);
- value_of(testNode.childNodes[0].getAttribute("firstAttribute")).should_be("first value");
- value_of(testNode.childNodes[0].getAttribute("second-attribute")).should_be("true");
- },
+ expect(testNode.childNodes[0].getAttribute("firstAttribute")).toEqual("first value");
+ expect(testNode.childNodes[0].getAttribute("second-attribute")).toEqual("true");
+ });
- 'Should be able to set \"name\" attribute, even on IE6-7': function() {
+ it('Should be able to set \"name\" attribute, even on IE6-7', function() {
var myValue = ko.observable("myName");
testNode.innerHTML = "<input data-bind='attr: { name: myValue }' />";
ko.applyBindings({ myValue: myValue }, testNode);
- value_of(testNode.childNodes[0].name).should_be("myName");
+ expect(testNode.childNodes[0].name).toEqual("myName");
if (testNode.childNodes[0].outerHTML) { // Old Firefox doesn't support outerHTML
- value_of(testNode.childNodes[0].outerHTML).should_match('name="?myName"?');
+ expect(testNode.childNodes[0].outerHTML).toMatch('name="?myName"?');
}
- value_of(testNode.childNodes[0].getAttribute("name")).should_be("myName");
+ expect(testNode.childNodes[0].getAttribute("name")).toEqual("myName");
// Also check we can remove it (which, for a name attribute, means setting it to an empty string)
myValue(false);
- value_of(testNode.childNodes[0].name).should_be("");
+ expect(testNode.childNodes[0].name).toEqual("");
if (testNode.childNodes[0].outerHTML) { // Old Firefox doesn't support outerHTML
- value_of(testNode.childNodes[0].outerHTML).should_not_match('name="?([^">]+)');
+ expect(testNode.childNodes[0].outerHTML).toNotMatch('name="?([^">]+)');
}
- value_of(testNode.childNodes[0].getAttribute("name")).should_be("");
- },
+ expect(testNode.childNodes[0].getAttribute("name")).toEqual("");
+ });
- 'Should respond to changes in an observable value': function() {
+ it('Should respond to changes in an observable value', function() {
var model = { myprop : ko.observable("initial value") };
testNode.innerHTML = "<div data-bind='attr: { someAttrib: myprop }'></div>";
ko.applyBindings(model, testNode);
- value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be("initial value");
+ expect(testNode.childNodes[0].getAttribute("someAttrib")).toEqual("initial value");
// Change the observable; observe it reflected in the DOM
model.myprop("new value");
- value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be("new value");
- },
+ expect(testNode.childNodes[0].getAttribute("someAttrib")).toEqual("new value");
+ });
- 'Should remove the attribute if the value is strictly false, null, or undefined': function() {
+ it('Should remove the attribute if the value is strictly false, null, or undefined', function() {
var model = { myprop : ko.observable() };
testNode.innerHTML = "<div data-bind='attr: { someAttrib: myprop }'></div>";
ko.applyBindings(model, testNode);
ko.utils.arrayForEach([false, null, undefined], function(testValue) {
model.myprop("nonempty value");
- value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be("nonempty value");
+ expect(testNode.childNodes[0].getAttribute("someAttrib")).toEqual("nonempty value");
model.myprop(testValue);
- value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be(null);
+ expect(testNode.childNodes[0].getAttribute("someAttrib")).toEqual(null);
});
- },
+ });
- 'Should be able to set class attribute and access it using className property': function() {
+ it('Should be able to set class attribute and access it using className property', function() {
var model = { myprop : ko.observable("newClass") };
testNode.innerHTML = "<div class='oldClass' data-bind=\"attr: {'class': myprop}\"></div>";
- value_of(testNode.childNodes[0].className).should_be("oldClass");
+ expect(testNode.childNodes[0].className).toEqual("oldClass");
ko.applyBindings(model, testNode);
- value_of(testNode.childNodes[0].className).should_be("newClass");
+ expect(testNode.childNodes[0].className).toEqual("newClass");
// Should be able to clear class also
model.myprop(undefined);
- value_of(testNode.childNodes[0].className).should_be("");
- value_of(testNode.childNodes[0].getAttribute("class")).should_be(null);
- }
+ expect(testNode.childNodes[0].className).toEqual("");
+ expect(testNode.childNodes[0].getAttribute("class")).toEqual(null);
+ });
});
View
118 spec/defaultBindings/checkedBehaviors.js
@@ -1,47 +1,47 @@
-describe('Binding: Checked', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: Checked', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Triggering a click should toggle a checkbox\'s checked state before the event handler fires': function() {
+ it('Triggering a click should toggle a checkbox\'s checked state before the event handler fires', function() {
// This isn't strictly to do with the checked binding, but if this doesn't work, the rest of the specs aren't meaningful
testNode.innerHTML = "<input type='checkbox' />";
var clickHandlerFireCount = 0, expectedCheckedStateInHandler;
ko.utils.registerEventHandler(testNode.childNodes[0], "click", function() {
clickHandlerFireCount++;
- value_of(testNode.childNodes[0].checked).should_be(expectedCheckedStateInHandler);
+ expect(testNode.childNodes[0].checked).toEqual(expectedCheckedStateInHandler);
})
- value_of(testNode.childNodes[0].checked).should_be(false);
+ expect(testNode.childNodes[0].checked).toEqual(false);
expectedCheckedStateInHandler = true;
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(testNode.childNodes[0].checked).should_be(true);
- value_of(clickHandlerFireCount).should_be(1);
+ expect(testNode.childNodes[0].checked).toEqual(true);
+ expect(clickHandlerFireCount).toEqual(1);
expectedCheckedStateInHandler = false;
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(testNode.childNodes[0].checked).should_be(false);
- value_of(clickHandlerFireCount).should_be(2);
- },
+ expect(testNode.childNodes[0].checked).toEqual(false);
+ expect(clickHandlerFireCount).toEqual(2);
+ });
- 'Should be able to control a checkbox\'s checked state': function () {
+ it('Should be able to control a checkbox\'s checked state', function () {
var myobservable = new ko.observable(true);
testNode.innerHTML = "<input type='checkbox' data-bind='checked:someProp' />";
ko.applyBindings({ someProp: myobservable }, testNode);
- value_of(testNode.childNodes[0].checked).should_be(true);
+ expect(testNode.childNodes[0].checked).toEqual(true);
myobservable(false);
- value_of(testNode.childNodes[0].checked).should_be(false);
- },
+ expect(testNode.childNodes[0].checked).toEqual(false);
+ });
- 'Should update observable properties on the underlying model when the checkbox click event fires': function () {
+ it('Should update observable properties on the underlying model when the checkbox click event fires', function () {
var myobservable = new ko.observable(false);
testNode.innerHTML = "<input type='checkbox' data-bind='checked:someProp' />";
ko.applyBindings({ someProp: myobservable }, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(myobservable()).should_be(true);
- },
+ expect(myobservable()).toEqual(true);
+ });
- 'Should only notify observable properties on the underlying model *once* even if the checkbox change events fire multiple times': function () {
+ it('Should only notify observable properties on the underlying model *once* even if the checkbox change events fire multiple times', function () {
var myobservable = new ko.observable();
var timesNotified = 0;
myobservable.subscribe(function() { timesNotified++ });
@@ -52,63 +52,63 @@ describe('Binding: Checked', {
ko.utils.triggerEvent(testNode.childNodes[0], "click");
ko.utils.triggerEvent(testNode.childNodes[0], "change");
ko.utils.triggerEvent(testNode.childNodes[0], "change");
- value_of(timesNotified).should_be(1);
+ expect(timesNotified).toEqual(1);
// ... until the checkbox value actually changes
ko.utils.triggerEvent(testNode.childNodes[0], "click");
ko.utils.triggerEvent(testNode.childNodes[0], "change");
- value_of(timesNotified).should_be(2);
- },
+ expect(timesNotified).toEqual(2);
+ });
- 'Should update non-observable properties on the underlying model when the checkbox click event fires': function () {
+ it('Should update non-observable properties on the underlying model when the checkbox click event fires', function () {
var model = { someProp: false };
testNode.innerHTML = "<input type='checkbox' data-bind='checked:someProp' />";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(model.someProp).should_be(true);
- },
+ expect(model.someProp).toEqual(true);
+ });
- 'Should update observable properties on the underlying model when the checkbox is clicked': function () {
+ it('Should update observable properties on the underlying model when the checkbox is clicked', function () {
var myobservable = new ko.observable(false);
testNode.innerHTML = "<input type='checkbox' data-bind='checked:someProp' />";
ko.applyBindings({ someProp: myobservable }, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(myobservable()).should_be(true);
- },
+ expect(myobservable()).toEqual(true);
+ });
- 'Should update non-observable properties on the underlying model when the checkbox is clicked': function () {
+ it('Should update non-observable properties on the underlying model when the checkbox is clicked', function () {
var model = { someProp: false };
testNode.innerHTML = "<input type='checkbox' data-bind='checked:someProp' />";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(model.someProp).should_be(true);
- },
+ expect(model.someProp).toEqual(true);
+ });
- 'Should make a radio button checked if and only if its value matches the bound model property': function () {
+ it('Should make a radio button checked if and only if its value matches the bound model property', function () {
var myobservable = new ko.observable("another value");
testNode.innerHTML = "<input type='radio' value='This Radio Button Value' data-bind='checked:someProp' />";
ko.applyBindings({ someProp: myobservable }, testNode);
- value_of(testNode.childNodes[0].checked).should_be(false);
+ expect(testNode.childNodes[0].checked).toEqual(false);
myobservable("This Radio Button Value");
- value_of(testNode.childNodes[0].checked).should_be(true);
- },
+ expect(testNode.childNodes[0].checked).toEqual(true);
+ });
- 'Should set an observable model property to this radio button\'s value when checked': function () {
+ it('Should set an observable model property to this radio button\'s value when checked', function () {
var myobservable = new ko.observable("another value");
testNode.innerHTML = "<input type='radio' value='this radio button value' data-bind='checked:someProp' />";
ko.applyBindings({ someProp: myobservable }, testNode);
- value_of(myobservable()).should_be("another value");
+ expect(myobservable()).toEqual("another value");
testNode.childNodes[0].click();
- value_of(myobservable()).should_be("this radio button value");
- },
+ expect(myobservable()).toEqual("this radio button value");
+ });
- 'Should only notify observable properties on the underlying model *once* even if the radio button change/click events fire multiple times': function () {
+ it('Should only notify observable properties on the underlying model *once* even if the radio button change/click events fire multiple times', function () {
var myobservable = new ko.observable("original value");
var timesNotified = 0;
myobservable.subscribe(function() { timesNotified++ });
@@ -120,57 +120,57 @@ describe('Binding: Checked', {
ko.utils.triggerEvent(testNode.childNodes[0], "change");
ko.utils.triggerEvent(testNode.childNodes[0], "click");
ko.utils.triggerEvent(testNode.childNodes[0], "change");
- value_of(timesNotified).should_be(1);
+ expect(timesNotified).toEqual(1);
// ... until you click something with a different value
ko.utils.triggerEvent(testNode.childNodes[1], "click");
ko.utils.triggerEvent(testNode.childNodes[1], "change");
- value_of(timesNotified).should_be(2);
- },
+ expect(timesNotified).toEqual(2);
+ });
- 'Should set a non-observable model property to this radio button\'s value when checked': function () {
+ it('Should set a non-observable model property to this radio button\'s value when checked', function () {
var model = { someProp: "another value" };
testNode.innerHTML = "<input type='radio' value='this radio button value' data-bind='checked:someProp' />";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(model.someProp).should_be("this radio button value");
- },
+ expect(model.someProp).toEqual("this radio button value");
+ });
- 'When a checkbox is bound to an array, the checkbox should control whether its value is in that array': function() {
+ it('When a checkbox is bound to an array, the checkbox should control whether its value is in that array', function() {
var model = { myArray: ["Existing value", "Unrelated value"] };
testNode.innerHTML = "<input type='checkbox' value='Existing value' data-bind='checked:myArray' />"
+ "<input type='checkbox' value='New value' data-bind='checked:myArray' />";
ko.applyBindings(model, testNode);
- value_of(model.myArray).should_be(["Existing value", "Unrelated value"]);
+ expect(model.myArray).toEqual(["Existing value", "Unrelated value"]);
// Checkbox initial state is determined by whether the value is in the array
- value_of(testNode.childNodes[0].checked).should_be(true);
- value_of(testNode.childNodes[1].checked).should_be(false);
+ expect(testNode.childNodes[0].checked).toEqual(true);
+ expect(testNode.childNodes[1].checked).toEqual(false);
// Checking the checkbox puts it in the array
ko.utils.triggerEvent(testNode.childNodes[1], "click");
- value_of(testNode.childNodes[1].checked).should_be(true);
- value_of(model.myArray).should_be(["Existing value", "Unrelated value", "New value"]);
+ expect(testNode.childNodes[1].checked).toEqual(true);
+ expect(model.myArray).toEqual(["Existing value", "Unrelated value", "New value"]);
// Unchecking the checkbox removes it from the array
ko.utils.triggerEvent(testNode.childNodes[1], "click");
- value_of(testNode.childNodes[1].checked).should_be(false);
- value_of(model.myArray).should_be(["Existing value", "Unrelated value"]);
- },
+ expect(testNode.childNodes[1].checked).toEqual(false);
+ expect(model.myArray).toEqual(["Existing value", "Unrelated value"]);
+ });
- 'When a checkbox is bound to an observable array, the checkbox checked state responds to changes in the array': function() {
+ it('When a checkbox is bound to an observable array, the checkbox checked state responds to changes in the array', function() {
var model = { myObservableArray: ko.observableArray(["Unrelated value"]) };
testNode.innerHTML = "<input type='checkbox' value='My value' data-bind='checked:myObservableArray' />";
ko.applyBindings(model, testNode);
- value_of(testNode.childNodes[0].checked).should_be(false);
+ expect(testNode.childNodes[0].checked).toEqual(false);
// Put the value in the array; observe the checkbox reflect this
model.myObservableArray.push("My value");
- value_of(testNode.childNodes[0].checked).should_be(true);
+ expect(testNode.childNodes[0].checked).toEqual(true);
// Remove the value from the array; observe the checkbox reflect this
model.myObservableArray.remove("My value");
- value_of(testNode.childNodes[0].checked).should_be(false);
- }
+ expect(testNode.childNodes[0].checked).toEqual(false);
+ });
});
View
14 spec/defaultBindings/clickBehaviors.js
@@ -1,19 +1,19 @@
-describe('Binding: Click', {
+describe('Binding: Click', function() {
// This is just a special case of the "event" binding, so not necessary to respecify all its behaviours
- before_each: JSSpec.prepareTestNode,
+ beforeEach(jasmine.prepareTestNode);
- 'Should invoke the supplied function on click, using model as \'this\' param and first arg, and event as second arg': function () {
+ it('Should invoke the supplied function on click, using model as \'this\' param and first arg, and event as second arg', function () {
var model = {
wasCalled: false,
doCall: function (arg1, arg2) {
this.wasCalled = true;
- value_of(arg1).should_be(model);
- value_of(arg2.type).should_be("click");
+ expect(arg1).toEqual(model);
+ expect(arg2.type).toEqual("click");
}
};
testNode.innerHTML = "<button data-bind='click:doCall'>hey</button>";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(model.wasCalled).should_be(true);
- }
+ expect(model.wasCalled).toEqual(true);
+ });
});
View
44 spec/defaultBindings/cssBehaviors.js
@@ -1,52 +1,52 @@
-describe('Binding: CSS class name', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: CSS class name', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Should give the element the specific CSS class only when the specified value is true': function () {
+ it('Should give the element the specific CSS class only when the specified value is true', function () {
var observable1 = new ko.observable();
var observable2 = new ko.observable(true);
testNode.innerHTML = "<div class='unrelatedClass1 unrelatedClass2' data-bind='css: { myRule: someModelProperty, anotherRule: anotherModelProperty }'>Hallo</div>";
ko.applyBindings({ someModelProperty: observable1, anotherModelProperty: observable2 }, testNode);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 unrelatedClass2 anotherRule");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 unrelatedClass2 anotherRule");
observable1(true);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 unrelatedClass2 anotherRule myRule");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 unrelatedClass2 anotherRule myRule");
observable2(false);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 unrelatedClass2 myRule");
- },
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 unrelatedClass2 myRule");
+ });
- 'Should give the element a single CSS class without a leading space when the specified value is true': function() {
+ it('Should give the element a single CSS class without a leading space when the specified value is true', function() {
var observable1 = new ko.observable();
testNode.innerHTML = "<div data-bind='css: { myRule: someModelProperty }'>Hallo</div>";
ko.applyBindings({ someModelProperty: observable1 }, testNode);
- value_of(testNode.childNodes[0].className).should_be("");
+ expect(testNode.childNodes[0].className).toEqual("");
observable1(true);
- value_of(testNode.childNodes[0].className).should_be("myRule");
- },
+ expect(testNode.childNodes[0].className).toEqual("myRule");
+ });
- 'Should toggle multiple CSS classes if specified as a single string separated by spaces': function() {
+ it('Should toggle multiple CSS classes if specified as a single string separated by spaces', function() {
var observable1 = new ko.observable();
testNode.innerHTML = "<div class='unrelatedClass1' data-bind='css: { \"myRule _another-Rule123\": someModelProperty }'>Hallo</div>";
ko.applyBindings({ someModelProperty: observable1 }, testNode);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1");
observable1(true);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 myRule _another-Rule123");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 myRule _another-Rule123");
observable1(false);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1");
- },
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1");
+ });
- 'Should set/change dynamic CSS class(es) if string is specified': function() {
+ it('Should set/change dynamic CSS class(es) if string is specified', function() {
var observable1 = new ko.observable("");
testNode.innerHTML = "<div class='unrelatedClass1' data-bind='css: someModelProperty'>Hallo</div>";
ko.applyBindings({ someModelProperty: observable1 }, testNode);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1");
observable1("my-Rule");
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 my-Rule");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 my-Rule");
observable1("another_Rule my-Rule");
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 another_Rule my-Rule");
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 another_Rule my-Rule");
observable1(undefined);
- value_of(testNode.childNodes[0].className).should_be("unrelatedClass1");
- }
+ expect(testNode.childNodes[0].className).toEqual("unrelatedClass1");
+ });
});
View
32 spec/defaultBindings/enableDisableBehaviors.js
@@ -1,37 +1,37 @@
-describe('Binding: Enable/Disable', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: Enable/Disable', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Enable means the node is enabled only when the value is true': function () {
+ it('Enable means the node is enabled only when the value is true', function () {
var observable = new ko.observable();
testNode.innerHTML = "<input data-bind='enable:myModelProperty()' />";
ko.applyBindings({ myModelProperty: observable }, testNode);
- value_of(testNode.childNodes[0].disabled).should_be(true);
+ expect(testNode.childNodes[0].disabled).toEqual(true);
observable(1);
- value_of(testNode.childNodes[0].disabled).should_be(false);
- },
+ expect(testNode.childNodes[0].disabled).toEqual(false);
+ });
- 'Disable means the node is enabled only when the value is false': function () {
+ it('Disable means the node is enabled only when the value is false', function () {
var observable = new ko.observable();
testNode.innerHTML = "<input data-bind='disable:myModelProperty()' />";
ko.applyBindings({ myModelProperty: observable }, testNode);
- value_of(testNode.childNodes[0].disabled).should_be(false);
+ expect(testNode.childNodes[0].disabled).toEqual(false);
observable(1);
- value_of(testNode.childNodes[0].disabled).should_be(true);
- },
+ expect(testNode.childNodes[0].disabled).toEqual(true);
+ });
- 'Enable should unwrap observables implicitly': function () {
+ it('Enable should unwrap observables implicitly', function () {
var observable = new ko.observable(false);
testNode.innerHTML = "<input data-bind='enable:myModelProperty' />";
ko.applyBindings({ myModelProperty: observable }, testNode);
- value_of(testNode.childNodes[0].disabled).should_be(true);
- },
+ expect(testNode.childNodes[0].disabled).toEqual(true);
+ });
- 'Disable should unwrap observables implicitly': function () {
+ it('Disable should unwrap observables implicitly', function () {
var observable = new ko.observable(false);
testNode.innerHTML = "<input data-bind='disable:myModelProperty' />";
ko.applyBindings({ myModelProperty: observable }, testNode);
- value_of(testNode.childNodes[0].disabled).should_be(false);
- }
+ expect(testNode.childNodes[0].disabled).toEqual(false);
+ });
});
View
70 spec/defaultBindings/eventBehaviors.js
@@ -1,46 +1,46 @@
-describe('Binding: Event', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: Event', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Should invoke the supplied function when the event occurs, using model as \'this\' param and first arg, and event as second arg': function () {
+ it('Should invoke the supplied function when the event occurs, using model as \'this\' param and first arg, and event as second arg', function () {
var model = {
firstWasCalled: false,
firstHandler: function (passedModel, evt) {
- value_of(evt.type).should_be("click");
- value_of(this).should_be(model);
- value_of(passedModel).should_be(model);
+ expect(evt.type).toEqual("click");
+ expect(this).toEqual(model);
+ expect(passedModel).toEqual(model);
- value_of(model.firstWasCalled).should_be(false);
+ expect(model.firstWasCalled).toEqual(false);
model.firstWasCalled = true;
},
secondWasCalled: false,
secondHandler: function (passedModel, evt) {
- value_of(evt.type).should_be("mouseover");
- value_of(this).should_be(model);
- value_of(passedModel).should_be(model);
+ expect(evt.type).toEqual("mouseover");
+ expect(this).toEqual(model);
+ expect(passedModel).toEqual(model);
- value_of(model.secondWasCalled).should_be(false);
+ expect(model.secondWasCalled).toEqual(false);
model.secondWasCalled = true;
}
};
testNode.innerHTML = "<button data-bind='event:{click:firstHandler, mouseover:secondHandler, mouseout:null}'>hey</button>";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
- value_of(model.firstWasCalled).should_be(true);
- value_of(model.secondWasCalled).should_be(false);
+ expect(model.firstWasCalled).toEqual(true);
+ expect(model.secondWasCalled).toEqual(false);
ko.utils.triggerEvent(testNode.childNodes[0], "mouseover");
- value_of(model.secondWasCalled).should_be(true);
+ expect(model.secondWasCalled).toEqual(true);
ko.utils.triggerEvent(testNode.childNodes[0], "mouseout"); // Shouldn't do anything (specifically, shouldn't throw)
- },
+ });
- 'Should prevent default action': function () {
+ it('Should prevent default action', function () {
testNode.innerHTML = "<a href='http://www.example.com/' data-bind='event: { click: function() { } }'>hey</button>";
ko.applyBindings(null, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "click");
// Assuming we haven't been redirected to http://www.example.com/, this spec has now passed
- },
+ });
- 'Should let bubblable events bubble to parent elements by default': function() {
+ it('Should let bubblable events bubble to parent elements by default', function() {
var model = {
innerWasCalled: false, innerDoCall: function () { this.innerWasCalled = true; },
outerWasCalled: false, outerDoCall: function () { this.outerWasCalled = true; }
@@ -48,11 +48,11 @@ describe('Binding: Event', {
testNode.innerHTML = "<div data-bind='event:{click:outerDoCall}'><button data-bind='event:{click:innerDoCall}'>hey</button></div>";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0].childNodes[0], "click");
- value_of(model.innerWasCalled).should_be(true);
- value_of(model.outerWasCalled).should_be(true);
- },
+ expect(model.innerWasCalled).toEqual(true);
+ expect(model.outerWasCalled).toEqual(true);
+ });
- 'Should be able to prevent bubbling of bubblable events using the (eventname)Bubble:false option': function() {
+ it('Should be able to prevent bubbling of bubblable events using the (eventname)Bubble:false option', function() {
var model = {
innerWasCalled: false, innerDoCall: function () { this.innerWasCalled = true; },
outerWasCalled: false, outerDoCall: function () { this.outerWasCalled = true; }
@@ -60,25 +60,25 @@ describe('Binding: Event', {
testNode.innerHTML = "<div data-bind='event:{click:outerDoCall}'><button data-bind='event:{click:innerDoCall}, clickBubble:false'>hey</button></div>";
ko.applyBindings(model, testNode);
ko.utils.triggerEvent(testNode.childNodes[0].childNodes[0], "click");
- value_of(model.innerWasCalled).should_be(true);
- value_of(model.outerWasCalled).should_be(false);
- },
+ expect(model.innerWasCalled).toEqual(true);
+ expect(model.outerWasCalled).toEqual(false);
+ });
- 'Should be able to supply handler params using "bind" helper': function() {
+ it('Should be able to supply handler params using "bind" helper', function() {
// Using "bind" like this just eliminates the function literal wrapper - it's purely stylistic
var didCallHandler = false, someObj = {};
var myHandler = function() {
- value_of(this).should_be(someObj);
- value_of(arguments.length).should_be(5);
+ expect(this).toEqual(someObj);
+ expect(arguments.length).toEqual(5);
// First x args will be the ones you bound
- value_of(arguments[0]).should_be(123);
- value_of(arguments[1]).should_be("another");
- value_of(arguments[2].something).should_be(true);
+ expect(arguments[0]).toEqual(123);
+ expect(arguments[1]).toEqual("another");
+ expect(arguments[2].something).toEqual(true);
// Then you get the args we normally pass to handlers, i.e., the model then the event
- value_of(arguments[3]).should_be(viewModel);
- value_of(arguments[4].type).should_be("mouseover");
+ expect(arguments[3]).toEqual(viewModel);
+ expect(arguments[4].type).toEqual("mouseover");
didCallHandler = true;
};
@@ -86,6 +86,6 @@ describe('Binding: Event', {
var viewModel = { myHandler: myHandler, someObj: someObj };
ko.applyBindings(viewModel, testNode);
ko.utils.triggerEvent(testNode.childNodes[0], "mouseover");
- value_of(didCallHandler).should_be(true);
- }
+ expect(didCallHandler).toEqual(true);
+ });
});
View
304 spec/defaultBindings/foreachBehaviors.js
@@ -1,109 +1,109 @@
-describe('Binding: Foreach', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: Foreach', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Should remove descendant nodes from the document (and not bind them) if the value is falsey': function() {
+ it('Should remove descendant nodes from the document (and not bind them) if the value is falsey', function() {
testNode.innerHTML = "<div data-bind='foreach: someItem'><span data-bind='text: someItem.nonExistentChildProp'></span></div>";
- value_of(testNode.childNodes[0].childNodes.length).should_be(1);
+ expect(testNode.childNodes[0].childNodes.length).toEqual(1);
ko.applyBindings({ someItem: null }, testNode);
- value_of(testNode.childNodes[0].childNodes.length).should_be(0);
- },
+ expect(testNode.childNodes[0].childNodes.length).toEqual(0);
+ });
- 'Should remove descendant nodes from the document (and not bind them) if the value is undefined': function() {
+ it('Should remove descendant nodes from the document (and not bind them) if the value is undefined', function() {
testNode.innerHTML = "<div data-bind='foreach: someItem'><span data-bind='text: someItem.nonExistentChildProp'></span></div>";
- value_of(testNode.childNodes[0].childNodes.length).should_be(1);
+ expect(testNode.childNodes[0].childNodes.length).toEqual(1);
ko.applyBindings({ someItem: undefined }, testNode);
- value_of(testNode.childNodes[0].childNodes.length).should_be(0);
- },
+ expect(testNode.childNodes[0].childNodes.length).toEqual(0);
+ });
- 'Should duplicate descendant nodes for each value in the array value (and bind them in the context of that supplied value)': function() {
+ it('Should duplicate descendant nodes for each value in the array value (and bind them in the context of that supplied value)', function() {
testNode.innerHTML = "<div data-bind='foreach: someItems'><span data-bind='text: childProp'></span></div>";
var someItems = [
{ childProp: 'first child' },
{ childProp: 'second child' }
];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
- },
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
+ });
- 'Should clean away any data values attached to the original template nodes before use': function() {
+ it('Should clean away any data values attached to the original template nodes before use', function() {
// Represents issue https://github.com/SteveSanderson/knockout/pull/420
testNode.innerHTML = "<div data-bind='foreach: [1, 2]'><span></span></div>";
// Apply some DOM Data to the SPAN
var span = testNode.childNodes[0].childNodes[0];
- value_of(span.tagName).should_be("SPAN");
+ expect(span.tagName).toEqual("SPAN");
ko.utils.domData.set(span, "mydata", 123);
// See that it vanishes because the SPAN is extracted as a template
- value_of(ko.utils.domData.get(span, "mydata")).should_be(123);
+ expect(ko.utils.domData.get(span, "mydata")).toEqual(123);
ko.applyBindings(null, testNode);
- value_of(ko.utils.domData.get(span, "mydata")).should_be(undefined);
+ expect(ko.utils.domData.get(span, "mydata")).toEqual(undefined);
// Also be sure the DOM Data doesn't appear in the output
- value_of(testNode.childNodes[0]).should_contain_html('<span></span><span></span>');
- value_of(ko.utils.domData.get(testNode.childNodes[0].childNodes[0], "mydata")).should_be(undefined);
- value_of(ko.utils.domData.get(testNode.childNodes[0].childNodes[1], "mydata")).should_be(undefined);
- },
+ expect(testNode.childNodes[0]).toContainHtml('<span></span><span></span>');
+ expect(ko.utils.domData.get(testNode.childNodes[0].childNodes[0], "mydata")).toEqual(undefined);
+ expect(ko.utils.domData.get(testNode.childNodes[0].childNodes[1], "mydata")).toEqual(undefined);
+ });
- 'Should be able to use $data to reference each array item being bound': function() {
+ it('Should be able to use $data to reference each array item being bound', function() {
testNode.innerHTML = "<div data-bind='foreach: someItems'><span data-bind='text: $data'></span></div>";
var someItems = ['alpha', 'beta'];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: $data">alpha</span><span data-bind="text: $data">beta</span>');
- },
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: $data">alpha</span><span data-bind="text: $data">beta</span>');
+ });
- 'Should add and remove nodes to match changes in the bound array': function() {
+ it('Should add and remove nodes to match changes in the bound array', function() {
testNode.innerHTML = "<div data-bind='foreach: someItems'><span data-bind='text: childProp'></span></div>";
var someItems = ko.observableArray([
{ childProp: 'first child' },
{ childProp: 'second child' }
]);
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
// Add items at the beginning...
someItems.unshift({ childProp: 'zeroth child' });
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">zeroth child</span><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">zeroth child</span><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
// ... middle
someItems.splice(2, 0, { childProp: 'middle child' });
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">zeroth child</span><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">middle child</span><span data-bind="text: childprop">second child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">zeroth child</span><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">middle child</span><span data-bind="text: childprop">second child</span>');
// ... and end
someItems.push({ childProp: 'last child' });
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">zeroth child</span><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">middle child</span><span data-bind="text: childprop">second child</span><span data-bind="text: childprop">last child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">zeroth child</span><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">middle child</span><span data-bind="text: childprop">second child</span><span data-bind="text: childprop">last child</span>');
// Also remove from beginning...
someItems.shift();
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">middle child</span><span data-bind="text: childprop">second child</span><span data-bind="text: childprop">last child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">middle child</span><span data-bind="text: childprop">second child</span><span data-bind="text: childprop">last child</span>');
// ... and middle
someItems.splice(1, 1);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span><span data-bind="text: childprop">last child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span><span data-bind="text: childprop">last child</span>');
// ... and end
someItems.pop();
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
// Also, marking as "destroy" should eliminate the item from display
someItems.destroy(someItems()[0]);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">second child</span>');
- },
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">second child</span>');
+ });
- 'Should remove all nodes corresponding to a removed array item, even if they were generated via containerless templates': function() {
+ it('Should remove all nodes corresponding to a removed array item, even if they were generated via containerless templates', function() {
// Represents issue https://github.com/SteveSanderson/knockout/issues/185
testNode.innerHTML = "<div data-bind='foreach: someitems'>a<!-- ko if:true -->b<!-- /ko --></div>";
var someitems = ko.observableArray([1,2]);
ko.applyBindings({ someitems: someitems }, testNode);
- value_of(testNode).should_contain_html('<div data-bind="foreach: someitems">a<!-- ko if:true -->b<!-- /ko -->a<!-- ko if:true -->b<!-- /ko --></div>');
+ expect(testNode).toContainHtml('<div data-bind="foreach: someitems">a<!-- ko if:true -->b<!-- /ko -->a<!-- ko if:true -->b<!-- /ko --></div>');
// Now remove items, and check the corresponding child nodes vanished
someitems.splice(1, 1);
- value_of(testNode).should_contain_html('<div data-bind="foreach: someitems">a<!-- ko if:true -->b<!-- /ko --></div>');
- },
+ expect(testNode).toContainHtml('<div data-bind="foreach: someitems">a<!-- ko if:true -->b<!-- /ko --></div>');
+ });
- 'Should remove all nodes corresponding to a removed array item, even if they were added via containerless syntax and there are no other nodes': function() {
+ it('Should remove all nodes corresponding to a removed array item, even if they were added via containerless syntax and there are no other nodes', function() {
ko.bindingHandlers.test = {
init: function (element, valueAccessor) {
var value = valueAccessor();
@@ -115,35 +115,35 @@ describe('Binding: Foreach', {
testNode.innerHTML = "x-<!--ko foreach: someitems--><!--ko test:$data--><!--/ko--><!--/ko-->";
var someitems = ko.observableArray(["aaa","bbb"]);
ko.applyBindings({ someitems: someitems }, testNode);
- value_of(testNode).should_contain_text('x-aaabbb');
+ expect(testNode).toContainText('x-aaabbb');
// Now remove items, and check the corresponding child nodes vanished
someitems.splice(1, 1);
- value_of(testNode).should_contain_text('x-aaa');
- },
+ expect(testNode).toContainText('x-aaa');
+ });
- 'Should update all nodes corresponding to a changed array item, even if they were generated via containerless templates': function() {
+ it('Should update all nodes corresponding to a changed array item, even if they were generated via containerless templates', function() {
testNode.innerHTML = "<div data-bind='foreach: someitems'><!-- ko if:true --><span data-bind='text: $data'></span><!-- /ko --></div>";
var someitems = [ ko.observable('A'), ko.observable('B') ];
ko.applyBindings({ someitems: someitems }, testNode);
- value_of(testNode).should_contain_text('AB');
+ expect(testNode).toContainText('AB');
// Now update an item
someitems[0]('A2');
- value_of(testNode).should_contain_text('A2B');
- },
+ expect(testNode).toContainText('A2B');
+ });
- 'Should be able to supply show "_destroy"ed items via includeDestroyed option': function() {
+ it('Should be able to supply show "_destroy"ed items via includeDestroyed option', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, includeDestroyed: true }'><span data-bind='text: childProp'></span></div>";
var someItems = ko.observableArray([
{ childProp: 'first child' },
{ childProp: 'second child', _destroy: true }
]);
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
- },
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span>');
+ });
- 'Should be able to supply afterAdd and beforeRemove callbacks': function() {
+ it('Should be able to supply afterAdd and beforeRemove callbacks', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, afterAdd: myAfterAdd, beforeRemove: myBeforeRemove }'><span data-bind='text: childprop'></span></div>";
var someItems = ko.observableArray([{ childprop: 'first child' }]);
var afterAddCallbackData = [], beforeRemoveCallbackData = [];
@@ -153,128 +153,128 @@ describe('Binding: Foreach', {
myBeforeRemove: function(elem, index, value) { beforeRemoveCallbackData.push({ elem: elem, index: index, value: value, currentParentClone: elem.parentNode.cloneNode(true) }) }
}, testNode);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span>');
// Try adding
someItems.push({ childprop: 'added child'});
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
- value_of(afterAddCallbackData.length).should_be(1);
- value_of(afterAddCallbackData[0].elem).should_be(testNode.childNodes[0].childNodes[1]);
- value_of(afterAddCallbackData[0].index).should_be(1);
- value_of(afterAddCallbackData[0].value.childprop).should_be("added child");
- value_of(afterAddCallbackData[0].currentParentClone).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
+ expect(afterAddCallbackData.length).toEqual(1);
+ expect(afterAddCallbackData[0].elem).toEqual(testNode.childNodes[0].childNodes[1]);
+ expect(afterAddCallbackData[0].index).toEqual(1);
+ expect(afterAddCallbackData[0].value.childprop).toEqual("added child");
+ expect(afterAddCallbackData[0].currentParentClone).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
// Try removing
someItems.shift();
- value_of(beforeRemoveCallbackData.length).should_be(1);
- value_of(beforeRemoveCallbackData[0].elem).should_contain_text("first child");
- value_of(beforeRemoveCallbackData[0].index).should_be(0);
- value_of(beforeRemoveCallbackData[0].value.childprop).should_be("first child");
+ expect(beforeRemoveCallbackData.length).toEqual(1);
+ expect(beforeRemoveCallbackData[0].elem).toContainText("first child");
+ expect(beforeRemoveCallbackData[0].index).toEqual(0);
+ expect(beforeRemoveCallbackData[0].value.childprop).toEqual("first child");
// Note that when using "beforeRemove", we *don't* remove the node from the doc - it's up to the beforeRemove callback to do it. So, check it's still there.
- value_of(beforeRemoveCallbackData[0].currentParentClone).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
- },
+ expect(beforeRemoveCallbackData[0].currentParentClone).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: childprop">first child</span><span data-bind="text: childprop">added child</span>');
+ });
- 'Should call an afterRender callback function and not cause updates if an observable accessed in the callback is changed': function () {
+ it('Should call an afterRender callback function and not cause updates if an observable accessed in the callback is changed', function () {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, afterRender: callback }'><span data-bind='text: childprop'></span></div>";
var callbackObservable = ko.observable(1),
someItems = ko.observableArray([{ childprop: 'first child' }]),
callbacks = 0;
ko.applyBindings({ someItems: someItems, callback: function() { callbackObservable(); callbacks++; } }, testNode);
- value_of(callbacks).should_be(1);
+ expect(callbacks).toEqual(1);
// Change the array, but don't update the observableArray so that the foreach binding isn't updated
someItems().push({ childprop: 'hidden child'});
- value_of(testNode.childNodes[0]).should_contain_text('first child');
+ expect(testNode.childNodes[0]).toContainText('first child');
// Update callback observable and check that the binding wasn't updated
callbackObservable(2);
- value_of(testNode.childNodes[0]).should_contain_text('first child');
+ expect(testNode.childNodes[0]).toContainText('first child');
// Update the observableArray and verify that the binding is now updated
someItems.valueHasMutated();
- value_of(testNode.childNodes[0]).should_contain_text('first childhidden child');
- },
+ expect(testNode.childNodes[0]).toContainText('first childhidden child');
+ });
- 'Should call an afterAdd callback function and not cause updates if an observable accessed in the callback is changed': function () {
+ it('Should call an afterAdd callback function and not cause updates if an observable accessed in the callback is changed', function () {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, afterAdd: callback }'><span data-bind='text: childprop'></span></div>";
var callbackObservable = ko.observable(1),
someItems = ko.observableArray([]),
callbacks = 0;
ko.applyBindings({ someItems: someItems, callback: function() { callbackObservable(); callbacks++; } }, testNode);
someItems.push({ childprop: 'added child'});
- value_of(callbacks).should_be(1);
+ expect(callbacks).toEqual(1);
// Change the array, but don't update the observableArray so that the foreach binding isn't updated
someItems().push({ childprop: 'hidden child'});
- value_of(testNode.childNodes[0]).should_contain_text('added child');
+ expect(testNode.childNodes[0]).toContainText('added child');
// Update callback observable and check that the binding wasn't updated
callbackObservable(2);
- value_of(testNode.childNodes[0]).should_contain_text('added child');
+ expect(testNode.childNodes[0]).toContainText('added child');
// Update the observableArray and verify that the binding is now updated
someItems.valueHasMutated();
- value_of(testNode.childNodes[0]).should_contain_text('added childhidden child');
- },
+ expect(testNode.childNodes[0]).toContainText('added childhidden child');
+ });
- 'Should call an beforeRemove callback function and not cause updates if an observable accessed in the callback is changed': function () {
+ it('Should call an beforeRemove callback function and not cause updates if an observable accessed in the callback is changed', function () {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, beforeRemove: callback }'><span data-bind='text: childprop'></span></div>";
var callbackObservable = ko.observable(1),
someItems = ko.observableArray([{ childprop: 'first child' }, { childprop: 'second child' }]),
callbacks = 0;
ko.applyBindings({ someItems: someItems, callback: function(elem) { callbackObservable(); callbacks++; ko.removeNode(elem); } }, testNode);
someItems.pop();
- value_of(callbacks).should_be(1);
+ expect(callbacks).toEqual(1);
// Change the array, but don't update the observableArray so that the foreach binding isn't updated
someItems().push({ childprop: 'hidden child'});
- value_of(testNode.childNodes[0]).should_contain_text('first child');
+ expect(testNode.childNodes[0]).toContainText('first child');
// Update callback observable and check that the binding wasn't updated
callbackObservable(2);
- value_of(testNode.childNodes[0]).should_contain_text('first child');
+ expect(testNode.childNodes[0]).toContainText('first child');
// Update the observableArray and verify that the binding is now updated
someItems.valueHasMutated();
- value_of(testNode.childNodes[0]).should_contain_text('first childhidden child');
- },
+ expect(testNode.childNodes[0]).toContainText('first childhidden child');
+ });
- 'Should call an afterMove callback function and not cause updates if an observable accessed in the callback is changed': function () {
+ it('Should call an afterMove callback function and not cause updates if an observable accessed in the callback is changed', function () {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, afterMove: callback }'><span data-bind='text: childprop'></span></div>";
var callbackObservable = ko.observable(1),
someItems = ko.observableArray([{ childprop: 'first child' }]),
callbacks = 0;
ko.applyBindings({ someItems: someItems, callback: function() { callbackObservable(); callbacks++; } }, testNode);
someItems.splice(0, 0, { childprop: 'added child'});
- value_of(callbacks).should_be(1);
+ expect(callbacks).toEqual(1);
// Change the array, but don't update the observableArray so that the foreach binding isn't updated
someItems().push({ childprop: 'hidden child'});
- value_of(testNode.childNodes[0]).should_contain_text('added childfirst child');
+ expect(testNode.childNodes[0]).toContainText('added childfirst child');
// Update callback observable and check that the binding wasn't updated
callbackObservable(2);
- value_of(testNode.childNodes[0]).should_contain_text('added childfirst child');
+ expect(testNode.childNodes[0]).toContainText('added childfirst child');
// Update the observableArray and verify that the binding is now updated
someItems.valueHasMutated();
- value_of(testNode.childNodes[0]).should_contain_text('added childfirst childhidden child');
- },
+ expect(testNode.childNodes[0]).toContainText('added childfirst childhidden child');
+ });
- 'Should call an beforeMove callback function and not cause updates if an observable accessed in the callback is changed': function () {
+ it('Should call an beforeMove callback function and not cause updates if an observable accessed in the callback is changed', function () {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, beforeMove: callback }'><span data-bind='text: childprop'></span></div>";
var callbackObservable = ko.observable(1),
someItems = ko.observableArray([{ childprop: 'first child' }]),
callbacks = 0;
ko.applyBindings({ someItems: someItems, callback: function() { callbackObservable(); callbacks++; } }, testNode);
someItems.splice(0, 0, { childprop: 'added child'});
- value_of(callbacks).should_be(1);
+ expect(callbacks).toEqual(1);
// Change the array, but don't update the observableArray so that the foreach binding isn't updated
someItems().push({ childprop: 'hidden child'});
- value_of(testNode.childNodes[0]).should_contain_text('added childfirst child');
+ expect(testNode.childNodes[0]).toContainText('added childfirst child');
// Update callback observable and check that the binding wasn't updated
callbackObservable(2);
- value_of(testNode.childNodes[0]).should_contain_text('added childfirst child');
+ expect(testNode.childNodes[0]).toContainText('added childfirst child');
// Update the observableArray and verify that the binding is now updated
someItems.valueHasMutated();
- value_of(testNode.childNodes[0]).should_contain_text('added childfirst childhidden child');
- },
+ expect(testNode.childNodes[0]).toContainText('added childfirst childhidden child');
+ });
- 'Should not double-unwrap the given value': function() {
+ it('Should not double-unwrap the given value', function() {
// Previously an observable value was doubly-unwrapped: in the foreach handler and then in the template handler.
// This is now fixed so that the value is unwrapped just in the template handler and only peeked at in the foreach handler.
// See https://github.com/SteveSanderson/knockout/issues/523
@@ -282,10 +282,10 @@ describe('Binding: Foreach', {
var myArrayWrapped = ko.observable(ko.observableArray(['data value']));
ko.applyBindings({ myArray: myArrayWrapped }, testNode);
// Because the unwrapped value isn't an array, nothing gets rendered.
- value_of(testNode.childNodes[0]).should_contain_text('');
- },
+ expect(testNode.childNodes[0]).toContainText('');
+ });
- 'Should be able to nest foreaches and access binding contexts both during and after binding': function() {
+ it('Should be able to nest foreaches and access binding contexts both during and after binding', function() {
testNode.innerHTML = "<div data-bind='foreach: items'>"
+ "<div data-bind='foreach: children'>"
+ "(Val: <span data-bind='text: $data'></span>, Parents: <span data-bind='text: $parents.length'></span>, Rootval: <span data-bind='text: $root.rootVal'></span>)"
@@ -301,33 +301,33 @@ describe('Binding: Foreach', {
ko.applyBindings(viewModel, testNode);
// Verify we can access binding contexts during binding
- value_of(testNode.childNodes[0].childNodes[0]).should_contain_text("(Val: A1, Parents: 2, Rootval: ROOTVAL)(Val: A2, Parents: 2, Rootval: ROOTVAL)(Val: A3, Parents: 2, Rootval: ROOTVAL)");
- value_of(testNode.childNodes[0].childNodes[1]).should_contain_text("(Val: B1, Parents: 2, Rootval: ROOTVAL)(Val: B2, Parents: 2, Rootval: ROOTVAL)");
+ expect(testNode.childNodes[0].childNodes[0]).toContainText("(Val: A1, Parents: 2, Rootval: ROOTVAL)(Val: A2, Parents: 2, Rootval: ROOTVAL)(Val: A3, Parents: 2, Rootval: ROOTVAL)");
+ expect(testNode.childNodes[0].childNodes[1]).toContainText("(Val: B1, Parents: 2, Rootval: ROOTVAL)(Val: B2, Parents: 2, Rootval: ROOTVAL)");
// Verify we can access them later
var firstInnerTextNode = testNode.childNodes[0].childNodes[0].childNodes[1];
- value_of(firstInnerTextNode.nodeType).should_be(1); // The first span associated with A1
- value_of(ko.dataFor(firstInnerTextNode)).should_be("A1");
- value_of(ko.contextFor(firstInnerTextNode).$parent.children()[2]).should_be("A3");
- value_of(ko.contextFor(firstInnerTextNode).$parents[1].items()[1].children()[1]).should_be("B2");
- value_of(ko.contextFor(firstInnerTextNode).$root.rootVal).should_be("ROOTVAL");
- },
-
- 'Should be able to define a \'foreach\' region using a containerless template': function() {
+ expect(firstInnerTextNode.nodeType).toEqual(1); // The first span associated with A1
+ expect(ko.dataFor(firstInnerTextNode)).toEqual("A1");
+ expect(ko.contextFor(firstInnerTextNode).$parent.children()[2]).toEqual("A3");
+ expect(ko.contextFor(firstInnerTextNode).$parents[1].items()[1].children()[1]).toEqual("B2");
+ expect(ko.contextFor(firstInnerTextNode).$root.rootVal).toEqual("ROOTVAL");
+ });
+
+ it('Should be able to define a \'foreach\' region using a containerless template', function() {
testNode.innerHTML = "hi <!-- ko foreach: someitems --><span data-bind='text: childprop'></span><!-- /ko -->";
var someitems = [
{ childprop: 'first child' },
{ childprop: 'second child' }
];
ko.applyBindings({ someitems: someitems }, testNode);
- value_of(testNode).should_contain_html('hi <!-- ko foreach: someitems --><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span><!-- /ko -->');
+ expect(testNode).toContainHtml('hi <!-- ko foreach: someitems --><span data-bind="text: childprop">first child</span><span data-bind="text: childprop">second child</span><!-- /ko -->');
// Check we can recover the binding contexts
- value_of(ko.dataFor(testNode.childNodes[3]).childprop).should_be("second child");
- value_of(ko.contextFor(testNode.childNodes[3]).$parent.someitems.length).should_be(2);
- },
+ expect(ko.dataFor(testNode.childNodes[3]).childprop).toEqual("second child");
+ expect(ko.contextFor(testNode.childNodes[3]).$parent.someitems.length).toEqual(2);
+ });
- 'Should be able to nest \'foreach\' regions defined using containerless templates' : function() {
+ it('Should be able to nest \'foreach\' regions defined using containerless templates', function() {
var innerContents = document.createElement("DIV");
testNode.innerHTML = "";
testNode.appendChild(document.createComment("ko foreach: items"));
@@ -348,18 +348,18 @@ describe('Binding: Foreach', {
ko.applyBindings(viewModel, testNode);
// Verify we can access binding contexts during binding
- value_of(testNode).should_contain_text("(Val: A1, Parents: 2, Rootval: ROOTVAL)(Val: A2, Parents: 2, Rootval: ROOTVAL)(Val: A3, Parents: 2, Rootval: ROOTVAL)(Val: B1, Parents: 2, Rootval: ROOTVAL)(Val: B2, Parents: 2, Rootval: ROOTVAL)");
+ expect(testNode).toContainText("(Val: A1, Parents: 2, Rootval: ROOTVAL)(Val: A2, Parents: 2, Rootval: ROOTVAL)(Val: A3, Parents: 2, Rootval: ROOTVAL)(Val: B1, Parents: 2, Rootval: ROOTVAL)(Val: B2, Parents: 2, Rootval: ROOTVAL)");
// Verify we can access them later
var firstInnerSpan = testNode.childNodes[3];
- value_of(firstInnerSpan).should_contain_text("A1"); // It is the first span bound in the context of A1
- value_of(ko.dataFor(firstInnerSpan)).should_be("A1");
- value_of(ko.contextFor(firstInnerSpan).$parent.children()[2]).should_be("A3");
- value_of(ko.contextFor(firstInnerSpan).$parents[1].items()[1].children()[1]).should_be("B2");
- value_of(ko.contextFor(firstInnerSpan).$root.rootVal).should_be("ROOTVAL");
- },
-
- 'Should be able to nest \'if\' inside \'foreach\' defined using containerless templates' : function() {
+ expect(firstInnerSpan).toContainText("A1"); // It is the first span bound in the context of A1
+ expect(ko.dataFor(firstInnerSpan)).toEqual("A1");
+ expect(ko.contextFor(firstInnerSpan).$parent.children()[2]).toEqual("A3");
+ expect(ko.contextFor(firstInnerSpan).$parents[1].items()[1].children()[1]).toEqual("B2");
+ expect(ko.contextFor(firstInnerSpan).$root.rootVal).toEqual("ROOTVAL");
+ });
+
+ it('Should be able to nest \'if\' inside \'foreach\' defined using containerless templates', function() {
testNode.innerHTML = "<ul></ul>";
testNode.childNodes[0].appendChild(document.createComment("ko foreach: items"));
testNode.childNodes[0].appendChild(document.createElement("li"));
@@ -377,7 +377,7 @@ describe('Binding: Foreach', {
};
ko.applyBindings(viewModel, testNode);
- value_of(testNode).should_contain_html('<ul>'
+ expect(testNode).toContainHtml('<ul>'
+ '<!--ko foreach: items-->'
+ '<li>'
+ '<!--ko if: childval-->'
@@ -395,9 +395,9 @@ describe('Binding: Foreach', {
+ '</li>'
+ '<!--/ko-->'
+ '</ul>');
- },
+ });
- 'Should be able to use containerless templates directly inside UL elements even when closing LI tags are omitted' : function() {
+ it('Should be able to use containerless templates directly inside UL elements even when closing LI tags are omitted', function() {
// Represents issue https://github.com/SteveSanderson/knockout/issues/155
// Certain closing tags, including </li> are optional (http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission)
// Most browsers respect your positioning of closing </li> tags, but IE <= 7 doesn't, and treats your markup
@@ -414,14 +414,14 @@ describe('Binding: Foreach', {
// Either of the following two results are acceptable.
try {
// Modern browsers implicitly re-add the closing </li> tags
- value_of(testNode).should_contain_html('<ul><li>header item</li><!-- ko foreach: someitems --><li data-bind="text: $data">alpha</li><li data-bind="text: $data">beta</li><!-- /ko --></ul>');
+ expect(testNode).toContainHtml('<ul><li>header item</li><!-- ko foreach: someitems --><li data-bind="text: $data">alpha</li><li data-bind="text: $data">beta</li><!-- /ko --></ul>');
} catch(ex) {
// ... but IE < 8 doesn't add ones that immediately precede a <li>
- value_of(testNode).should_contain_html('<ul><li>header item</li><!-- ko foreach: someitems --><li data-bind="text: $data">alpha<li data-bind="text: $data">beta</li><!-- /ko --></ul>');
+ expect(testNode).toContainHtml('<ul><li>header item</li><!-- ko foreach: someitems --><li data-bind="text: $data">alpha<li data-bind="text: $data">beta</li><!-- /ko --></ul>');
}
- },
+ });
- 'Should be able to nest containerless templates directly inside UL elements, even on IE < 8 with its bizarre HTML parsing/formatting' : function() {
+ it('Should be able to nest containerless templates directly inside UL elements, even on IE < 8 with its bizarre HTML parsing/formatting', function() {
// Represents https://github.com/SteveSanderson/knockout/issues/212
// This test starts with the following DOM structure:
// <ul>
@@ -448,17 +448,17 @@ describe('Binding: Foreach', {
testNode.firstChild.lastChild.appendChild(document.createComment("/ko"));
ko.applyBindings(null, testNode);
- value_of(testNode).should_contain_text("B");
- },
+ expect(testNode).toContainText("B");
+ });
- 'Should be able to give an alias to $data using \"as\"': function() {
+ it('Should be able to give an alias to $data using \"as\"', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, as: \"item\" }'><span data-bind='text: item'></span></div>";
var someItems = ['alpha', 'beta'];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_html('<span data-bind="text: item">alpha</span><span data-bind="text: item">beta</span>');
- },
+ expect(testNode.childNodes[0]).toContainHtml('<span data-bind="text: item">alpha</span><span data-bind="text: item">beta</span>');
+ });
- 'Should be able to give an alias to $data using \"as\", and use it within a nested loop': function() {
+ it('Should be able to give an alias to $data using \"as\", and use it within a nested loop', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, as: \"item\" }'>"
+ "<span data-bind='foreach: sub'>"
+ "<span data-bind='text: item.name+\":\"+$data'></span>,"
@@ -466,10 +466,10 @@ describe('Binding: Foreach', {
+ "</div>";
var someItems = [{ name: 'alpha', sub: ['a', 'b'] }, { name: 'beta', sub: ['c'] }];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_text('alpha:a,alpha:b,beta:c,');
- },
+ expect(testNode.childNodes[0]).toContainText('alpha:a,alpha:b,beta:c,');
+ });
- 'Should be able to set up multiple nested levels of aliases using \"as\"': function() {
+ it('Should be able to set up multiple nested levels of aliases using \"as\"', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, as: \"item\" }'>"
+ "<span data-bind='foreach: { data: sub, as: \"subvalue\" }'>"
+ "<span data-bind='text: item.name+\":\"+subvalue'></span>,"
@@ -477,40 +477,40 @@ describe('Binding: Foreach', {
+ "</div>";
var someItems = [{ name: 'alpha', sub: ['a', 'b'] }, { name: 'beta', sub: ['c','d'] }];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_text('alpha:a,alpha:b,beta:c,beta:d,');
- },
+ expect(testNode.childNodes[0]).toContainText('alpha:a,alpha:b,beta:c,beta:d,');
+ });
- 'Should be able to give an alias to $data using \"as\", and use it within arbitrary descendant binding contexts': function() {
+ it('Should be able to give an alias to $data using \"as\", and use it within arbitrary descendant binding contexts', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, as: \"item\" }'><span data-bind='if: item.length'><span data-bind='text: item'></span>,</span></div>";
var someItems = ['alpha', 'beta'];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_text('alpha,beta,');
- },
+ expect(testNode.childNodes[0]).toContainText('alpha,beta,');
+ });
- 'Should be able to give an alias to $data using \"as\", and use it within descendant binding contexts defined using containerless syntax': function() {
+ it('Should be able to give an alias to $data using \"as\", and use it within descendant binding contexts defined using containerless syntax', function() {
testNode.innerHTML = "<div data-bind='foreach: { data: someItems, as: \"item\" }'>x<!-- ko if: item.length --><span data-bind='text: item'></span>x,<!-- /ko --></div>";
var someItems = ['alpha', 'beta'];
ko.applyBindings({ someItems: someItems }, testNode);
- value_of(testNode.childNodes[0]).should_contain_text('xalphax,xbetax,');
- },
+ expect(testNode.childNodes[0]).toContainText('xalphax,xbetax,');
+ });
- 'Should be able to output HTML5 elements (even on IE<9, as long as you reference either innershiv.js or jQuery1.7+Modernizr)': function() {
+ it('Should be able to output HTML5 elements (even on IE<9, as long as you reference either innershiv.js or jQuery1.7+Modernizr)', function() {
// Represents https://github.com/SteveSanderson/knockout/issues/194
ko.utils.setHtml(testNode, "<div data-bind='foreach:someitems'><section data-bind='text: $data'></section></div>");
var viewModel = {
someitems: [ 'Alpha', 'Beta' ]
};
ko.applyBindings(viewModel, testNode);
- value_of(testNode).should_contain_html('<div data-bind="foreach:someitems"><section data-bind="text: $data">alpha</section><section data-bind="text: $data">beta</section></div>');
- },
+ expect(testNode).toContainHtml('<div data-bind="foreach:someitems"><section data-bind="text: $data">alpha</section><section data-bind="text: $data">beta</section></div>');
+ });
- 'Should be able to output HTML5 elements within container-less templates (same as above)': function() {
+ it('Should be able to output HTML5 elements within container-less templates (same as above)', function() {
// Represents https://github.com/SteveSanderson/knockout/issues/194
ko.utils.setHtml(testNode, "xxx<!-- ko foreach:someitems --><div><section data-bind='text: $data'></section></div><!-- /ko -->");
var viewModel = {
someitems: [ 'Alpha', 'Beta' ]
};
ko.applyBindings(viewModel, testNode);
- value_of(testNode).should_contain_html('xxx<!-- ko foreach:someitems --><div><section data-bind="text: $data">alpha</section></div><div><section data-bind="text: $data">beta</section></div><!-- /ko -->');
- }
+ expect(testNode).toContainHtml('xxx<!-- ko foreach:someitems --><div><section data-bind="text: $data">alpha</section></div><div><section data-bind="text: $data">beta</section></div><!-- /ko -->');
+ });
});
View
30 spec/defaultBindings/hasfocusBehaviors.js
@@ -1,7 +1,7 @@
-describe('Binding: Hasfocus', {
- before_each: JSSpec.prepareTestNode,
+describe('Binding: Hasfocus', function() {
+ beforeEach(jasmine.prepareTestNode);
- 'Should respond to changes on an observable value by blurring or focusing the element': function() {
+ it('Should respond to changes on an observable value by blurring or focusing the element', function() {
var currentState;
var model = { myVal: ko.observable() }
testNode.innerHTML = "<input data-bind='hasfocus: myVal' /><input />";
@@ -11,14 +11,14 @@ describe('Binding: Hasfocus', {
// When the value becomes true, we focus
model.myVal(true);
- value_of(currentState).should_be(true);
+ expect(currentState).toEqual(true);
// When the value becomes false, we blur
model.myVal(false);
- value_of(currentState).should_be(false);
- },
+ expect(currentState).toEqual(false);
+ });
- 'Should set an observable value to be true on focus and false on blur': function() {
+ it('Should set an observable value to be true on focus and false on blur', function() {
var model = { myVal: ko.observable() }
testNode.innerHTML = "<input data-bind='hasfocus: myVal' /><input />";
ko.applyBindings(model, testNode);
@@ -28,33 +28,33 @@ describe('Binding: Hasfocus', {
testNode.childNodes[0].focus();
ko.utils.triggerEvent(testNode.childNodes[0], "focusin");
- value_of(model.myVal()).should_be(true);
+ expect(model.myVal()).toEqual(true);