Added Utils.Decorate and tests

This adds decorator support in a very basic way, but enough that
it doesn't take a lot of effort to get it implemented.

This also starts work on splitting things out for theming.

Gruntfile.js

@@ -125,7 +125,8 @@ module.exports = function (grunt) {
     watch: {
       js: {
         files: [
-          "src/js/**/*.js"
+          "src/js/select2/**/*.js",
+          "tests/**/*.js",
         ],
         tasks: [
           "compile",

dist/css/select2.css

@@ -6,23 +6,17 @@
   vertical-align: middle; }
 
 .select2-container .selection .single-select {
-  background-color: #eee;
-  border: 1px solid #aaa;
-  border-radius: 4px;
   box-sizing: border-box;
   cursor: pointer;
   display: block;
-  height: 28px; }
+  height: 28px;
+  user-select: none;
+  -webkit-user-select: none; }
   .select2-container .selection .single-select .rendered-selection {
-    color: #444;
     display: block;
-    line-height: 28px;
     overflow: hidden;
+    padding-left: 8px;
     text-overflow: ellipsis; }
-.select2-container.open .selection .single-select {
-  border-bottom: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0; }
 
 .select2-container .dropdown {
   background-color: white;
@@ -30,30 +24,47 @@
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
-  max-height: 200px;
-  overflow-y: scroll;
   position: absolute;
   left: -100000px;
   top: -100000px;
   width: 100%; }
-  .select2-container .dropdown .results .options {
+  .select2-container .dropdown .results {
-    list-style: none;
+    display: block; }
-    margin: 0;
+    .select2-container .dropdown .results .options {
-    padding: 0; }
+      list-style: none;
-    .select2-container .dropdown .results .options .option {
+      margin: 0;
-      cursor: pointer;
+      padding: 0; }
-      padding: 6px; }
+      .select2-container .dropdown .results .options .option {
-      .select2-container .dropdown .results .options .option.selected {
+        cursor: pointer;
-        background-color: #ddd; }
+        padding: 6px;
-      .select2-container .dropdown .results .options .option.hovered {
+        user-select: none;
-        background-color: darkblue;
+        -webkit-user-select: none; }
-        color: white; }
 .select2-container.open .dropdown {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   left: 0;
   top: 28px; }
 
+.select2-container.select2-theme-default .selection .single-select {
+  background-color: #eee;
+  border: 1px solid #aaa;
+  border-radius: 4px; }
+  .select2-container.select2-theme-default .selection .single-select .rendered-selection {
+    color: #444;
+    line-height: 28px; }
+.select2-container.select2-theme-default.open .selection .single-select {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+.select2-container.select2-theme-default .dropdown .results {
+  max-height: 200px;
+  overflow-y: scroll; }
+  .select2-container.select2-theme-default .dropdown .results .options .option.selected {
+    background-color: #ddd; }
+  .select2-container.select2-theme-default .dropdown .results .options .option.highlighted {
+    background-color: #5897fb;
+    color: white; }
+
 .s2-container {
   margin: 0;
   position: relative;

dist/js/select2.amd.full.js

@@ -21,6 +21,81 @@ define('select2/utils',[], function () {
     return ChildClass;
   };
 
+  function getMethods (theClass) {
+    var proto = theClass.prototype;
+
+    var methods = [];
+
+    for (var methodName in proto) {
+      var m = proto[methodName];
+
+      if (typeof m !== "function") {
+        continue;
+      }
+
+      methods.push(methodName);
+    }
+
+    return methods;
+  }
+
+  Utils.Decorate = function (SuperClass, DecoratorClass) {
+    var decoratedMethods = getMethods(DecoratorClass);
+    var superMethods = getMethods(SuperClass);
+
+    function DecoratedClass () {
+      var unshift = Array.prototype.unshift;
+
+      unshift.call(arguments, SuperClass.prototype.constructor);
+
+      var argCount = DecoratorClass.prototype.constructor.length;
+
+      var calledConstructor = SuperClass.prototype.constructor;
+
+      if (argCount > 0) {
+        calledConstructor = DecoratorClass.prototype.constructor;
+      }
+
+      calledConstructor.apply(this, arguments);
+    }
+
+    function ctr () {
+      this.constructor = DecoratedClass;
+    }
+
+    DecoratedClass.prototype = new ctr();
+
+    for (var m = 0; m < superMethods.length; m++) {
+        var methodName = superMethods[m];
+
+        DecoratedClass.prototype[methodName] = SuperClass.prototype[methodName];
+    }
+
+    for (var m = 0; m < decoratedMethods.length; m++) {
+      var methodName = decoratedMethods[m];
+
+      var originalMethod = function () {};
+
+      if (methodName in DecoratedClass.prototype) {
+        originalMethod = DecoratedClass.prototype[methodName];
+      }
+
+      var decoratedMethod = DecoratorClass.prototype[methodName];
+
+      function calledMethod () {
+        var unshift = Array.prototype.unshift;
+
+        unshift.call(arguments, originalMethod);
+
+        return decoratedMethod.apply(this, arguments);
+      }
+
+      DecoratedClass.prototype[methodName] = calledMethod;
+    }
+
+    return DecoratedClass;
+  }
+
   var Observable = function () {
     this.listeners = {};
   };
@@ -251,12 +326,12 @@ define('select2/results',[
     });
 
     this.$results.on("mouseenter", ".option", function (evt) {
-      self.$results.find(".option.hovered").removeClass("hovered");
+      self.$results.find(".option.highlighted").removeClass("highlighted");
-      $(this).addClass("hovered");
+      $(this).addClass("highlighted");
     });
 
     this.$results.on("mouseleave", ".option", function (evt) {
-      $(this).removeClass("hovered");
+      $(this).removeClass("highlighted");
     });
   };
 
@@ -440,7 +515,7 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container">' +
+      '<span class="select2 select2-container select2-theme-default">' +
         '<span class="selection"></span>' +
         '<span class="dropdown"></span>' +
       '</span>'

dist/js/select2.amd.js

@@ -21,6 +21,81 @@ define('select2/utils',[], function () {
     return ChildClass;
   };
 
+  function getMethods (theClass) {
+    var proto = theClass.prototype;
+
+    var methods = [];
+
+    for (var methodName in proto) {
+      var m = proto[methodName];
+
+      if (typeof m !== "function") {
+        continue;
+      }
+
+      methods.push(methodName);
+    }
+
+    return methods;
+  }
+
+  Utils.Decorate = function (SuperClass, DecoratorClass) {
+    var decoratedMethods = getMethods(DecoratorClass);
+    var superMethods = getMethods(SuperClass);
+
+    function DecoratedClass () {
+      var unshift = Array.prototype.unshift;
+
+      unshift.call(arguments, SuperClass.prototype.constructor);
+
+      var argCount = DecoratorClass.prototype.constructor.length;
+
+      var calledConstructor = SuperClass.prototype.constructor;
+
+      if (argCount > 0) {
+        calledConstructor = DecoratorClass.prototype.constructor;
+      }
+
+      calledConstructor.apply(this, arguments);
+    }
+
+    function ctr () {
+      this.constructor = DecoratedClass;
+    }
+
+    DecoratedClass.prototype = new ctr();
+
+    for (var m = 0; m < superMethods.length; m++) {
+        var methodName = superMethods[m];
+
+        DecoratedClass.prototype[methodName] = SuperClass.prototype[methodName];
+    }
+
+    for (var m = 0; m < decoratedMethods.length; m++) {
+      var methodName = decoratedMethods[m];
+
+      var originalMethod = function () {};
+
+      if (methodName in DecoratedClass.prototype) {
+        originalMethod = DecoratedClass.prototype[methodName];
+      }
+
+      var decoratedMethod = DecoratorClass.prototype[methodName];
+
+      function calledMethod () {
+        var unshift = Array.prototype.unshift;
+
+        unshift.call(arguments, originalMethod);
+
+        return decoratedMethod.apply(this, arguments);
+      }
+
+      DecoratedClass.prototype[methodName] = calledMethod;
+    }
+
+    return DecoratedClass;
+  }
+
   var Observable = function () {
     this.listeners = {};
   };
@@ -251,12 +326,12 @@ define('select2/results',[
     });
 
     this.$results.on("mouseenter", ".option", function (evt) {
-      self.$results.find(".option.hovered").removeClass("hovered");
+      self.$results.find(".option.highlighted").removeClass("highlighted");
-      $(this).addClass("hovered");
+      $(this).addClass("highlighted");
     });
 
     this.$results.on("mouseleave", ".option", function (evt) {
-      $(this).removeClass("hovered");
+      $(this).removeClass("highlighted");
     });
   };
 
@@ -440,7 +515,7 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container">' +
+      '<span class="select2 select2-container select2-theme-default">' +
         '<span class="selection"></span>' +
         '<span class="dropdown"></span>' +
       '</span>'

dist/js/select2.full.js

@@ -9558,6 +9558,81 @@ define('select2/utils',[], function () {
     return ChildClass;
   };
 
+  function getMethods (theClass) {
+    var proto = theClass.prototype;
+
+    var methods = [];
+
+    for (var methodName in proto) {
+      var m = proto[methodName];
+
+      if (typeof m !== "function") {
+        continue;
+      }
+
+      methods.push(methodName);
+    }
+
+    return methods;
+  }
+
+  Utils.Decorate = function (SuperClass, DecoratorClass) {
+    var decoratedMethods = getMethods(DecoratorClass);
+    var superMethods = getMethods(SuperClass);
+
+    function DecoratedClass () {
+      var unshift = Array.prototype.unshift;
+
+      unshift.call(arguments, SuperClass.prototype.constructor);
+
+      var argCount = DecoratorClass.prototype.constructor.length;
+
+      var calledConstructor = SuperClass.prototype.constructor;
+
+      if (argCount > 0) {
+        calledConstructor = DecoratorClass.prototype.constructor;
+      }
+
+      calledConstructor.apply(this, arguments);
+    }
+
+    function ctr () {
+      this.constructor = DecoratedClass;
+    }
+
+    DecoratedClass.prototype = new ctr();
+
+    for (var m = 0; m < superMethods.length; m++) {
+        var methodName = superMethods[m];
+
+        DecoratedClass.prototype[methodName] = SuperClass.prototype[methodName];
+    }
+
+    for (var m = 0; m < decoratedMethods.length; m++) {
+      var methodName = decoratedMethods[m];
+
+      var originalMethod = function () {};
+
+      if (methodName in DecoratedClass.prototype) {
+        originalMethod = DecoratedClass.prototype[methodName];
+      }
+
+      var decoratedMethod = DecoratorClass.prototype[methodName];
+
+      function calledMethod () {
+        var unshift = Array.prototype.unshift;
+
+        unshift.call(arguments, originalMethod);
+
+        return decoratedMethod.apply(this, arguments);
+      }
+
+      DecoratedClass.prototype[methodName] = calledMethod;
+    }
+
+    return DecoratedClass;
+  }
+
   var Observable = function () {
     this.listeners = {};
   };
@@ -9788,12 +9863,12 @@ define('select2/results',[
     });
 
     this.$results.on("mouseenter", ".option", function (evt) {
-      self.$results.find(".option.hovered").removeClass("hovered");
+      self.$results.find(".option.highlighted").removeClass("highlighted");
-      $(this).addClass("hovered");
+      $(this).addClass("highlighted");
     });
 
     this.$results.on("mouseleave", ".option", function (evt) {
-      $(this).removeClass("hovered");
+      $(this).removeClass("highlighted");
     });
   };
 
@@ -9977,7 +10052,7 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container">' +
+      '<span class="select2 select2-container select2-theme-default">' +
         '<span class="selection"></span>' +
         '<span class="dropdown"></span>' +
       '</span>'

dist/js/select2.js

@@ -449,6 +449,81 @@ define('select2/utils',[], function () {
     return ChildClass;
   };
 
+  function getMethods (theClass) {
+    var proto = theClass.prototype;
+
+    var methods = [];
+
+    for (var methodName in proto) {
+      var m = proto[methodName];
+
+      if (typeof m !== "function") {
+        continue;
+      }
+
+      methods.push(methodName);
+    }
+
+    return methods;
+  }
+
+  Utils.Decorate = function (SuperClass, DecoratorClass) {
+    var decoratedMethods = getMethods(DecoratorClass);
+    var superMethods = getMethods(SuperClass);
+
+    function DecoratedClass () {
+      var unshift = Array.prototype.unshift;
+
+      unshift.call(arguments, SuperClass.prototype.constructor);
+
+      var argCount = DecoratorClass.prototype.constructor.length;
+
+      var calledConstructor = SuperClass.prototype.constructor;
+
+      if (argCount > 0) {
+        calledConstructor = DecoratorClass.prototype.constructor;
+      }
+
+      calledConstructor.apply(this, arguments);
+    }
+
+    function ctr () {
+      this.constructor = DecoratedClass;
+    }
+
+    DecoratedClass.prototype = new ctr();
+
+    for (var m = 0; m < superMethods.length; m++) {
+        var methodName = superMethods[m];
+
+        DecoratedClass.prototype[methodName] = SuperClass.prototype[methodName];
+    }
+
+    for (var m = 0; m < decoratedMethods.length; m++) {
+      var methodName = decoratedMethods[m];
+
+      var originalMethod = function () {};
+
+      if (methodName in DecoratedClass.prototype) {
+        originalMethod = DecoratedClass.prototype[methodName];
+      }
+
+      var decoratedMethod = DecoratorClass.prototype[methodName];
+
+      function calledMethod () {
+        var unshift = Array.prototype.unshift;
+
+        unshift.call(arguments, originalMethod);
+
+        return decoratedMethod.apply(this, arguments);
+      }
+
+      DecoratedClass.prototype[methodName] = calledMethod;
+    }
+
+    return DecoratedClass;
+  }
+
   var Observable = function () {
     this.listeners = {};
   };
@@ -679,12 +754,12 @@ define('select2/results',[
     });
 
     this.$results.on("mouseenter", ".option", function (evt) {
-      self.$results.find(".option.hovered").removeClass("hovered");
+      self.$results.find(".option.highlighted").removeClass("highlighted");
-      $(this).addClass("hovered");
+      $(this).addClass("highlighted");
     });
 
     this.$results.on("mouseleave", ".option", function (evt) {
-      $(this).removeClass("hovered");
+      $(this).removeClass("highlighted");
     });
   };
 
@@ -868,7 +943,7 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container">' +
+      '<span class="select2 select2-container select2-theme-default">' +
         '<span class="selection"></span>' +
         '<span class="dropdown"></span>' +
       '</span>'

src/js/select2/core.js

@@ -77,7 +77,7 @@ define([
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container">' +
+      '<span class="select2 select2-container select2-theme-default">' +
         '<span class="selection"></span>' +
         '<span class="dropdown"></span>' +
       '</span>'

src/js/select2/dropdown/search.js

@@ -0,0 +1,15 @@
+define([
+  "../utils"
+], function (Utils) {
+  function Search (decorated, arguments) {
+    decorated.call(this, arguments);
+  }
+
+  Utils.Extend(Search, Utils.Observable);
+
+  Search.prototype.bind = function (decorated, arguments) {
+    this.$container = $container;
+  }
+
+  return Search;
+});

src/js/select2/results.js

@@ -99,12 +99,12 @@ define([
     });
 
     this.$results.on("mouseenter", ".option", function (evt) {
-      self.$results.find(".option.hovered").removeClass("hovered");
+      self.$results.find(".option.highlighted").removeClass("highlighted");
-      $(this).addClass("hovered");
+      $(this).addClass("highlighted");
     });
 
     this.$results.on("mouseleave", ".option", function (evt) {
-      $(this).removeClass("hovered");
+      $(this).removeClass("highlighted");
     });
   };
 

src/js/select2/utils.js

@@ -21,6 +21,81 @@ define([], function () {
     return ChildClass;
   };
 
+  function getMethods (theClass) {
+    var proto = theClass.prototype;
+
+    var methods = [];
+
+    for (var methodName in proto) {
+      var m = proto[methodName];
+
+      if (typeof m !== "function") {
+        continue;
+      }
+
+      methods.push(methodName);
+    }
+
+    return methods;
+  }
+
+  Utils.Decorate = function (SuperClass, DecoratorClass) {
+    var decoratedMethods = getMethods(DecoratorClass);
+    var superMethods = getMethods(SuperClass);
+
+    function DecoratedClass () {
+      var unshift = Array.prototype.unshift;
+
+      unshift.call(arguments, SuperClass.prototype.constructor);
+
+      var argCount = DecoratorClass.prototype.constructor.length;
+
+      var calledConstructor = SuperClass.prototype.constructor;
+
+      if (argCount > 0) {
+        calledConstructor = DecoratorClass.prototype.constructor;
+      }
+
+      calledConstructor.apply(this, arguments);
+    }
+
+    function ctr () {
+      this.constructor = DecoratedClass;
+    }
+
+    DecoratedClass.prototype = new ctr();
+
+    for (var m = 0; m < superMethods.length; m++) {
+        var methodName = superMethods[m];
+
+        DecoratedClass.prototype[methodName] = SuperClass.prototype[methodName];
+    }
+
+    for (var m = 0; m < decoratedMethods.length; m++) {
+      var methodName = decoratedMethods[m];
+
+      var originalMethod = function () {};
+
+      if (methodName in DecoratedClass.prototype) {
+        originalMethod = DecoratedClass.prototype[methodName];
+      }
+
+      var decoratedMethod = DecoratorClass.prototype[methodName];
+
+      function calledMethod () {
+        var unshift = Array.prototype.unshift;
+
+        unshift.call(arguments, originalMethod);
+
+        return decoratedMethod.apply(this, arguments);
+      }
+
+      DecoratedClass.prototype[methodName] = calledMethod;
+    }
+
+    return DecoratedClass;
+  }
+
   var Observable = function () {
     this.listeners = {};
   };

src/scss/_dropdown.scss

@@ -9,9 +9,6 @@
 
     display: block;
 
-    max-height: 200px;
-    overflow-y: scroll;
-
     position: absolute;
     left: -100000px;
     top: -100000px;
@@ -19,6 +16,8 @@
     width: 100%;
 
     .results {
+      display: block;
+
       .options {
         list-style: none;
         margin: 0;
@@ -28,14 +27,8 @@
           cursor: pointer;
           padding: 6px;
 
-          &.selected {
+          user-select: none;
-            background-color: #ddd;
+          -webkit-user-select: none;
-          }
-
-          &.hovered {
-            background-color: darkblue;
-            color: white;
-          }
         }
       }
     }

src/scss/_single.scss

@@ -1,8 +1,5 @@
 .select2-container {
   .selection .single-select {
-    background-color: #eee;
-    border: 1px solid #aaa;
-    border-radius: 4px;
     box-sizing: border-box;
 
     cursor: pointer;
@@ -10,20 +7,14 @@
 
     height: 28px;
 
+    user-select: none;
+    -webkit-user-select: none;
+
     .rendered-selection {
-      color: #444;
       display: block;
-      line-height: 28px;
       overflow: hidden;
+      padding-left: 8px;
       text-overflow: ellipsis;
     }
   }
-
-  &.open {
-    .selection .single-select {
-      border-bottom: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
 }

src/scss/core.scss

@@ -10,6 +10,8 @@
 @import "single";
 @import "dropdown";
 
+@import "theme/default/layout";
+
 .s2-container {
   margin: 0;
   position: relative;

src/scss/theme/default/layout.scss

@@ -1,11 +1,40 @@
-.s2-highlighted {
+.select2-container.select2-theme-default {
-  background-color: #5897fb;
+  .selection .single-select {
-  color: white;
+    background-color: #eee;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+
+    .rendered-selection {
+      color: #444;
+      line-height: 28px;
+    }
+  }
+
+  &.open {
+    .selection .single-select {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .dropdown {
+    .results {
+      max-height: 200px;
+      overflow-y: scroll;
+
+      .options {
+        .option {
+          &.selected {
+            background-color: #ddd;
+          }
+
+          &.highlighted {
+            background-color: #5897fb;
+            color: white;
+          }
+        }
+      }
+    }
+  }
 }
-
-.s2-dropdown {
-  max-height: 300px;
-  overflow: scroll;
-
-}
-

tests/utils/decorator-tests.js

@@ -0,0 +1,143 @@
+module("Decorators")
+
+var Utils = require("select2/utils");
+
+test("overridden", function (assert) {
+    function BaseClass () {};
+
+    BaseClass.prototype.hello = function () {
+        return "A";
+    }
+
+    function DecoratorClass () {};
+
+    DecoratorClass.prototype.hello = function () {
+        return "B";
+    }
+
+    var DecoratedClass = Utils.Decorate(BaseClass, DecoratorClass);
+
+    var inst = new DecoratedClass();
+
+    assert.strictEqual(inst.hello(), "B");
+});
+
+test("overridden - constructor", function (assert) {
+    function BaseClass () {
+        this.inherited = true;
+    };
+
+    BaseClass.prototype.hello = function () {
+        return "A";
+    }
+
+    function DecoratorClass (decorated) {
+        this.called = true;
+    };
+
+    DecoratorClass.prototype.other = function () {
+        return "B";
+    }
+
+    var DecoratedClass = Utils.Decorate(BaseClass, DecoratorClass);
+
+    var inst = new DecoratedClass();
+
+    assert.ok(inst.called);
+    assert.ok(!inst.inherited);
+});
+
+test("not overridden", function (assert) {
+    function BaseClass () {};
+
+    BaseClass.prototype.hello = function () {
+        return "A";
+    }
+
+    function DecoratorClass () {};
+
+    DecoratorClass.prototype.other = function () {
+        return "B";
+    }
+
+    var DecoratedClass = Utils.Decorate(BaseClass, DecoratorClass);
+
+    var inst = new DecoratedClass();
+
+    assert.strictEqual(inst.hello(), "A");
+});
+
+test("not overridden - constructor", function (assert) {
+    function BaseClass () {
+        this.called = true;
+    };
+
+    BaseClass.prototype.hello = function () {
+        return "A";
+    }
+
+    function DecoratorClass () {};
+
+    DecoratorClass.prototype.other = function () {
+        return "B";
+    }
+
+    var DecoratedClass = Utils.Decorate(BaseClass, DecoratorClass);
+
+    var inst = new DecoratedClass();
+
+    assert.ok(inst.called);
+});
+
+test("inherited", function (assert) {
+    function BaseClass () {
+        this.inherited = true;
+    };
+
+    BaseClass.prototype.hello = function () {
+        return "A";
+    }
+
+    function DecoratorClass (decorated) {
+        this.called = true;
+
+        decorated.call(this);
+    };
+
+    DecoratorClass.prototype.hello = function (decorated) {
+        return "B" + decorated.call(this) + "C";
+    }
+
+    var DecoratedClass = Utils.Decorate(BaseClass, DecoratorClass);
+
+    var inst = new DecoratedClass();
+
+    assert.strictEqual(inst.hello(), "BAC");
+});
+
+test("inherited - constructor", function (assert) {
+    function BaseClass () {
+        this.inherited = true;
+    };
+
+    BaseClass.prototype.hello = function () {
+        return "A";
+    }
+
+    function DecoratorClass (decorated) {
+        this.called = true;
+
+        decorated.call(this);
+    };
+
+    DecoratorClass.prototype.other = function () {
+        return "B";
+    }
+
+    var DecoratedClass = Utils.Decorate(BaseClass, DecoratorClass);
+
+    var inst = new DecoratedClass();
+
+    assert.ok(inst.called);
+    assert.ok(inst.inherited);
+});

tests/utils/decorator.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../vendor/qunit-1.14.0.css" type="text/css" />
+    <link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
+  </head>
+  <body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>
+
+    <script src="../vendor/qunit-1.14.0.js" type="text/javascript"></script>
+    <script src="../../vendor/almond-0.2.9.js" type="text/javascript"></script>
+    <script src="../../vendor/jquery-2.1.0.js" type="text/javascript"></script>
+    <script src="../../dist/js/select2.amd.js" type="text/javascript"></script>
+
+    <script src="decorator-tests.js" type="text/javascript"></script>
+  </body>
+</html>

tests/vendor/qunit-1.14.0.css

@@ -0,0 +1,237 @@
+/*!
+ * QUnit 1.14.0
+ * http://qunitjs.com/
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license
+ * http://jquery.org/license
+ *
+ * Date: 2014-01-31T16:40Z
+ */
+
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+	padding: 0.5em 0 0.5em 1em;
+
+	color: #8699A4;
+	background-color: #0D3349;
+
+	font-size: 1.5em;
+	line-height: 1em;
+	font-weight: 400;
+
+	border-radius: 5px 5px 0 0;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #C2CCD1;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: #FFF;
+}
+
+#qunit-testrunner-toolbar label {
+	display: inline-block;
+	padding: 0 0.5em 0 0.1em;
+}
+
+#qunit-banner {
+	height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+	padding: 0.5em 0 0.5em 2em;
+	color: #5E740B;
+	background-color: #EEE;
+	overflow: hidden;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 0 0.5em 2.5em;
+	background-color: #2B81AF;
+	color: #FFF;
+	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+#qunit-modulefilter-container {
+	float: right;
+}
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-position: inside;
+}
+
+#qunit-tests li {
+	padding: 0.4em 0.5em 0.4em 2.5em;
+	border-bottom: 1px solid #FFF;
+	list-style-position: inside;
+}
+
+#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
+	display: none;
+}
+
+#qunit-tests li strong {
+	cursor: pointer;
+}
+
+#qunit-tests li a {
+	padding: 0.5em;
+	color: #C2CCD1;
+	text-decoration: none;
+}
+#qunit-tests li a:hover,
+#qunit-tests li a:focus {
+	color: #000;
+}
+
+#qunit-tests li .runtime {
+	float: right;
+	font-size: smaller;
+}
+
+.qunit-assert-list {
+	margin-top: 0.5em;
+	padding: 0.5em;
+
+	background-color: #FFF;
+
+	border-radius: 5px;
+}
+
+.qunit-collapsed {
+	display: none;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: 0.2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 0.5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #E0F2BE;
+	color: #374E0C;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #FFCACA;
+	color: #500;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.counts                       { color: #000; }
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed                       { color: #710909; }
+
+#qunit-tests li li {
+	padding: 5px;
+	background-color: #FFF;
+	border-bottom: none;
+	list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #3C510C;
+	background-color: #FFF;
+	border-left: 10px solid #C6E746;
+}
+
+#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests .pass .test-name               { color: #366097; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #FFF;
+	border-left: 10px solid #EE5757;
+	white-space: pre;
+}
+
+#qunit-tests > li:last-child {
+	border-radius: 0 0 5px 5px;
+}
+
+#qunit-tests .fail                          { color: #000; background-color: #EE5757; }
+#qunit-tests .fail .test-name,
+#qunit-tests .fail .module-name             { color: #000; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: #008000; }
+
+#qunit-banner.qunit-fail                    { background-color: #EE5757; }
+
+
+/** Result */
+
+#qunit-testresult {
+	padding: 0.5em 0.5em 0.5em 2.5em;
+
+	color: #2B81AF;
+	background-color: #D2E0E6;
+
+	border-bottom: 1px solid #FFF;
+}
+#qunit-testresult .module-name {
+	font-weight: 700;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+	width: 1000px;
+	height: 1000px;
+}