Adjust test environment and project description

.eslintrc.js

@@ -2,7 +2,8 @@ module.exports = {
     'env': {
         'browser': true,
         'commonjs': true,
-        'amd': true
+        'amd': true,
+        'mocha': true
     },
     'extends': 'eslint:recommended',
     'rules': {

Gruntfile.js

@@ -32,10 +32,7 @@ module.exports = function(grunt) {
             options: {
                 configFile: '.eslintrc.js'
             },
-            target: [
-                ['src/**/*.js'],
-                'Gruntfile.js'
-            ]
+            target: ['src/**/*.js', 'Gruntfile.js', 'test/index.js']
         },
 
         watch: {

demo/index.html

@@ -4,7 +4,7 @@
 
         {{ include('snippets/pageMeta.html', {
             "title": "When in viewport",
-            "description": "Handle elements as they enter viewport with this simple and lightweight jQuery plugin"
+            "description": "Handle elements as they enter viewport with this simple and lightweight javascript library."
         }) }}
 
         {{ include('snippets/attireAssets.html') }}

index.html

@@ -5,7 +5,7 @@
         <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>When in viewport</title>
-<meta name="description" content="Handle elements as they enter viewport with this simple and lightweight jQuery plugin">
+<meta name="description" content="Handle elements as they enter viewport with this simple and lightweight javascript library.">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

karma.conf.js

@@ -0,0 +1,58 @@
+module.exports = function(config) {
+  config.set({
+
+    files: [
+      'test/index.js'
+    ],
+
+    frameworks: ['mocha'],
+
+    preprocessors: {
+      'test/index.js': ['webpack']
+    },
+
+    reporters: ['spec', 'coverage'],
+
+    coverageReporter: {
+
+      dir: 'coverage/',
+      reporters: [
+          { type: 'html' },
+          { type: 'text' },
+          { type: 'lcov', subdir: 'lcov' },
+          { type: 'text-summary' }
+      ]
+    },
+
+    webpack: {
+      module: {
+        postLoaders: [{
+          test: /\.js/,
+          exclude: /(test|node_modules|bower_components)/,
+          loader: 'istanbul-instrumenter'
+        }]
+      }
+    },
+
+    webpackMiddleware: {
+      noInfo: true
+    },
+
+    client: {
+      useIframe: false
+    },
+
+    plugins: [
+      require("karma-webpack"),
+      require("istanbul-instrumenter-loader"),
+      require("karma-mocha"),
+      require("karma-coverage"),
+      require("karma-chrome-launcher"),
+      require("karma-phantomjs-launcher"),
+      require("karma-spec-reporter")
+    ],
+
+    browsers: ['Chrome', 'PhantomJS']
+
+  });
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "when-in-viewport",
-  "description": "Handle elements as they enter viewport with this simple and lightweight jQuery plugin",
+  "description": "Handle elements as they enter viewport with this simple and lightweight javascript library.",
   "version": "2.0.1",
   "license": "MIT",
   "repository": {
@@ -11,10 +11,9 @@
   "scripts": {
     "watch": "grunt",
     "build": "grunt build",
-    "test": "mocha --reporter spec",
-    "coverage": "istanbul cover _mocha -- -R spec",
-    "coverageReport": "npm run coverage && open coverage/lcov-report/*.html",
-    "coveralls": "istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
+    "watch:test": "node ./node_modules/karma/bin/karma start --browsers PhantomJS",
+    "test": "node ./node_modules/karma/bin/karma start --single-run --browsers PhantomJS",
+    "coveralls": "cat ./coverage/lcov/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
     "bump:patch": "grunt bump:patch",
     "bump:minor": "grunt bump:minor",
     "bump:major": "grunt bump:major"
@@ -30,12 +29,21 @@
     "grunt-contrib-watch": "^1.0.0",
     "grunt-eslint": "^19.0.0",
     "grunt-include-replace": "^5.0.0",
+    "gulp": "^3.8.11",
     "istanbul": "^0.4.5",
+    "istanbul-instrumenter-loader": "^1.2.0",
     "jquery": "^3.1.1",
-    "jsdom": "^9.10.0",
-    "jsdom-global": "^2.1.1",
+    "karma": "^1.4.1",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^2.0.2",
     "load-grunt-tasks": "^3.5.2",
     "mocha": "^3.2.0",
-    "underscore": "^1.8.3"
+    "mocha-loader": "^1.1.0",
+    "underscore": "^1.8.3",
+    "webpack": "^1.14.0"
   }
 }

test/index.js

@@ -1,49 +1,42 @@
-var assert = require("chai").assert;
+var assert = require('chai').assert;
 var _ = require('underscore');
-require('jsdom-global')();
-
-var $ = require('jquery');
-window.$ = $;
-var WhenInViewport = require("../");
+var $ = window.$ = require('jquery');
+var WhenInViewport = require('../');
 
 var testElement;
 var anotherTestElement;
+var spacer1;
+var spacer2;
 
-var scrollTo = function(num, callback) {
-    window.pageYOffset = num;
-    window.dispatchEvent(new Event('scroll'));
-    callback && callback();
-};
+var windowHeight;
 
-var resizeHeight = function(num, callback) {
-    window.innerHeight = num;
-    window.dispatchEvent(new Event('resize'));
-    callback && callback();
-};
+beforeEach(function() {
 
-var setElementPosition = function(element, num) {
-    element.getBoundingClientRect = function() {
-        return {top: num, left: 0};
-    }
-}
+    windowHeight = window.innerHeight;
 
-beforeEach(function() {
+    window.scrollTo(0, 0);
 
-    $('body').append('<div id="test"></div><div id="anotherTest"></div>');
+    $('body').css({
+        height: '10000px',
+        margin: 0,
+        padding: 0
+    }).html('').append(
+        '<div id="spacer1" style="height: ' + 2 * windowHeight + 'px"></div>' +
+        '<div id="test"></div>' +
+        '<div id="spacer2" style="height: ' + windowHeight + 'px"></div>' +
+        '<div id="anotherTest"></div>'
+    );
 
-    window.innerHeight = 500;
     testElement = document.getElementById('test');
-    anotherTestElement = document.getElementById('anotherTest')
-
-    scrollTo(0);
-    setElementPosition(testElement, 1000);
-    setElementPosition(anotherTestElement, 2000);
+    anotherTestElement = document.getElementById('anotherTest');
+    spacer1 = document.getElementById('spacer1');
+    spacer2 = document.getElementById('spacer2');
 
     WhenInViewport.destroy();
 
 });
 
-describe("WhenInViewport", function() {
+describe('WhenInViewport', function() {
 
     it('fires callback with element as parameter', function(done) {
 
@@ -52,7 +45,7 @@ describe("WhenInViewport", function() {
             done();
         });
 
-        scrollTo(1500);
+        window.scrollTo(0, 2 * windowHeight);
 
     });
 
@@ -83,23 +76,31 @@ describe("WhenInViewport", function() {
             threshold: 100
         });
 
-        scrollTo(400);
+        window.scrollTo(0, windowHeight - 100);
 
     });
 
     it('stops listening when required', function(done) {
 
-        var inViewport = false;
+        var elementInViewport = false;
+        var anotherElementViewport = false;
 
-        new WhenInViewport(testElement, function(elementInViewport) {
-            inViewport = true;
+        new WhenInViewport(testElement, function() {
+            elementInViewport = true;
         }).stopListening();
 
-        scrollTo(1500, function() {
-            assert.isFalse(inViewport);
-            done();
+        new WhenInViewport(anotherTestElement, function() {
+            anotherElementViewport = true;
         });
 
+        window.scrollTo(0, 2 * windowHeight - 100);
+
+        setTimeout(function() {
+            assert.isFalse(elementInViewport);
+            assert.isFalse(anotherElementViewport);
+            done();
+        }, 10);
+
     });
 
     it('properly sets rate limiter', function(done) {
@@ -112,14 +113,21 @@ describe("WhenInViewport", function() {
             inViewport = true;
         });
 
-        scrollTo(1500, function() {
+        window.scrollTo(0, 3 * windowHeight);
+
+        setTimeout(function() {
+
             assert.isFalse(inViewport);
+
             setTimeout(function() {
+
                 assert.isTrue(inViewport);
                 WhenInViewport.setRateLimiter(function(callback) { return callback; }, 100);
                 done();
+
             }, 550);
-        });
+
+        }, 10);
 
     });
 
@@ -136,11 +144,16 @@ describe("WhenInViewport", function() {
             anotherElementViewport = true;
         });
 
-        resizeHeight(3000, function() {
+        spacer1.style.height = '50px';
+        spacer2.style.height = '50px';
+
+        window.dispatchEvent(new Event('resize'));
+
+        setTimeout(function() {
             assert.isTrue(elementInViewport);
             assert.isTrue(anotherElementViewport);
             done();
-        });
+        }, 10);
 
     });
 
@@ -157,7 +170,8 @@ describe("WhenInViewport", function() {
             anotherElementViewport = true;
         });
 
-        window.innerHeight = 3000;
+        spacer1.style.height = '50px';
+        spacer2.style.height = '50px';
 
         WhenInViewport.checkAll();
 
@@ -184,6 +198,8 @@ describe("WhenInViewport", function() {
             setupOnce: true
         });
 
+        assert.instanceOf($testElement.data('whenInViewport'), WhenInViewport);
+
         $anotherTestElement.whenInViewport({
             callback: function($el) {
                 $el.addClass('inViewport');
@@ -193,13 +209,15 @@ describe("WhenInViewport", function() {
             context: testContext
         });
 
-        scrollTo(1500, function() {
+        window.scrollTo(0, 3 * windowHeight);
+
+        setTimeout(function() {
             assert.isTrue($testElement.hasClass('inViewport'));
             assert.isFalse($testElement.hasClass('againInViewport'));
             assert.isTrue($anotherTestElement.hasClass('inViewport'));
             done();
-        });
+        }, 10);
 
     });
 
-});
+});