Angular Unit Test - Click in directive not triggering

Question

Problem

I'm trying to click on a radio input with value="agency" from a directive template with the ultimate goal of changing the scope variable newDatasourceType.

Relevant Source

Directive template

  <div ng-if="!datasources" class="new-datasource">
        <input name="agencyOrWidget" type="radio" ng-model="newDatasourceType" value="agency" />
        <label>Agency</label>
        <input name="agencyOrWidget" type="radio" ng-model="newDatasourceType" value="widget" />
        <label>Widget</label>
        <select ng-if="newDatasourceType=='widget'" name="{{inputPrefix}}[0][widget_id]">
              <option>Choose a widget...</option>
              <option ng-repeat="(id, options) in widgetList" value="{{id}}">{{id}}</option>
        </select>
        <select ng-if="newDatasourceType=='agency'" name="{{inputPrefix}}[0][agency_id]">
              <option>Choose an agency...</option>            
              <option ng-repeat="(id, name) in agenciesList" value="{{id}}">{{name}}</option>
        </select>
  </div>

Relevant Unit Test

Parts that attempted and notes are in the comments.

it('Select Agencies', function() {
    // Running this to see if it does anything
    scope.newDatasourceType = 'agency';

    //create the element with the directive template
    elem = $compile(directive)(scope);
    scope.$digest();

    // Returns `1`
    console.log(elem.find('input[value="agency"]').length);

    // elem.find('input[value="agency"]').triggerHandler('click');
    elem.find('input[value="agency"]').click(function() {
        // Doesn't get triggered
        console.log('click');
    });

    // Didn't do anything...
    // scope.$digest();
    // scope.$apply();


    // console.log(elem.html());

    // Test items
    expect(elem.find('select option:nth-child(2)').val()).toBe(Object.keys(scope.agenciesJson)[0]);
});

What I'm Seeing

Regardless if I manually set newDatasourceType or try clicking on it, only the select block with Choose a widget... is visible.

nikita-graf · Accepted Answer · 2015-10-20 18:52:04Z

2

You have to change checked attribute on radiobutton in addition to triggering click event. Here is an example http://jsfiddle.net/k1axxs21/1/

answered Oct 20, 2015 at 18:52

nikita-graf

3962 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Mielke Over a year ago

That worked perfect. I wish I understood why trigger('click') worked, but neither triggerHandler('click') nor click() didn't work.

nikita-graf Over a year ago

All methods: trigger('click'), triggerHandler('click'), click() should work, expect click(function(){...}) since here you're adding a new handler instead of firing an event. The main idea here is to change checked propetry too since angular checks it on each click event at radiobutton and changes model state github.com/angular/angular.js/blob/master/src/ng/directive/…

Collectives™ on Stack Overflow

Angular Unit Test - Click in directive not triggering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related