Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <script src ="http://code.jquery.com/jquery-1.7.2.min.js" >
</script >
<script src ="http://code.angularjs.org/angular-1.0.1.min.js" >
</script >
<script src ="
http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js" >
</script >
<script >
var Ctrl = function ($scope ) {
$scope.data = "" ;
$scope.numberofChanges1 = 0 ;
$scope.numberofChanges2 = 0 ;
$scope.numberofChanges3 = 0 ;
$scope.numberofChanges4 = 0 ;
$scope.numberofChanges5 = 0 ;
$scope.numberofChanges6 = 0 ;
$scope.numberofChanges7 = 0 ;
$scope.numberofChanges8 = 0 ;
$scope.numberofChanges9 = 0 ;
$scope.numberofChanges10 = 0 ;
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges1 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges2 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges3 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges4 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges5 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges6 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges7 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges8 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges9 ++;
});
$scope.$watch('data' , function (a,b,c ){
$scope.numberofChanges10 ++;
});
}
angular.element (document ).ready (function ( ) {
var ang_scope = $('#angList' ).scope ();
ANGclear = function ( ) {
ang_scope.data = "OMGOMGOMG" ;
};
ANGpush = function ( ) {
ang_scope.data += "OMGOMGOMG" ;
ang_scope.$apply();
};
}); </script >
<script >
var KOData = ko.observable ("" );
var KOUpdates1 = ko.observable (0 );
var KOUpdates2 = ko.observable (0 );
var KOUpdates3 = ko.observable (0 );
var KOUpdates4 = ko.observable (0 );
var KOUpdates5 = ko.observable (0 );
var KOUpdates6 = ko.observable (0 );
var KOUpdates7 = ko.observable (0 );
var KOUpdates8 = ko.observable (0 );
var KOUpdates9 = ko.observable (0 );
var KOUpdates10 = ko.observable (0 );
KOData.subscribe (function ( ){
KOUpdates1 (KOUpdates1 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates2 (KOUpdates2 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates3 (KOUpdates3 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates4 (KOUpdates4 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates5 (KOUpdates5 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates6 (KOUpdates6 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates7 (KOUpdates7 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates8 (KOUpdates8 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates9 (KOUpdates9 () + 1 );
});
KOData.subscribe (function ( ){
KOUpdates10 (KOUpdates10 () + 1 );
});
var KOviewmodel = {data : KOData, updates1 : KOUpdates1, updates2 : KOUpdates2, updates3 : KOUpdates3, updates4 : KOUpdates4, updates5 : KOUpdates5, updates6 : KOUpdates6, updates7 : KOUpdates7, updates8 : KOUpdates8, updates9 : KOUpdates9, updates10 : KOUpdates10};
ko.applyBindings (KOviewmodel, document .getElementById ('koapp' ));
var KOclear = function ( ){
KOData ("" );
};
var KOpush = function ( ){
var old = KOData ()
KOData (old += "OMGOMGOMG" );
};
</script >
<div style ="width: 200px; height: 300px; overflow: hidden" ng-app >
Angular:
<span ng-controller ="Ctrl" id ="angList" >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
<span > {{numberofChanges1}}</span >
<span > {{numberofChanges2}}</span >
<span > {{numberofChanges3}}</span >
<span > {{numberofChanges4}}</span >
<span > {{numberofChanges5}}</span >
<span > {{numberofChanges6}}</span >
<span > {{numberofChanges7}}</span >
<span > {{numberofChanges8}}</span >
<span > {{numberofChanges9}}</span >
<span > {{numberofChanges10}}</span >
AngularTestArea Data: {{data}}
</span >
</div >
<div style ="width: 200px; height: 300px; overflow: hidden" id ="koapp" >
Knockout:
<span >
KnockoutTestArea Subscriber Updates: <span data-bind ="text: data" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates1" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates2" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates3" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates4" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates5" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates6" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates7" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates8" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates9" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
<span data-bind ="text: updates10" > </span >
</span >
</div >
Setup JS
Teardown JS
Test cases
Test #1 Title *
Async
Code * ANGclear ();
for (var i = 0 ; i < 10 ; i++) {
ANGpush ();
}
Test #2 Title *
Async
Code * KOclear ();
for (var i = 0 ; i < 10 ; i++) {
KOpush ();
}
Title *
Async
Code * ANGclear ();
for (var i = 0 ; i < 100 ; i++) {
ANGpush ();
}
Title *
Async
Code * KOclear ();
for (var i = 0 ; i < 100 ; i++) {
KOpush ();
}
Title *
Async
Code * ANGclear ();
for (var i = 0 ; i < 500 ; i++) {
ANGpush ();
}
Title *
Async
Code * KOclear ();
for (var i = 0 ; i < 500 ; i++) {
KOpush ();
}
Title *
Async
Code * ANGclear ();
for (var i = 0 ; i < 1000 ; i++) {
ANGpush ();
}
Title *
Async
Code * KOclear ();
for (var i = 0 ; i < 1000 ; i++) {
KOpush ();
}