Setup initial test using ngHtml2JsPreprocessor

Author: dimirc

bower.json

@@ -16,8 +16,8 @@
     "tests"
   ],
   "dependencies": {
-    "angular": "~1.0.8",
-    "angular-mocks": "~1.0.8",
+    "angular": "~1.2.0",
+    "angular-mocks": "~1.2.0",
     "jquery": "~2.0.3"
   }
 }

karma.conf.js

@@ -14,11 +14,13 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'bower_components/jquery/jquery.js',
       'bower_components/angular/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
-      'select.js',
-      'test/**/*.spec.js'
+      'bower_components/jquery/jquery.js',
+
+      'src/select.js',
+      'test/**/*.spec.js',
+      '**/*.tpl.html'
     ],
 
 
@@ -27,6 +29,14 @@ module.exports = function(config) {
 
     ],
 
+    preprocessors: {
+      '**/*.tpl.html': ['ng-html2js']
+    },
+
+    ngHtml2JsPreprocessor: {
+      // stripPrefix: 'public/',
+      prependPrefix: '../'
+    },
 
     // test results reporter to use
     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'

package.json

@@ -16,7 +16,8 @@
     "karma": "~0.10.4",
     "grunt": "~0.4.1",
     "grunt-karma": "~0.6.2",
-    "bower": "~1.2.7"
+    "bower": "~1.2.7",
+    "karma-ng-html2js-preprocessor": "~0.1.0"
   },
   "scripts": {
     "test": "grunt test"

test/select.spec.js

@@ -1,5 +1,63 @@
-describe('select', function() {
-  it('', function() {
-  });
-});
+describe('ui-select tests', function() {
 
+    var scope, $rootScope, $compile;
+
+    beforeEach(module('ui.select'));
+    beforeEach(module('../src/select2/choices.tpl.html'));
+    beforeEach(module('../src/select2/match.tpl.html'));
+    beforeEach(module('../src/select2/select.tpl.html'));
+    beforeEach(inject(function(_$rootScope_, _$compile_) {
+        $rootScope = _$rootScope_;
+        scope = $rootScope.$new();
+        $compile = _$compile_;
+        scope.matches = [
+          {"id": 1, "name": "Wladimir Coka", "email": "[email protected]" },
+          {"id": 2, "name": "Samantha Smith", "email": "[email protected]" },
+          {"id": 3, "name": "Estefanía Smith", "email": "[email protected]" },
+          {"id": 4, "name": "Natasha Jones", "email": "[email protected]" },
+          {"id": 5, "name": "Nicole Smith", "email": "[email protected]" }
+        ];
+    }));
+
+    //Utility functions
+    var prepareUiSelectEl = function(inputTpl) {
+        var el = $compile(angular.element(inputTpl))(scope);
+        scope.$digest();
+        return el;
+    };
+
+    var uiSelectElInstance1 = function(inputTpl) {
+      var element = prepareUiSelectEl(
+        '<ui-select ng-model="selection" style="width:300px"> \
+          <match placeholder="Pick one...">{{$select.selected.name}}</match> \
+          <choices data="matches | filter : $select.search"> \
+              <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div> \
+              <div> {{item.email}} </div> \
+          </choices> \
+        </ui-select> \
+        ');
+        return element;
+    };
+
+    it('should compile basic ui-select-* elements ', function() {
+
+        var el = uiSelectElInstance1();
+
+        var searchEl = $(el).find('.ui-select-search');
+        expect(searchEl.length).toEqual(1);
+
+        var matchEl = $(el).find('.ui-select-match');
+        expect(matchEl.length).toEqual(1);
+
+        var choicesContentEl = $(el).find('.ui-select-choices-content');
+        expect(choicesContentEl.length).toEqual(1);
+
+        var choicesContainerEl = $(el).find('.ui-select-choices');
+        expect(choicesContainerEl.length).toEqual(1);
+
+        var choicesElems = $(el).find('.ui-select-choices-row');
+        expect(choicesElems.length).toEqual(5);
+
+    });
+
+});