Merge pull request angular-ui#81 from kadamwhite/tooling-upgrades

Add a Gruntfile & update Karma configuration

Author: ProLoser

.gitignore

@@ -1,2 +1,2 @@
 node_modules
-components
+bower_components

.jshintrc

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

.travis.yml

@@ -1,11 +1,13 @@
  language: node_js
  node_js:
    - "0.8"
+   - "0.10"
 
  before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
-  - npm install -g [email protected] bower
+  - npm install -g karma bower grunt-cli
   - bower install
+  - npm install
 
- script: "testacular start test/test.conf.js --browsers=Firefox,PhantomJS"
+ script: "grunt"

Gruntfile.js

@@ -0,0 +1,53 @@
+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: {
+      test: {
+        // 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:unit:run']
+      }
+    },
+    karma: {
+      options: {
+        configFile: 'test/karma.conf.js'
+      },
+      unit: {
+        singleRun: true,
+        browsers: ['Firefox', '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.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
+This will lint and test the code, then exit. To have Grunt stay open and automatically lint and test your files whenever you make a code change, use:
 
-```javascript
-dependencies: {
-    "angular-ui-select2": "latest"
-}
-```
+`$ grunt karma:server watch`
+
+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
+
+
+  });
+};