Testing dynamically named inputs inside ng-repeat using $setViewValue()

[bnppl]

Hi!
I cross posted this in stack overflow - I hope that isn't bad manners.

I am trying to test a directive that dynamically adds form inputs to a page using ng-repeat. The code runs fine in the browser but trying to test it with Jasmine I discovered what seems (to me) to be a bug or at least weird behaviour in Angular.

I'd expect to be able to set the view value on an input using

form.questions.answer1.$setViewValue();
but in my tests when I console log the form.questions object I get this:

form.questions.answer{{ question.questionId }}
i.e. The index of the object hasn't been parsed (although the html is output correctly).

Is there any other way of triggering the ng-change event? I have tried setting the value of the input using jQuery (inside my test) but although it successfully changes the value it doesn't fire off the ng-change event.

plunker (check the contents of your console to see what I mean.).

My code:

app.directive('repeatedInputs', function(){
  var template ='<div  ng-form name="questions">'+
  '<div ng-repeat="(key, question) in questions" >' +                                                   
    '<span id="question{{ question.questionId }}">{{ question.questionText }}</span>'+
    '<span><input type="text" name="answer{{ question.questionId }}"' +
     ' id="answer{{question.questionId}}"' +                                                                  
    '  ng-model="question.answer" ng-change="change()"/></span>' +
  '</div>' +
  '</div>';

  return {                                                                                                                             
      template: template,
      scope: {
        answers: '=',
        singleAnswer: '='
      },

      /**                                                                                                                                
       * Links the directive to the view.                                                                                                
       *                                                                                                                                 
       * @param {object} scope                                                                                                           
       * Reference to the directive scope.                                                                                               
       *                                                                                                                                 
       * @param {object} elm                                                                                                             
       * Reference to the directive element.                                                                                             
       */                                                                                                                                
      link: function (scope, element) {                                                                                                  

        scope.questions = [
          {
            questionId: '1',
            questionText: 'What is your name?',
            answer: null
          },
          { 
            questionId: '2',
            questionText: 'What is your quest?',
            answer: null
          },
          { 
            questionId: '3',
            questionText: 'What is your favourite colour?',
            answer: null
          }
        ];

        scope.change = function () {
          for (var i in scope.questions) {
            scope.answers[i] = scope.questions[i].answer;
          }
        };
      }
   };
});

Here is my spec file:

describe('repeating inputs directive', function () {                           

  var element, scope, $compile;                                                                     

  beforeEach(function(){
    module('plunker');
    inject(function ($rootScope, _$compile_) {                   

      scope = $rootScope.$new();                                                  
      scope.theAnswers = [];
      scope.singleAnswer = null;

      element = angular.element(                                                  
        '<form name="form">'
        +'<div repeated-inputs answers="theAnswers" single-answer="singleAnswer">'
        +'</div></form>'                 
      );                                                                          
      $compile = _$compile_;
      $compile(element)(scope);
      scope.$apply();
    })
  });

  it('should store the input from the answers in the parent scope',             
      function () {                                                             

    // I want to do this
    //scope.form.questions.answer1.$setViewValue('Ben');

    // but inside the object, the answers name field is not being parsed
    // I am expecting the path to the answer to look like this:
    // scope.form.questions.answer1
    // instead it looks like this:
    // scope.form.questions.answer{{ question.questionId }}
    console.log(scope.form.questions);

    expect(scope.theAnswers[0]).toEqual('Ben');

  }); 
});  

[caitp]

Interpolated names (for ngModel) are not currently supported. I have a patch to add this which awaits review, but it's a pretty simple change that should solve these problems for people.

[bnppl]

Thanks for the advice! Do you know if there is another way of triggering the ng-change event on the input other than using $setViewValue() on the form?

[caitp]

ng-change is triggered by a function added to the $viewChangeListeners property of the ngModelController --- these are only called during $setViewValue(), I'm afraid.

[bnppl]

OK thanks! I'll try re-factor it to make it testable some other way!