Wie unit-Tests eine dropdown-Liste in Jasmin/Angularjs
Ich versuche, unit-test eine Richtlinie, die macht eine dropdown-Liste mit einigen JSON, geben Sie die details für die Liste. Die Richtlinie funktioniert, aber ich habe Probleme beim Versuch das Gerät zu testen.
Hier ist der test:
/* global inject, expect, angular */
define(function(require){
'use strict';
require('angular');
require('angularMock');
require('reporting/js/directives/app.directives');
require('reporting/js/directives/drop.down.field.directive');
describe("drop down field", function() {
//debugger;
var directive, scope;
beforeEach(module('app.directives'));
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope;
scope.dropDownResponses = {};
scope.dropDownField = {
"name": "Test Drop Down",
"type": "dropdown",
"hidden": "false",
"defaultValue": "None",
"values": [
{
"key": "1",
"value": "FL",
"select": "true"
},
{
"key": "2",
"value": "GA",
"select": "false"
},
{
"key": "3",
"value": "TX",
"select": "false"
}
],
"validation": null
};
directive = angular.element('<div drop-down-field="dropDownField" drop-down-responses="dropDownResponses"></div>');
$compile(directive)(scope);
scope.$digest();
}));
it("should build three dropdown choices", function() {
expect(directive.find('option').length).toBe(4);
});
it('should have one dropdown', function() {
expect(directive.find("select").length).toBe(1);
});
it('should update the model when a new choice is selected', function() {
angular.element(directive.find("select")[0]).val('1');
angular.element(directive.find("select")[0]).change();
expect(scope.dropDownResponses[scope.dropDownField.name]).toBe("1");
});
});
});
Ist hier die Richtlinie:
define(function(require) {
'use strict';
var module = require('reporting/js/directives/app.directives');
var template = require('text!reporting/templates/drop.down.field.tpl');
module.directive('dropDownField', function () {
return {
restrict: 'A',
replace: true,
template:template,
scope: {
dropDownField : "=",
dropDownResponses : "="
}
};
});
return module;
});
Hier ist das markup:
<div>
{{dropDownField.name}}
<select ng-model="dropDownResponses[dropDownField.name]" ng-options="value.key as value.value for value in dropDownField.values"></select>
</div>
Den letzten, die es blockieren, das ist, was hier Sorge. Wenn ich Feuer das change-Ereignis der Wert auf dem Modell landet als man mehr erwartet. Zum Beispiel, ist der Wert gespeichert, im Rahmen.dropDownResponses in diesem Fall landet als 2.
Irgendwelche Ideen?
- Es ist wirklich schwer zu helfen ohne zu sehen, die eigentlichen Richtlinie.
- Ok, sorry, ich habe aktualisiert die Frage mit mehr info.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Seinem kommen auf diese Fragen ersten Geburtstag und ich fand es faszinierend, warum der test ist nicht vorbei.
Ich zu dem Schluss gekommen, dass die Prämisse der test ist falsch, wie der test
sollte
Der Grund dafür ist, dass der gespeicherte Wert im Bereich.dropDownResponses ist in der Tat 2 als Fragesteller gefunden.
Wenn Sie die Auswahl von val('1') wählen Sie die zweite option im select-element
widerspiegelt, das zweite Element im array in der spec
Können Sie dies in Aktion zu sehen in diesem jsfiddle, wo die Konsole.log-Ausgabe
ist