JSFiddle - React, Tailwind, and code Playground

Lodash test suite

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/store.js/1.3.20/store.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<h1><button id="test-all">Test all</button>Performance tests for lodash</h1>
<div id="suite"></div>

<script type="text/html" id="template-test">
<div class="test" data-name="{{name}}">
  <h2><button>Run test</button>{{name}}</h2>
  <p>{{description}}</p>
  <div class="results">
  	{{#unless results.length}}
    	<p>No results</p>
    {{else}}
    	<table>
      	<thead>
        	<tr>
          	<th>Size</th>
            <th>Time (ms)</th>
          </tr>
        </thead>
        <tbody>
        	{{#each results}}
            <tr>
            	<td>{{numeralFormat size}}</td>
              <td>{{numeralFormat duration}}</td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    {{/unless}}
  </div>
</div>
</script>

CSS

button {
  float: right;
}

h1 {
  border-bottom: 2px solid;
}

h2 {
  border-bottom: 1px solid;
}

.results {
  padding: 10px;
  background: yellow;
}

#test-all {
  float: right;
}

JavaScript

var defaultTestScale = [50000, 100000];
var AVERAGE_SIZE = 3;
var TEST_SUITE_STORAGE = 'lodashTestResults';

function getResults(name) {
	// store.js from https://github.com/marcuswestin/store.js/
  // is used to allow testing in all browsers and rendering engines
	return store.get(`${TEST_SUITE_STORAGE}.${name}`) || [];
}

function setResults(name, results) {
	store.set(`${TEST_SUITE_STORAGE}.${name}`, results);
}

function runTest(name) {
	var test = _.find(testSuite, { name });
  
  if (!test || typeof window[name] !== 'function') {
  	console.warn(`Test "${name}" not found`);
	  return;
  }

  try {
    var results = _.map(defaultTestScale, function (size) {
    	var durations = _.times(AVERAGE_SIZE, function () {
        var start = new Date().getTime();

        _.times(size, function () {
          window[name]();
        });
      
      	return new Date().getTime() - start;
      });

      return {
        size,
        duration: _.sum(durations)/AVERAGE_SIZE
      };
    });

    setResults(name, results);
  } catch (e) {
    console.error(`Error for test "${name}"`, e);
  }  
}

function runTestSuite() {
	$('.test[data-name] .results').html('Waiting...');
  setTimeout(function () {
    _.forEach(testSuite, function (test) {
      runTest(test.name);
      updateTest(test.name);
    });    
  }, 100);
}

function registerHelpers() {
	Handlebars.registerHelper('numeralFormat', function (context) {
  	return numeral(context).format('0,0');
  });
}

function attachListeners() {
	$('#suite').on('click', '.test button', function () {
	  var $testContainer = $(this).parents('.test');
	  var name = $testContainer.data('name');
    
		$testContainer.find('.results').html('Running...');
    setTimeout(function () {
      runTest(name);
      updateTest(name);    
    }, 100);
  });
  
  $('#test-all').on('click', function () {
  	runTestSuite();
  });
}

function loadTestSuite() {
	var src = $('#template-test').html();
  var tpl = Handlebars.compile(src);
  var...