Review Choice field directive tests

src/javascripts/ng-admin/Crud/field/maChoiceField.js

@@ -1,50 +1,51 @@
-/*global define*/
-
-define(function (require) {
-    'use strict';
-
-    /**
-     * Edition field for an element in a list - a select.
-     *
-     * @example <ma-choice-field entry="entry" field="field" value="value"></ma-choice-field>
-     */
-    function maChoiceField() {
-        return {
-            scope: {
-                'field': '&',
-                'value': '=',
-                'entry':  '=?',
-                'datastore': '&?'
-            },
-            restrict: 'E',
-            link: function(scope, element) {
-                var field = scope.field();
-                scope.name = field.name();
-                scope.v = field.validation();
-                var choices;
-                if (field.type() === 'reference' || field.type() === 'reference_many') {
-                    choices = scope.datastore().getChoices(field);
-                } else {
-                    choices = field.choices();
-                }
-                scope.getChoices = typeof(choices) === 'function' ? choices : function() { return choices; };
-                var select = element.children()[0];
-                var attributes = field.attributes();
-                for (var name in Object.keys(attributes)) {
-                    select[name] = attributes[name];
-                }
-            },
-            template: `
-                <ui-select ng-model="$parent.value" ng-required="v.required" id="{{ name }}" name="{{ name }}">
-                    <ui-select-match placeholder="Filter values">{{ $select.selected.label }}</ui-select-match>
-                    <ui-select-choices repeat="item.value as item in getChoices(entry) | filter: {label: $select.search}">
-                        {{ item.label }}
-                    </ui-select-choices>
-                </ui-select>`
-        };
-    }
-
-    maChoiceField.$inject = [];
-
-    return maChoiceField;
-});
+function maChoiceField($compile) {
+    return {
+        scope: {
+            'field': '&',
+            'value': '=',
+            'entry':  '=?',
+            'datastore': '&?'
+        },
+        restrict: 'E',
+        compile: function() {
+            return {
+                pre: function(scope, element) {
+                    var template = `
+                        <ui-select ng-model="$parent.value" ng-required="v.required" id="{{ name }}" name="{{ name }}">
+                            <ui-select-match placeholder="Filter values">{{ $select.selected.label }}</ui-select-match>
+                            <ui-select-choices repeat="item.value as item in getChoices(entry) | filter: {label: $select.search}">
+                                {{ item.label }}
+                            </ui-select-choices>
+                        </ui-select>`;
+
+                    var field = scope.field();
+                    scope.name = field.name();
+                    scope.v = field.validation();
+
+                    var choices;
+                    if (field.type() === 'reference' || field.type() === 'reference_many') {
+                        choices = scope.datastore().getChoices(field);
+                    } else {
+                        choices = field.choices();
+                    }
+                    scope.getChoices = typeof(choices) === 'function' ? choices : function() { return choices; };
+                    element.html(template);
+
+                    var select = element.children()[0];
+                    var attributes = field.attributes();
+                    for (var name in attributes) {
+                        select.setAttribute(name, attributes[name]);
+                    }
+
+                    $compile(element.contents())(scope);
+                },
+
+            };
+        }
+    };
+}
+
+maChoiceField.$inject = ['$compile'];
+
+module.exports = maChoiceField;
+

src/javascripts/ng-admin/Crud/fieldView/ChoiceFieldView.js

@@ -1,22 +1,14 @@
-define(function(require) {
-    "use strict";
-
-    function getReadWidget() {
+module.exports = {
+    getReadWidget: function() {
         return '<ma-string-column value="::field.getLabelForChoice(entry.values[field.name()], entry)"></ma-string-column>';
-    }
-    function getLinkWidget() {
-        return '<a ng-click="gotoDetail()">' + getReadWidget() + '</a>';
-    }
-    function getFilterWidget() {
+    },
+    getLinkWidget: function() {
+        '<a ng-click="gotoDetail()">' + getReadWidget() + '</a>'
+    },
+    getFilterWidget: function() {
         return '<ma-choice-field field="::field" value="values[field.name()]"></ma-choice-field>';
-    }
-    function getWriteWidget() {
+    },
+    getWriteWidget: function() {
         return '<ma-choice-field field="::field" entry="entry" value="entry.values[field.name()]"></ma-choice-field>';
     }
-    return {
-        getReadWidget:   getReadWidget,
-        getLinkWidget:   getLinkWidget,
-        getFilterWidget: getFilterWidget,
-        getWriteWidget:  getWriteWidget,
-    }
-});
+};

src/javascripts/test/karma.conf.js

@@ -16,6 +16,7 @@ module.exports = function (config) {
             '../../node_modules/angular-mocks/angular-mocks.js',
             '../../node_modules/angular-numeraljs/dist/angular-numeraljs.min.js',
             '../../node_modules/numeral/numeral.js',
+            '../../node_modules/ui-select/dist/select.js',
 
             'test/function.bind.shim.js',
             'test/unit/**/*.js'

src/javascripts/test/unit/Crud/field/maChoiceFieldSpec.js

@@ -1,11 +1,11 @@
 /*global angular,inject,describe,it,expect,beforeEach*/
-describe('directive: choice-field', function () {
+fdescribe('directive: choice-field', function () {
     'use strict';
 
     var directive = require('../../../../ng-admin/Crud/field/maChoiceField');
     var ChoiceField = require('admin-config/lib/Field/ChoiceField');
 
-    angular.module('testapp_ChoiceField', []).directive('maChoiceField', directive);
+    angular.module('testapp_ChoiceField', ['ui.select']).directive('maChoiceField', directive);
 
     var $compile,
         scope,
@@ -18,86 +18,72 @@ describe('directive: choice-field', function () {
         scope = _$rootScope_;
     }));
 
-    it("should contain a select tag", function () {
+    it("should contain a ui-select tag", function () {
         scope.field = new ChoiceField();
         var element = $compile(directiveUsage)(scope);
         scope.$digest();
-        expect(element.children()[0].nodeName).toBe('SELECT');
+
+        var uiSelect = element.children()[0];
+        expect(uiSelect.classList.contains('ui-select-container')).toBeTruthy();
     });
 
     it("should add any supplied attribute", function () {
         scope.field = new ChoiceField().attributes({ disabled: true });
         var element = $compile(directiveUsage)(scope);
         scope.$digest();
-        expect(element.children()[0].disabled).toBeTruthy();
+        expect(element.children()[0].getAttribute('disabled')).toBeTruthy();
     });
 
-    it("should provide an initial option for non-required fields", function () {
+    it("should contain the choices as options", function () {
         scope.field = new ChoiceField().choices([
-            {label: 'foo', value: 'bar'}
+            {label: 'foo', value: 'bar'},
+            {label: 'baz', value: 'bazValue'}
         ]);
-        var element = $compile(directiveUsage)(scope);
-        scope.$digest();
-        var options = element.find('option');
-        expect(options[0].innerHTML).toEqual('-- select a value --');
-        expect(options[0].value).toEqual('');
-    });
 
-    it("should provide an initial option for non-required fields", function () {
-        scope.field = new ChoiceField().choices([
-            {label: 'foo', value: 'bar'}
-        ]).validation({ required: true });
         var element = $compile(directiveUsage)(scope);
         scope.$digest();
-        var options = element.find('option');
-        expect(options[1].label).toEqual('foo');
-        expect(options[1].value).toEqual('0');
-    });
 
-    it("should contain the choices as options", function () {
-        scope.field = new ChoiceField().choices([
+        var uiSelect = angular.element(element.children()[0]).controller('uiSelect');
+        expect(angular.toJson(uiSelect.items)).toEqual(JSON.stringify([
             {label: 'foo', value: 'bar'},
             {label: 'baz', value: 'bazValue'}
-        ]);
-        scope.value = 'bar';
-        var element = $compile(directiveUsage)(scope);
-        scope.$digest();
-        var options = element.find('option');
-        expect(options[1].label).toEqual('foo');
-        expect(options[1].value).toEqual('0');
-        expect(options[2].label).toEqual('baz');
-        expect(options[2].value).toEqual('1');
+        ]));
     });
 
     it("should contain the choices from choicesFunc as options", function () {
         var choices = [
             {label: 'foo', value: 'bar'},
             {label: 'baz', value: 'bazValue'}
         ];
+
         scope.field = new ChoiceField().choices(function(entry){
             return choices;
         });
-        scope.value = 'bar';
+
         var element = $compile(directiveUsage)(scope);
         scope.$digest();
-        var options = element.find('option');
-        expect(options[1].label).toEqual('foo');
-        expect(options[1].value).toEqual('0');
-        expect(options[2].label).toEqual('baz');
-        expect(options[2].value).toEqual('1');
+
+        var uiSelect = angular.element(element.children()[0]).controller('uiSelect');
+        expect(angular.toJson(uiSelect.items)).toEqual(JSON.stringify([
+            {label: 'foo', value: 'bar'},
+            {label: 'baz', value: 'bazValue'}
+        ]));
     });
 
     it("should pass entry to choicesFunc", function () {
         var choices = [];
         var choicesFuncWasCalled = false;
+
         scope.entry = {moo: 'boo'};
         scope.field = new ChoiceField().choices(function(entry){
             expect(entry.moo).toEqual('boo');
             choicesFuncWasCalled = true;
             return choices;
         });
-        var element = $compile(directiveUsage)(scope);
+
+        $compile(directiveUsage)(scope);
         scope.$digest();
+
         expect(choicesFuncWasCalled).toBeTruthy();
     });
 
@@ -106,11 +92,16 @@ describe('directive: choice-field', function () {
             {label: 'foo', value: 'bar'},
             {label: 'baz', value: 'bazValue'}
         ]);
+
         scope.value = 'bazValue';
+
         var element = $compile(directiveUsage)(scope);
         scope.$digest();
-        var options = element.find('option');
-        expect(options[2].selected).toBeTruthy();
-        expect(options[2].value).toEqual('1');
+
+        var uiSelect = angular.element(element.children()[0]).controller('uiSelect');
+        expect(angular.toJson(uiSelect.selected)).toEqual(JSON.stringify({
+            label: 'baz',
+            value: 'bazValue'
+        }));
     });
 });