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.
InformationsquelleAutor Dane | 2014-03-03
Schreibe einen Kommentar