Add test suite to project

scripts/test.js

@@ -0,0 +1,23 @@
+// For any third party dependencies, like jQuery, place them in the lib folder.
+
+// Configure loading modules from the lib directory,
+// except for 'app' ones, which are in a sibling
+// directory.
+requirejs.config({
+    enforceDefine: true,
+    baseUrl: 'scripts/lib',
+    paths: {
+        chai: 'chai',
+        jquery: 'https://code.jquery.com/jquery-3.2.1.slim.min',
+        lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min',
+        seedRandom: 'https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min',
+    },
+});
+
+define(function() {
+    // Start loading the main app file. Put all of
+    // your application logic in there.
+    requirejs([
+        'scripts/test/util-find-get-param-test.js',
+    ]);
+});

scripts/test/test-wrapper.js

@@ -0,0 +1,132 @@
+define([
+        'jquery',
+        'lodash',
+        '../util/find-get-param.js',
+    ], function($, _, FindGetParam) {
+    var testWrapper = function() {
+        this.currentTest = '';
+        this.startTime = 0;
+        this.testQuantity = 0;
+        this.testFailed = 0;
+        this.testSucceed = 0;
+        this.testTotalTime = 0;
+        this.$resultContainer = $('.TestResultsArea');
+        this.$testReportContainer = $('.TestReport');
+        this.$testQuantity = this.$testReportContainer.find('.tests-quantity');
+        this.$testSuceedQuantity =
+            this.$testReportContainer.find('.tests-succeed-quantity');
+        this.$testFailedQuantity =
+            this.$testReportContainer.find('.tests-failed-quantity');
+        this.$testTimer =
+            this.$testReportContainer.find('.tests-time');
+
+        this.grepSearch = FindGetParam('grep');
+        this.failOnly = !!$.parseJSON(FindGetParam('failOnly'));
+
+        this.execTest = function(mainName, testName, testFn) {
+            var myself = this;
+            var validTest = true;
+
+            if (this.grepSearch) {
+                validTest = _.includes(mainName, this.grepSearch)
+                    || _.includes(testName, this.grepSearch);
+            }
+
+            if (!validTest) {
+                return;
+            }
+
+            setTimeout(function() {
+                var startTime = new Date();
+                var succeed = null;
+                var errorMsg = null;
+                try {
+                    testFn();
+                    succeed = true;
+                } catch (error) {
+                    succeed = false;
+                    errorMsg = error;
+                }
+                var timeSpent = new Date() - startTime;
+
+                if ((myself.failOnly && !succeed) || !myself.failOnly) {
+                    myself.testQuantity++;
+                    myself.testTotalTime += timeSpent;
+                    console[succeed ? 'log' : 'error']('Test #' + myself.testQuantity
+                        + ' "' + mainName + ' | ' + testName + '" took ' + timeSpent + 'ms to ' +
+                        (succeed ? 'SUCCEED' : 'FAILED')
+                        + '.');
+                    if (!succeed) {
+                        console.error(errorMsg);
+                        $('.action-button-failOnly').removeAttr('disabled');
+                    }
+                    myself.updateCounters(succeed);
+                    myself.renderTest(succeed, mainName, testName, timeSpent, errorMsg);
+                }
+            }, 0);
+        }
+
+        this.updateCounters = function(succeed) {
+            if (succeed) {
+                this.testSucceed++;
+            } else {
+                this.testFailed++;
+            }
+
+            this.$testQuantity.text(this.testQuantity);
+            this.$testSuceedQuantity.text(this.testSucceed);
+            this.$testFailedQuantity.text(this.testFailed);
+            this.$testTimer.text(this.testTotalTime);
+        }
+
+        this.createTestClass = function(mainName) {
+            return 'testBlock-' + _.replace(mainName, ' ', '_');
+        }
+
+        this.getTestContainer = function(mainName) {
+            var className = this.createTestClass(mainName);
+            var $container = this.$resultContainer.find('.' + className);
+
+            if (!$container.length) {
+                $container = $('<div>',{
+                    class: className,
+                });
+                $ul = $('<ul>');
+                $title = $('<h3>', {
+                    text: mainName,
+                });
+                $container.append($title);
+                $container.append($ul);
+                this.$resultContainer.append($container);
+            }
+
+            return $container.find('ul');
+        }
+
+        this.renderTest = function(succeed, mainName, name, time, errorMsg) {
+            var $container = this.getTestContainer(mainName);
+            var $result = $('<li/>', {
+                class: 'mdl-list__item',
+            });
+            var iconName = succeed ? 'done' : 'close';
+            var checked = succeed ? 'checked' : '';
+            var secondaryBlock = succeed ? `${time} ms` : errorMsg;
+            var iconClass = succeed ? 'icon-succeed' : 'icon-failed';
+            var $testStatus = $(`
+                <span class="mdl-list__item-primary-content">
+                    <i class="material-icons mdl-list__item-avatar ${iconClass}">
+                        ${iconName}
+                    </i>
+                    ${name}
+                </span>
+                <span class="mdl-list__item-secondary-action">
+                    ${secondaryBlock}
+                </span>`
+            );
+            $result.append($testStatus);
+            $container.append($result);
+        }
+    };
+
+    return new testWrapper();
+});

scripts/test/util-find-get-param-test.js

@@ -0,0 +1,15 @@
+define(
+    ['chai', './test-wrapper.js', '../util/find-get-param.js'],
+    function(chai, testWrapper, FindGetParam) {
+        var expect = chai.expect;
+        var mainName = 'util-find-get-param';
+
+        testWrapper.execTest(mainName, 'should return correct GET values', function() {
+            expect(FindGetParam('url', '?url=test')).to.be.equal('test');
+        });
+
+        testWrapper.execTest(mainName, 'should return null when not present', function() {
+            expect(FindGetParam('something', '?url=test')).to.not.exists;
+        });
+    }
+);

scripts/util/find-get-param.js

@@ -0,0 +1,21 @@
+define(function() {
+    var findGetParameter = function(parameterName, url = null) {
+        var result = null;
+        var tmp = [];
+
+        var url = url ? url : location.search;
+
+        url
+            .substr(1)
+            .split("&")
+            .forEach(function (item) {
+                tmp = item.split("=");
+                if (tmp[0] === parameterName) {
+                    result = tmp[1] ? decodeURIComponent(tmp[1]) : true;
+                }
+            });
+        return result;
+    };
+
+    return findGetParameter;
+});

style/test.css

@@ -0,0 +1,52 @@
+.TestReport {
+    font-size: 20px;
+}
+
+.TestReport i {
+    font-size: 22px !important;
+    width: 22px !important;
+    height: 22px !important;
+}
+
+.icon-succeed {
+    background-color: green !important;
+}
+
+.icon-failed {
+    background-color: red !important;
+}
+
+.mdl-list__item-primary-content {
+    flex: 100%;
+}
+.is-hidden {
+    display: none;
+}
+
+.mdl-button.mdl-button--full {
+    width: 100%;
+}
+
+.mdl-grid.mdl-grid--bleed {
+    padding: 0;
+}
+
+.page-content {
+    padding-left: 32px;
+    padding-right: 32px;
+}
+
+.logger {
+    margin-top: 0;
+    transition: margin-top 0.2s;
+    position: absolute;
+    font-size: 8px;
+}
+.logger.shifted {
+    margin-top: 8px;
+    transition: margin-top 0s;
+}
+
+.mdl-textfield.is-focused .mdl-textfield__label:after {
+    background-color: rgb(66,66,66);
+}

test.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html>
+    <head>
+        <!-- META -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>TestSuite - TEST</title>
+
+        <!-- CSS -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_blue-orange.min.css" />
+        <link href="//fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300">
+
+        <link rel="stylesheet" href="./style/test.css" />
+
+        <!-- JS -->
+        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+        <script data-main="scripts/test" src="scripts/lib/require.js"></script>
+    </head>
+    <body>
+        <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+            <header class="mdl-layout__header">
+                <div class="mdl-layout__header-row">
+                    <div class="mdl-layout-spacer"></div>
+                    <form method="GET">
+                       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+                        <label class="mdl-button mdl-js-button mdl-button--icon" for="grep">
+                            <i class="material-icons">search</i>
+                        </label>
+                        <div class="mdl-textfield__expandable-holder">
+                            <input class="mdl-textfield__input" type="text" name="grep" id="grep">
+                            <label class="mdl-textfield__label" for="grep-expandable">Expandable Input</label>
+                        </div>
+                      </div>
+                    </form>
+                    <div class="mdl-layout-spacer"></div>
+                    <span class="mdl-layout-title TestReport">
+                        Test: <span class="tests-quantity">0</span>&nbsp;|&nbsp;
+                        <i class="material-icons">access_time</i>&nbsp;
+                        <span class="tests-time">0</span>ms&nbsp;|&nbsp;&nbsp;
+                        <i class="material-icons mdl-list__item-avatar icon-succeed">
+                            done
+                        </i>&nbsp;<span class="tests-succeed-quantity">0</span>
+                        &nbsp;|&nbsp;
+                        <i class="material-icons mdl-list__item-avatar icon-failed">
+                            close
+                        </i>&nbsp;<span class="tests-failed-quantity">0</span>
+                    </span>
+                </div>
+            </header>
+            <div class="mdl-layout__drawer">
+                <span class="mdl-layout-title">TestSuite - Test</span>
+                <!-- Navigation -->
+                <nav class="mdl-navigation">
+                    <!-- TODO -->
+                    <a
+                        class="
+                            action-button-failOnly
+                            mdl-button
+                            mdl-js-button
+                            mdl-js-ripple-effect
+                            mdl-button--large
+                            mdl-button--accent
+                            mdl-button--raised
+                        "
+                        href="test.html"
+                        disabled>
+
+                        Run all tests
+                    </a>
+                    <a
+                        class="
+                            action-button-failOnly
+                            mdl-button
+                            mdl-js-button
+                            mdl-js-ripple-effect
+                            mdl-button--large
+                            mdl-button--colored
+                            mdl-button--raised
+                        "
+                        href="test.html?failOnly"
+                        disabled>
+
+                        Run failed test
+                    </a>
+                </nav>
+            </div>
+            <main class="mdl-layout__content">
+                <div class="page-content">
+                    <div class="TestResultsArea mdl-list">
+                    </div>
+                </div>
+            </main>
+        </div>
+    </body>
+</html>