chore: add integrity tests (#789)

* chore: add integrity tests

* chore: rename test files

* chore: update gitignore not to track js files

* chore: make tests to work

* chore: anotate utility methods; expose jqeury and qunit via window interface

* chore: add npm run scripts for single and watch tests

* chore: use phantom js for single runs

* chore: revert to pure js tests

* chore: use ChromeHeadless instead of PhantomJS for single run tests

* chore: remove ts-single from tests

.config/karma.conf.js

@@ -0,0 +1,84 @@
+module.exports = function(config) {
+    config.set({
+
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: './../',
+
+
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ["qunit"],
+
+
+        // list of files / patterns to load in the browser
+        files: [
+            "node_modules/jquery/dist/jquery.js",
+            "tests/lib/helpers.js",
+            "dist/all.css",
+            "tests/fixtures/**/*.html",
+            "tests/data/metrics.js",
+            "tests/**/*-qunit.js"
+        ],
+
+
+        // list of files to exclude
+        exclude: [
+        ],
+
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'tests/fixtures/**/*.html': []
+            // 'tests/**/.html': ["html2js"]
+        },
+
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress'],
+
+
+        // web server port
+        port: 2107,
+
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: true,
+
+
+        // start these browsers
+        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+        browsers: ['Chrome'/*, 'PhantomJS'*/],
+
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: false,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity,
+
+
+
+
+        // client configuration
+        client: {
+            clearContext: false,
+            qunit: {
+                showUI: false
+            }
+        }
+    })
+}

.gitignore

@@ -7,3 +7,4 @@ examples/**/build/
 yarn.lock
 build/custom.js
 .vscode/
+tests/**/*.js

package.json

@@ -36,9 +36,12 @@
     "build": "webpack --optimize-minimize --bail",
     "watch": "webpack --watch",
     "embed-assets": "node build/embed-assets.js",
-    "test": "npm run lint && npm run build && npm run api-check && npm run twbs-compat",
+    "test": "npm run lint && npm run build && npm run api-check && npm run twbs-compat && npm run karma-single",
     "twbs-compat": "webpack --env.twbs-compat --bail",
-    "semantic-release": "semantic-release pre && semantic-prerelease publish && semantic-release post"
+    "semantic-release": "semantic-release pre && semantic-prerelease publish && semantic-release post",
+    "watch-test": "npm run karma-watch",
+    "karma-watch": "karma start --auto-watch --no-single-run",
+    "karma-single": "karma start --no-auto-watch --single-run --browsers ChromeHeadless"
   },
   "config": {
     "commitizen": {
@@ -74,7 +77,12 @@
     "ghooks": "^1.0.3",
     "glob": "^7.0.5",
     "handlebars": "^4.0.10",
+    "jquery": "^1.9.1",
+    "karma": "^1.7.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-qunit": "^1.2.1",
     "mime": "^1.3.4",
+    "qunitjs": "^2.4.1",
     "sass-lint": "^1.7.0",
     "sassdoc": "^2.1.20",
     "semantic-release": "^6.3.6",

tests/button-qunit.js

@@ -0,0 +1,15 @@
+QUnit.module("Button size", {
+    before: function() {
+        TestHelper.loadFixture( "/base/tests/fixtures/button.html" );
+    },
+    after: function() {
+        TestHelper.clearFixture();
+    }
+});
+
+QUnit.test("Generic button height should be 30", function( assert ) {
+    var button = $("#button");
+    var buttonHeight = getHeight( button );
+
+    assert.equal( buttonHeight, metrics.button.height );
+});

tests/data/metrics.js

@@ -0,0 +1,9 @@
+var metrics = {
+    "button": {
+        "height": 30
+    },
+    "iconButton": {
+        "width": 30,
+        "height": 30
+    }
+};

tests/fixtures/button.html

@@ -0,0 +1,16 @@
+<html lang="en">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/base/dist/all.css" />
+</head>
+<body>
+
+    <div class="test-area">
+        <span id="button" class="k-button">Button</span>
+        <span id="icon-button" class="k-button k-button-icon"><span class="k-icon k-i-add"></span></span>
+    </div>
+
+</body>
+</html>

tests/lib/helpers.js

@@ -0,0 +1,101 @@
+/// <reference path="../data/metrics.js" />
+
+
+var TestHelper = (function(){
+
+    function TestHelper() {}
+
+
+    // #region Fields
+    TestHelper.fixture = null;
+    TestHelper.fixtureID = "fixture_" + Date.now();
+    var $fixture;
+    // #endregion
+
+
+    // #region Methods
+    TestHelper.createFixture = function(id) {
+        var fixture = document.createElement("div");
+        fixture.id = id || TestHelper.fixtureID;
+        document.body.appendChild(fixture);
+
+        return fixture;
+    };
+    TestHelper.loadFixture = function(url) {
+
+        var $ = window.jQuery;
+
+        if (!TestHelper.fixture) {
+            TestHelper.fixture = TestHelper.createFixture();
+            TestHelper.$fixture = $(TestHelper.fixture);
+        }
+
+        $.ajax(url, {
+            async: false,
+            cache: false,
+            success: function(data, status, $xhr) {
+                var tmp = document.createElement("_CONTAINER");
+                tmp.innerHTML = data;
+                $(tmp).find("title, meta, link, style, script").remove();
+                tmp.innerHTML = tmp.innerHTML.trim();
+
+                TestHelper.$fixture.append(tmp.innerHTML);
+
+                tmp.innerHTML = "";
+                tmp = null;
+            },
+            error: function() {}
+        });
+    };
+    TestHelper.clearFixture = function() {
+        TestHelper.fixture.innerHTML = "";
+    };
+    TestHelper.removeFixture = function(){
+        TestHelper.clearFixture();
+        delete TestHelper.$fixture;
+        TestHelper.fixture.remove();
+        TestHelper.fixture = null;
+    };
+    // #endregion
+
+
+    return TestHelper;
+
+})();
+
+
+(function() {
+
+    // Qunit settings
+    QUnit.config.noglobals = true;
+    QUnit.config.fixture = "";
+
+    QUnit.testStart(function() {
+        TestHelper.fixture = TestHelper.createFixture();
+        TestHelper.$fixture = $(TestHelper.fixture);
+    });
+
+    QUnit.testDone(function() {
+        TestHelper.removeFixture();
+    });
+
+})();
+
+
+// Test methods
+function getHeight(element) {
+    var $ = window.jQuery;
+
+    return $(element).outerHeight();
+}
+function getWidth(element) {
+    var $ = window.jQuery;
+
+    return $(element).outerWidth();
+}
+function getSize(element) {
+    var $ = window.jQuery;
+    var $element = $(element);
+
+    return { width: $element.outerWidth(), height: $element.outerHeight() };
+}