Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

Commit

Permalink
chore: Add Gruntfile, update Karma configuration & fix JSHint errors
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
kadamwhite committed Sep 17, 2013
1 parent 487f35a commit c322455
Show file tree
Hide file tree
Showing 8 changed files with 215 additions and 80 deletions.
11 changes: 11 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"curly": true,
"eqeqeq": true,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"sub": true,
"boss": true,
"eqnull": true
}
56 changes: 56 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -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);
};
44 changes: 23 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
13 changes: 10 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
}
}
48 changes: 27 additions & 21 deletions src/select2.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand All @@ -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;
}
Expand All @@ -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
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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)
Expand All @@ -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')));
Expand Down Expand Up @@ -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'))
);
}
});
};
}
Expand Down
80 changes: 80 additions & 0 deletions test/karma.conf.js
Original file line number Diff line number Diff line change
@@ -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


});
};
16 changes: 8 additions & 8 deletions test/select2Spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'}]);
Expand All @@ -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() {
Expand Down Expand Up @@ -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']);
Expand Down
Loading

0 comments on commit c322455

Please sign in to comment.