title: How to unit test a dropdown list in Jasmine/Angularjs
body: <p>I am trying to unit test a directive that makes a dropdown list using some JSON to specify the details of the list. The directive works fine, but I'm having issues while trying to unit test it.</p>
  
  <p>Here's the test:</p>
  
  <pre><code>/* 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('&lt;div drop-down-field="dropDownField" drop-down-responses="dropDownResponses"&gt;&lt;/div&gt;');
        $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");
      });
    });
  });
  </code></pre>
  
  <p>Here's the directive:</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div&gt;
    {{dropDownField.name}}
    &lt;select ng-model="dropDownResponses[dropDownField.name]" ng-options="value.key as value.value for value in dropDownField.values"&gt;&lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The last it block is what is of concern here. When I fire the change event, the value on the model always winds up being one more that expected. For instance, the value stored in scope.dropDownResponses in this case winds up being 2.</p>
  
  <p>Any ideas?</p>