Angular: Random Test Report

http://angularjs.org/

by sberube

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div ng-controller="MyCtrl">

  <div>
    <h3>
      Chrome Results: {{getBrowserResults('chrome')}}
    </h3>
    <h3>
      Firefox Results: {{getBrowserResults('firefox')}}
    </h3>

    <h3>
      IE Results: {{getBrowserResults('ie')}}
    </h3>
  </div>

  <table class="table">
    <tr>
      <th>Build</th>
      <th>Overall Browser Randomization</th>
      <th>Test Browser Randomization (Distribution)</th>
    </tr>
    <tbody>
      <tr ng-repeat="item in buildReport">
        <td>
          {{$index}}
        </td>
        <td>
          {{item.browser}}
        </td>
        <td>
      Chrome Results: {{getTestResults(item.testReports, 'chrome')}}
      Firefox Results: {{getTestResults(item.testReports, 'firefox')}}
      IE Results: {{getTestResults(item.testReports, 'ie')}}
        </td>
      </tr>


    </tbody>
  </table>
  
  <h3>
   Test Report
  </h3>
  
  <table class="table">
    <tr>
      <th>Test</th>
      <th>Browser Distribution for overall test number after {{numberOfBuilds}} builds</th>
    </tr>
    <tbody>
      <tr ng-repeat="item in testReports">
        <td>
          {{$index}}
        </td>
        <td>
      Chrome Results: {{getTestReportResults(item, 'chrome')}}
      Firefox Results: {{getTestReportResults(item, 'firefox')}}
      IE Results: {{getTestReportResults(item, 'ie')}}
        </td>
      </tr>


    </tbody>
  </table>
</div>

CSS

.list {
  border: 1px solid #cccccc;
  height: 300px;
  overflow: auto;
}

.children {
  padding-left: 20px;
}

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {


  $scope.numberOfBuilds = 60;
  var numberOfTests = 200;
  var browsers = ['chrome', 'ie', 'firefox'];
  $scope.buildReport = [];
  $scope.testReports = {};
  var testReport = {};

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  for (var i = 0; i < $scope.numberOfBuilds; i++) {
    // Selecting random browser for this build
    var result = {};
    result.browser = browsers[getRandomInt(0, browsers.length - 1)];
    result.testReports = [];
    for (var j = 0; j < numberOfTests; j++) {
      // Selecting Random Browser for this test
      var testReport = {};
      if (angular.isUndefined($scope.testReports[j])) {
	      $scope.testReports[j] = [];
      }
      testReport.browser = browsers[getRandomInt(0, browsers.length - 1)];
      $scope.testReports[j].push(testReport.browser);
      result.testReports.push(testReport);
    }
    $scope.buildReport.push(result);
  }

  $scope.getBrowserResults = function(browser) {
    if ($scope.buildReport.length === 0) {
      return 0;
    }

    var matches = 0;
    $scope.buildReport.forEach(function(item) {
      if (item.browser === browser) {
        matches++;
      }
    });
    return Math.round((matches / $scope.buildReport.length) * 100) + '%';
  };
  
  $scope.getTestResults = function(testArray, browser) {
    if (testArray.length === 0) {
      return 0;
    }

    var matches = 0;
    testArray.forEach(function(item) {
      if (item.browser === browser) {
        matches++;
      }
    });
    return Math.round((matches / testArray.length) * 100) + '%';
  };
  
   $scope.getTestReportResults = function(testArray, browser) {
    if (testArray.length === 0) {
      return 0;
    }

    var matches = 0;
    testArray.forEach(function(item) {
      if (item === browser) {
...