Ensure library can be tested (issue-299)

- Upgrade test environment
  - rename tests directory
  - use QUnit v1.17.1 and remove global variables/methods
  - use latest version of jQuery and Knockout
  - For now all tests are failing

- Enable Continuous Integration with Travis CI
  Note: The image for build status shows the status
  of the 2.1.5 branch. When this branch will be merged
  into master the link must be updated to reflect the master
  branch status.

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "0.10"

README.md

@@ -1,6 +1,9 @@
 # KoGrid
+
 A Knockout DataGrid
 
+[![Build Status](https://travis-ci.org/Knockout-Contrib/KoGrid.svg?branch=2.1.5)](https://travis-ci.org/Knockout-Contrib/KoGrid)
+
 
 __Contributors:__
 

gulpfile.js

@@ -12,6 +12,7 @@ var gulpUglify = require('gulp-uglify');
 var gulpJSHint = require('gulp-jshint');
 var gulpSourceMaps = require('gulp-sourcemaps');
 var gulpMinifyCSS = require('gulp-minify-css');
+var gulpQUnit = require('gulp-qunit');
 var minifyHtml = require('html-minifier').minify;
 var mapStream = require('map-stream');
 var path = require('path');
@@ -91,4 +92,14 @@ gulp.task('compile', ['styles'], function() {
         .pipe(gulp.dest(buildConfig.outputPath));
 });
 
-gulp.task('default', ['compile', 'styles']);
+gulp.task('test', ['compile'], function() {
+    return gulp.src('test/test-runner.htm')
+        .pipe(gulpQUnit());
+});
+
+gulp.task('test-ci', ['compile'], function() {
+    return gulp.src(['test/test-runner-ko*.htm'])
+        .pipe(gulpQUnit());
+});
+
+gulp.task('default', ['compile', 'styles', 'test']);

package.json

@@ -18,6 +18,9 @@
       "name": "ebarnard"
     }
   ],
+  "scripts": {
+    "test": "gulp test-ci"
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/Knockout-Contrib/KoGrid/issues"
@@ -31,6 +34,7 @@
     "gulp-header": "^1.2.2",
     "gulp-jshint": "^1.9.2",
     "gulp-minify-css": "^1.0.0",
+    "gulp-qunit": "^1.2.1",
     "gulp-rename": "^1.2.0",
     "gulp-sourcemaps": "^1.5.0",
     "gulp-uglify": "^1.1.0",

test/Column_Tests.js

@@ -0,0 +1,26 @@
+(function() {
+    'use strict';
+    /*global QUnit,kg*/
+
+    QUnit.module('Column Initialization Tests');
+
+    QUnit.test('Basic Column Initialization Test', function(assert) {
+
+        var colDef = {
+            field: 'test',
+            displayName: 'TEST',
+            width: 20,
+            cellTemplate: 'myTmpl',
+            cellClass: 'myCellClass',
+            headerClass: 'myHeaderClass',
+            headerTemplate: 'myHeaderTmpl'
+        };
+
+        var col = new kg.Column(colDef);
+
+        assert.ok(col, 'Column Exists');
+        assert.equal(col.field, 'test', 'Column has the correct field');
+        assert.ok(col.hasCellTemplate, 'Reflects that it has a cell template');
+        assert.equal(col.width(), 20, 'Has the Correct Width');
+    });
+})();

test/DomUtility_Tests.js

@@ -0,0 +1,136 @@
+(function() {
+    'use strict';
+    /*global QUnit,kg*/
+
+    QUnit.module("DomUtility Tests");
+
+    QUnit.test("Measure Container Max Dimensions", function(assert) {
+
+        var $container = $('<div style="max-height: 100px; max-width: 100px;"></div>').appendTo($('body'));
+
+        var dims = kg.domUtility.measureElementMaxDims($container);
+
+        assert.equals(dims.maxWidth, 100, 'Max Width is correct');
+        assert.equals(dims.maxHeight, 100, 'Max Height is correct');
+
+        $container.remove();
+    });
+
+    QUnit.test("Measure ScrollBars Occurred", function(assert) {
+
+        var scrollH = kg.domUtility.scrollH;
+        var scrollW = kg.domUtility.scrollW;
+
+        assert.ok(scrollH, 'Scroll Height is ' + scrollH);
+        assert.ok(scrollW, 'Scroll Width is ' + scrollW);
+        assert.ok(scrollH < 100, 'ScrollH is less than 100');
+        assert.ok(scrollW < 100, 'ScrollW is less than 100');
+    });
+
+    QUnit.test("Measure Container Min Dimensions", function(assert) {
+        var $wrapper = $('<div style="height: 0px; width: 0px;"></div>').appendTo($('body'));
+        var $container = $('<div style="min-height: 100px; min-width: 100px;"></div>').appendTo($wrapper);
+
+        var dims = kg.domUtility.measureElementMinDims($container);
+
+        assert.equals(dims.minWidth, 100, 'Min Width is correct');
+        assert.equals(dims.minHeight, 100, 'Min Height is correct');
+
+        $container.remove();
+        $wrapper.remove();
+    });
+
+    QUnit.test("No Visibility - Measure Container Max Dimensions", function(assert) {
+        var $wrapper = $('<div style="height: 200px; width: 200px; display: none;"></div>').appendTo($('body'));
+        var $container = $('<div style="max-height: 100px; max-width: 100px;"></div>').appendTo($wrapper);
+
+        var dims = kg.domUtility.measureElementMaxDims($container);
+
+        assert.equals(dims.maxWidth, 100, 'Max Width is correct');
+        assert.equals(dims.maxHeight, 100, 'Max Height is correct');
+
+        $container.remove();
+        $wrapper.remove();
+    });
+
+    QUnit.test("No Visibility - Measure Container Min Dimensions", function(assert) {
+        var $wrapper = $('<div style="height: 0px; width: 0px; display: none;"></div>').appendTo($('body'));
+        var $container = $('<div style="min-height: 100px; min-width: 100px;"></div>').appendTo($wrapper);
+
+        var dims = kg.domUtility.measureElementMinDims($container);
+
+        assert.equals(dims.minWidth, 100, 'Min Width is correct');
+        assert.equals(dims.minHeight, 100, 'Min Height is correct');
+
+        $container.remove();
+        $wrapper.remove();
+    });
+
+    QUnit.test("Measure percentage-based dimensions - Maximum", function(assert) {
+        var $wrapper = $('<div style="height: 200px; width: 200px;"></div>').appendTo($('body'));
+        var $container = $('<div style="height: 70%; width: 70%;"></div>').appendTo($wrapper);
+
+        var dims = kg.domUtility.measureElementMaxDims($container);
+
+        assert.equals(dims.maxWidth, 140, 'Width is correct');
+        assert.equals(dims.maxHeight, 140, 'Height is correct');
+
+        $container.remove();
+        $wrapper.remove();
+    });
+
+    QUnit.test("Measure percentage-based dimensions - Minimum", function(assert) {
+        var $wrapper = $('<div style="height: 200px; width: 200px;"></div>').appendTo($('body'));
+        var $container = $('<div style="height: 70%; width: 70%;"></div>').appendTo($wrapper);
+
+        var dims = kg.domUtility.measureElementMinDims($container);
+
+        assert.equals(dims.minWidth, 140, 'Width is correct');
+        assert.equals(dims.minHeight, 140, 'Height is correct');
+
+        $container.remove();
+        $wrapper.remove();
+    });
+
+    QUnit.test('Measure Full Grid Test', function(assert) {
+
+        var $wrapper = $('<div style="height: 0px; width: 0px;"></div>').appendTo($('body'));
+        var $container = $('<div style="min-height: 99px; min-width: 98px; max-height: 201px; max-width: 202px;"></div>').appendTo($wrapper);
+
+        var fakeGrid = {
+            config: {
+                headerRowHeight: 2,
+                rowHeight: 2,
+                footerRowHeight: 4
+            },
+            elementDims: {
+                rootMaxH: 0,
+                rootMinH: 0,
+                rootMaxW: 0,
+                rootMinW: 0
+            }
+        };
+
+        kg.domUtility.measureGrid($container, fakeGrid, true);
+
+        assert.equals(fakeGrid.elementDims.rootMaxH, 201, 'MaxHeight before change is correct');
+        //equals(fakeGrid.elementDims.rootMaxW, 202, 'MaxWidth before change is correct');
+
+        assert.equals(fakeGrid.elementDims.rootMinH, 99, 'MinHeight before change is correct');
+        assert.equals(fakeGrid.elementDims.rootMinW, 98, 'MinWidth before change is correct');
+
+        //now append a few things to the container, so we can check that the assertions still work after the container has children
+        $container.append("<div style='height: 2000px; width: 2000px;'></div>");
+        $wrapper.width(300);
+        $wrapper.height(300);
+
+        assert.equals(fakeGrid.elementDims.rootMaxH, 201, 'Max Height after change is correct');
+        //equals(fakeGrid.elementDims.rootMaxW, 202, 'Max Width after change is correct');
+
+        assert.equals(fakeGrid.elementDims.rootMinH, 99, 'Min Height after change is correct');
+        assert.equals(fakeGrid.elementDims.rootMinW, 98, 'Min Width after change is correct');
+
+        $container.remove();
+        $wrapper.remove();
+    });
+})();