From 10b09dfc8a05373ba600dd4ed1e80c401cadeed3 Mon Sep 17 00:00:00 2001
From: Jason Bedard <jason+github@jbedard.ca>
Date: Thu, 4 Sep 2014 22:11:30 -0700
Subject: [PATCH] test($parse): adding benchmark for execution of $parse()ed
 expressions

Part of #8901
---
 benchmarks/parsed-expressions-bp/app.js     |  86 +++++++++
 benchmarks/parsed-expressions-bp/bp.conf.js |  11 ++
 benchmarks/parsed-expressions-bp/main.html  | 190 ++++++++++++++++++++
 3 files changed, 287 insertions(+)
 create mode 100755 benchmarks/parsed-expressions-bp/app.js
 create mode 100755 benchmarks/parsed-expressions-bp/bp.conf.js
 create mode 100755 benchmarks/parsed-expressions-bp/main.html

diff --git a/benchmarks/parsed-expressions-bp/app.js b/benchmarks/parsed-expressions-bp/app.js
new file mode 100755
index 00000000..e8206fd9
--- /dev/null
+++ b/benchmarks/parsed-expressions-bp/app.js
@@ -0,0 +1,86 @@
+var app = angular.module('parsedExpressionBenchmark', []);
+
+app.config(function($compileProvider) {
+  if ($compileProvider.debugInfoEnabled) {
+    $compileProvider.debugInfoEnabled(false);
+  }
+});
+
+app.filter('noop', function() {
+  return function(input) {
+    return input;
+  };
+});
+
+//Executes the specified expression as a watcher
+app.directive('bmPeWatch', function() {
+  return {
+    restrict: 'A',
+    compile: function($element, $attrs) {
+      $element.text( $attrs.bmPeWatch );
+      return function($scope, $element, $attrs) {
+        $scope.$watch($attrs.bmPeWatch, function(val) {
+          $element.text(val);
+
+        });
+      };
+    }
+  };
+});
+
+//Executes the specified expression as a watcher
+//Adds a simple wrapper method to allow use of $watch instead of $watchCollection
+app.directive('bmPeWatchLiteral', function($parse) {
+  function retZero() {
+    return 0;
+  }
+
+  return {
+    restrict: 'A',
+    compile: function($element, $attrs) {
+      $element.text( $attrs.bmPeWatchLiteral );
+      return function($scope, $element, $attrs) {
+        $scope.$watch( $parse($attrs.bmPeWatchLiteral, retZero) );
+      };
+    }
+  };
+});
+
+app.controller('DataController', function($scope, $rootScope) {
+  var totalRows = 10000;
+
+  var data = $scope.data = [];
+
+  var star = '*';
+
+  $scope.func = function() { return star;};
+
+  for (var i=0; i<totalRows; i++) {
+    data.push({
+      index: i,
+      odd:   i%2 === 0,
+      even:  i%2 === 1,
+      str0: "foo-" + Math.random()*Date.now(),
+      str1: "bar-" + Math.random()*Date.now(),
+      str2: "baz-" + Math.random()*Date.now(),
+      num0:  Math.random()*Date.now(),
+      num1:  Math.random()*Date.now(),
+      num2:  Math.random()*Date.now(),
+      date0: new Date(Math.random()*Date.now()),
+      date1: new Date(Math.random()*Date.now()),
+      date2: new Date(Math.random()*Date.now()),
+      func: function(){ return star; },
+      obj: data[i-1],
+      keys: data[i-1] && (data[i-1].keys || Object.keys(data[i-1]))
+    });
+  }
+
+  benchmarkSteps.push({
+    name: '$apply',
+    fn: function() {
+      for (var i=0; i<50; i++) {
+        $rootScope.$digest();
+      }
+    }
+  });
+});
diff --git a/benchmarks/parsed-expressions-bp/bp.conf.js b/benchmarks/parsed-expressions-bp/bp.conf.js
new file mode 100755
index 00000000..bf543bb2
--- /dev/null
+++ b/benchmarks/parsed-expressions-bp/bp.conf.js
@@ -0,0 +1,11 @@
+module.exports = function(config) {
+  config.set({
+    scripts: [    {
+      id: 'angular',
+      src: '/build/angular.js'
+    },
+    {
+      src: 'app.js',
+    }]
+  });
+};
diff --git a/benchmarks/parsed-expressions-bp/main.html b/benchmarks/parsed-expressions-bp/main.html
new file mode 100755
index 00000000..ba45356f
--- /dev/null
+++ b/benchmarks/parsed-expressions-bp/main.html
@@ -0,0 +1,190 @@
+<div ng-app="parsedExpressionBenchmark" ng-cloak>
+  <div ng-controller="DataController">
+    <div class="container-fluid">
+      <p>
+        Tests the execution of $parse()ed expressions. Each test tries to isolate specific expression types. Expressions should (probably) not be constant so they get evaluated per digest.
+      </p>
+
+      <ul style="list-style:none">
+        <li>
+          <input type="radio" ng-model="expressionType" value="simpleProperty" id="simpleProperty">
+          <label for="simpleProperty">Simple Properties</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="fieldAccess" id="fieldAccess">
+          <label for="fieldAccess">Field Accessors</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="fieldIndex" id="fieldIndex">
+          <label for="fieldIndex">Field Indexors</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="operators" id="operators">
+          <label for="operators">Binary/Unary operators</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="filters" id="filters">
+          <label for="filters">Filters</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="functionCalls" id="functionCalls">
+          <label for="functionCalls">Function calls</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="objectLiterals" id="objectLiterals">
+          <label for="objectLiterals">Object Literals</label>
+        </li>
+
+        <li>
+          <input type="radio" ng-model="expressionType" value="arrayLiterals" id="arrayLiterals">
+          <label for="arrayLiterals">Array Literals</label>
+        </li>
+      </ul>
+
+      <!--
+        NOTES:
+          - ensure each tested expression has at least one variable in it to avoid constant expressions
+      -->
+
+      <ul ng-switch="expressionType">
+        <li ng-switch-when="simpleProperty" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch="rowIdx"></span>
+          <span bm-pe-watch="row.index"></span>
+          <span bm-pe-watch="row.num0"></span>
+          <span bm-pe-watch="row.num1"></span>
+          <span bm-pe-watch="row.num2"></span>
+          <span bm-pe-watch="row.str0"></span>
+          <span bm-pe-watch="row.str1"></span>
+          <span bm-pe-watch="row.str2"></span>
+          <span bm-pe-watch="row.date0"></span>
+          <span bm-pe-watch="row.obj"></span>
+          <span bm-pe-watch="row.keys"></span>
+        </li>
+
+        <li ng-switch-when="fieldAccess" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch="row.index"></span>
+          <span bm-pe-watch="row.num0"></span>
+          <span bm-pe-watch="row.num1"></span>
+          <span bm-pe-watch="row.str0"></span>
+          <span bm-pe-watch="row.str1"></span>
+          <span bm-pe-watch="row.obj.index"></span>
+          <span bm-pe-watch="row.obj.index"></span>
+          <span bm-pe-watch="row.obj.index"></span>
+          <span bm-pe-watch="row.obj.obj.index"></span>
+          <span bm-pe-watch="row.obj.obj.index"></span>
+          <span bm-pe-watch="row.obj.obj.obj.index"></span>
+          <span bm-pe-watch="row.obj.obj.obj.index"></span>
+        </li>
+
+        <li ng-switch-when="fieldIndex" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch="data[rowIdx]"></span>
+          <span bm-pe-watch="row['str0']"></span>
+          <span bm-pe-watch="row['str1']"></span>
+          <span bm-pe-watch="data[row['index']]['index']"></span>
+          <span bm-pe-watch="data[rowIdx]['obj']"></span>
+          <span bm-pe-watch="data[rowIdx]['obj']['obj']"></span>
+          <span bm-pe-watch="row[row['keys'][0]]"></span>
+          <span bm-pe-watch="row[row['keys'][1]]"></span>
+          <span bm-pe-watch="row[row['keys'][2]]"></span>
+          <span bm-pe-watch="row[row['keys'][3]]"></span>
+          <span bm-pe-watch="row[row['keys'][4]]"></span>
+          <span bm-pe-watch="row[row['keys'][5]]"></span>
+
+        </li>
+
+        <li ng-switch-when="operators" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch="+rowIdx"></span>
+          <span bm-pe-watch="-rowIdx"></span>
+          <span bm-pe-watch="rowIdx + 1"></span>
+          <span bm-pe-watch="rowIdx - 1"></span>
+          <span bm-pe-watch="rowIdx * 2"></span>
+          <span bm-pe-watch="rowIdx + -1"></span>
+          <span bm-pe-watch="rowIdx - -1"></span>
+          <span bm-pe-watch="-rowIdx * 2 + 1"></span>
+          <span bm-pe-watch="rowIdx % 2"></span>
+          <span bm-pe-watch="rowIdx % 2 === 1"></span>
+          <span bm-pe-watch="rowIdx % 2 === 0"></span>
+          <span bm-pe-watch="rowIdx / 1"></span>
+          <span bm-pe-watch="-rowIdx * 2 * rowIdx + rowIdx / rowIdx + 1"></span>
+        </li>
+
+        <li ng-switch-when="filters" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch="rowIdx | noop"></span>
+          <span bm-pe-watch="rowIdx | noop"></span>
+          <span bm-pe-watch="rowIdx | noop"></span>
+          <span bm-pe-watch="rowIdx | noop:1"></span>
+          <span bm-pe-watch="rowIdx | noop:rowIdx"></span>
+          <span bm-pe-watch="rowIdx | noop:1:2:3:4:5"></span>
+          <span bm-pe-watch="rowIdx | noop:rowIdx:rowIdx:rowIdx"></span>
+          <span bm-pe-watch="rowIdx | noop | noop"></span>
+          <span bm-pe-watch="rowIdx | noop:1 | noop"></span>
+          <span bm-pe-watch="rowIdx | noop | noop:null:undefined:0"></span>
+          <span bm-pe-watch="rowIdx | noop | noop | noop"></span>
+          <span bm-pe-watch="rowIdx | noop:1 | noop:2 | noop:3"></span>
+        </li>
+
+        <li ng-switch-when="functionCalls" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch="func()"></span>
+          <span bm-pe-watch="func(1)"></span>
+          <span bm-pe-watch="func(1, 2)"></span>
+          <span bm-pe-watch="func(1, 2, 3)"></span>
+          <span bm-pe-watch="row.func()"></span>
+          <span bm-pe-watch="row.func(1)"></span>
+          <span bm-pe-watch="row.func(1, 2)"></span>
+          <span bm-pe-watch="row.func(1, 2, 3)"></span>
+          <span bm-pe-watch="func(func())"></span>
+          <span bm-pe-watch="func(func(), func())"></span>
+          <span bm-pe-watch="row.func(row.func())"></span>
+          <span bm-pe-watch="row.func(row.func(), row.func())"></span>
+        </li>
+
+        <li ng-switch-when="objectLiterals" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch-literal="{foo: rowIdx}"></span>
+          <span bm-pe-watch-literal="{foo: row, bar: rowIdx}"></span>
+          <span bm-pe-watch-literal="{0: row, 1: rowIdx, 2: 3}"></span>
+          <span bm-pe-watch-literal="{str: 'foo', num: rowIdx, b: true}"></span>
+          <span bm-pe-watch-literal="{a: {b: {c: {d: {e: {f: rowIdx}}}}}}"></span>
+          <span bm-pe-watch-literal="{a: rowIdx, b: 1, c: 2, d: 3, e: 4, f: 5, g: rowIdx, h: 6, i: 7, j: 8, k: rowIdx}"></span>
+        </li>
+
+        <li ng-switch-when="arrayLiterals" ng-repeat="(rowIdx, row) in ::data">
+          <span bm-pe-watch-literal="[rowIdx]"></span>
+          <span bm-pe-watch-literal="[rowIdx, 0]"></span>
+          <span bm-pe-watch-literal="[rowIdx, 0, 1]"></span>
+          <span bm-pe-watch-literal="[rowIdx, 0, 1, 2]"></span>
+          <span bm-pe-watch-literal="[rowIdx, 0, 1, 2, 3]"></span>
+          <span bm-pe-watch-literal="[[], [rowIdx], [], [], [3], [[[]]]]"></span>
+          <span bm-pe-watch-literal="[rowIdx, undefined, null, true, false]"></span>
+          <span bm-pe-watch-literal="[[][0], [0][0], [][rowIdx]]"></span>
+          <span bm-pe-watch-literal="[0, rowIdx]"></span>
+          <span bm-pe-watch-literal="[0, 1, rowIdx]"></span>
+          <span bm-pe-watch-literal="[0, 1, 2, rowIdx]"></span>
+          <span bm-pe-watch-literal="[0, 1, 2, 3, rowIdx]"></span>
+        </li>
+
+        <!--
+        <li ng-switch-when="" ng-repeat="(rowIdx, row) in data">
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+          <span bm-pe-watch=""></span>
+        </li>
+        -->
+      </ul>
+    </div>
+  </div>
+</div>