chore: Add Gruntfile, update Karma configuration & fix JSHint errors

Leveraging Grunt to check for style issues and run the Karma tests makes it
easier to run those processes. The Gruntfile in use here is based on that of
ui-utils, and the Karma config file (which has been renamed Karma.conf.js for
consistency with other projects) has been re-generated with karma init.

Author: kadamwhite

.jshintrc

@@ -0,0 +1,11 @@
+{
+    "curly": true,
+    "eqeqeq": true,
+    "immed": true,
+    "latedef": true,
+    "newcap": true,
+    "noarg": true,
+    "sub": true,
+    "boss": true,
+    "eqnull": true
+}

Gruntfile.js

@@ -0,0 +1,56 @@
+module.exports = function (grunt) {
+  'use strict';
+
+  var initConfig;
+
+  // Loading external tasks
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-karma');
+
+  // Project configuration.
+  initConfig = {
+    bower: 'bower_components',
+    pkg: grunt.file.readJSON('package.json'),
+    watch: {
+      // Lint & run unit tests in Karma
+      // Just running `$ grunt watch` will only lint your code; to run tests
+      // on watch, use `$ grunt watch:karma` to start a Karma server first
+      files: ['src/select2.js', 'test/select2Spec.js'],
+      tasks: ['jshint', 'karma:headless:run']
+    },
+    karma: {
+      options: {
+        configFile: 'test/karma.conf.js'
+      },
+      unit: {
+        singleRun: true,
+        browsers: ['Firefox', 'PhantomJS']
+      },
+      headless: {
+        singleRun: true,
+        browsers: ['PhantomJS']
+      },
+      server: {
+        background: true,
+        browsers: ['Firefox', 'PhantomJS']
+      }
+    },
+    jshint: {
+      all:[
+        'gruntFile.js',
+        'src/**/*.js',
+        'test/**/*Spec.js'
+      ],
+      options: {
+        jshintrc: '.jshintrc'
+      }
+    },
+  };
+
+  // Register tasks
+  grunt.registerTask('default', ['jshint', 'karma:unit']);
+  grunt.registerTask('watch:karma', ['karma:server', 'watch']);
+
+  grunt.initConfig(initConfig);
+};

README.md

@@ -10,40 +10,42 @@ This directive allows you to enhance your select elements with behaviour from th
 
 ## Setup
 
-1. Install **karma**
-  `$ npm install -g karma`
-2. Install **bower**
-  `$ npm install -g bower`
-4. Install components
+1. Install **Karma**, **Grunt** and **Bower**
+  `$ npm install -g karma grunt-cli bower`
+2. Install development dependencies
+  `$ npm install`
+3. Install components
   `$ bower install`
 4. ???
 5. Profit!
 
 ## Testing
 
-`$ karma start test/test.conf.js --browsers=Chrome`
+We use [Grunt](http://gruntjs.com/) to check for JavaScript syntax errors and execute all unit tests. To run grunt, simply execute:
 
-# Usage
+`$ grunt`
 
-We use [bower](https://github.com/bower/bower) for dependency management.  Add
+To have Grunt automatically lint and test your files whenever you make a code change, use:
 
-```javascript
-dependencies: {
-    "angular-ui-select2": "latest"
-}
-```
+`$ grunt watch:karma`
+
+This will start a Karma server in the background and run unit tests in Firefox and PhantomJS whenever the source code or spec file is saved.
+
+# Usage
+
+We use [bower](https://github.com/bower/bower) for dependency management. Install AngularUI Select2 into your project by running the command
 
-To your `bower.json` file. Then run
+`$ bower install angular-ui-select2`
 
-    bower install
+If you use a `bower.json` file in your project, you can have Bower save ui-select2 as a dependency by passing the `--save` or `--save-dev` flag with the above command.
 
-This will copy the ui-select2 files into your `components` folder, along with its dependencies. Load the script files in your application:
+This will copy the ui-select2 files into your `bower_components` folder, along with its dependencies. Load the script files in your application:
 ```html
-<link rel="stylesheet" href="components/select2/select2.css">
-<script type="text/javascript" src="components/jquery/jquery.js"></script>
-<script type="text/javascript" src="components/select2/select2.js"></script>
-<script type="text/javascript" src="components/angular/angular.js"></script>
-<script type="text/javascript" src="components/angular-ui-select2/src/select2.js"></script>
+<link rel="stylesheet" href="bower_components/select2/select2.css">
+<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
+<script type="text/javascript" src="bower_components/select2/select2.js"></script>
+<script type="text/javascript" src="bower_components/angular/angular.js"></script>
+<script type="text/javascript" src="bower_components/angular-ui-select2/src/select2.js"></script>
 ```
 
 (Note that `jquery` must be loaded before `angular` so that it doesn't use `jqLite` internally)

package.json

@@ -1,7 +1,11 @@
 {
   "author": "https://github.com/angular-ui/ui-select2/graphs/contributors",
   "name": "angular-ui-select2",
-  "keywords": ["angular", "angularui", "select2"],
+  "keywords": [
+    "angular",
+    "angularui",
+    "select2"
+  ],
   "description": "AngularUI - The companion suite for AngularJS",
   "version": "0.0.2",
   "homepage": "http://angular-ui.github.com",
@@ -14,8 +18,11 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "grunt-recess": "~0.1.3",
     "async": "0.1.x",
-    "karma": "~0"
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.6.4",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-karma": "~0.6.2",
+    "karma": "~0.10.2"
   }
 }

src/select2.js

@@ -17,7 +17,7 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
         repeatOption,
         repeatAttr,
         isSelect = tElm.is('select'),
-        isMultiple = (tAttrs.multiple !== undefined);
+        isMultiple = angular.isDefined(tAttrs.multiple);
 
       // Enable watching of the options dataset if in use
       if (tElm.is('select')) {
@@ -39,21 +39,21 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
         var convertToAngularModel = function(select2_data) {
           var model;
           if (opts.simple_tags) {
-            model = []
+            model = [];
             angular.forEach(select2_data, function(value, index) {
-              model.push(value.id)
-            })
+              model.push(value.id);
+            });
           } else {
-            model = select2_data
+            model = select2_data;
           }
-          return model
-        }
+          return model;
+        };
 
         /*
         Convert from Angular view-model to Select2 view-model.
         */
         var convertToSelect2Model = function(angular_data) {
-          var model = []
+          var model = [];
           if (!angular_data) {
             return model;
           }
@@ -64,12 +64,12 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
               angular_data,
               function(value, index) {
                 model.push({'id': value, 'text': value});
-              })
+              });
           } else {
             model = angular_data;
           }
-          return model
-        }
+          return model;
+        };
 
         if (isSelect) {
           // Use <select multiple> instead
@@ -83,13 +83,13 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
           // Watch the model for programmatic changes
            scope.$watch(tAttrs.ngModel, function(current, old) {
             if (!current) {
-              return
+              return;
             }
-            if (current == old) {
-              return
+            if (current === old) {
+              return;
             }
-            controller.$render()
-          }, true)
+            controller.$render();
+          }, true);
           controller.$render = function () {
             if (isSelect) {
               elm.select2('val', controller.$viewValue);
@@ -112,7 +112,9 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
           // Watch the options dataset for changes
           if (watch) {
             scope.$watch(watch, function (newVal, oldVal, scope) {
-              if (!newVal) return;
+              if (!newVal) {
+                return;
+              }
               // Delayed so that the options have time to be rendered
               $timeout(function () {
                 elm.select2('val', controller.$viewValue);
@@ -124,7 +126,7 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
 
           // Update valid and dirty statuses
           controller.$parsers.push(function (value) {
-            var div = elm.prev()
+            var div = elm.prev();
             div
               .toggleClass('ng-invalid', !controller.$valid)
               .toggleClass('ng-valid', controller.$valid)
@@ -138,7 +140,9 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
           if (!isSelect) {
             // Set the view and model value and update the angular template manually for the ajax/multiple select2.
             elm.bind("change", function () {
-              if (scope.$$phase) return;
+              if (scope.$$phase) {
+                return;
+              }
               scope.$apply(function () {
                 controller.$setViewValue(
                   convertToAngularModel(elm.select2('data')));
@@ -185,9 +189,11 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
           controller.$render();
 
           // Not sure if I should just check for !isSelect OR if I should check for 'tags' key
-          if (!opts.initSelection && !isSelect)
+          if (!opts.initSelection && !isSelect) {
             controller.$setViewValue(
-              convertToAngularModel(elm.select2('data')));
+              convertToAngularModel(elm.select2('data'))
+            );
+          }
         });
       };
     }

test/karma.conf.js

@@ -0,0 +1,80 @@
+// Karma configuration
+// Generated on Tue Sep 17 2013 06:59:46 GMT-0400 (EDT)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path, that will be used to resolve files and exclude
+    basePath: '..',
+
+
+    // frameworks to use
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      // Dependencies
+      'bower_components/jquery/jquery.js',
+      'bower_components/angular/angular.js',
+      'bower_components/angular-mocks/angular-mocks.js',
+      'bower_components/select2/select2.js',
+      
+      // Source Code
+      'src/select2.js',
+
+      // Test Specs
+      'test/*Spec.js'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+      
+    ],
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // 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: false,
+
+
+    // Start these browsers, currently available:
+    // - Chrome
+    // - ChromeCanary
+    // - Firefox
+    // - Opera
+    // - Safari (only Mac)
+    // - PhantomJS
+    // - IE (only Windows)
+    browsers: ['Chrome', 'Firefox'],
+
+
+    // If browser does not capture in given timeout [ms], kill it
+    captureTimeout: 60000,
+
+
+    // Continuous Integration mode
+    // if true, it capture browsers, run tests and exit
+    singleRun: false
+
+
+  });
+};

test/select2Spec.js

@@ -331,12 +331,12 @@ describe('uiSelect2', function () {
 
     it('updated the view when model changes with complex object', function(){
       scope.foo = [{'id': '0', 'text': '0'}];
-      scope.options['multiple'] = true
+      scope.options['multiple'] = true;
       var element = compile('<input ng-model="foo" ui-select2="options">');
-      scope.$digest()
+      scope.$digest();
 
-      scope.foo.push({'id': '1', 'text': '1'})
-      scope.$digest()
+      scope.foo.push({'id': '1', 'text': '1'});
+      scope.$digest();
 
       expect(element.select2('data')).toEqual(
         [{'id': '0', 'text': '0'}, {'id': '1', 'text': '1'}]);
@@ -346,9 +346,9 @@ describe('uiSelect2', function () {
     describe('simple_tags', function() {
 
       beforeEach(function() {
-        scope.options['multiple'] = true
-        scope.options['simple_tags'] = true
-        scope.options['tags'] = []
+        scope.options['multiple'] = true;
+        scope.options['simple_tags'] = true;
+        scope.options['tags'] = [];
       });
 
       it('Initialize the select2 view based on list of strings.', function() {
@@ -399,7 +399,7 @@ describe('uiSelect2', function () {
         element.select2('data', [
           {'id':'tag1', 'text': 'tag1'},
           {'id':'tag2', 'text': 'tag2'}
-          ])
+        ]);
         element.trigger('change');
 
         expect(scope.foo).toEqual(['tag1', 'tag2']);