testing directives with inputs

[Paolo Milani Comparetti]

Hi,

I've been following voltajina's very good advice on testing directives from here:

https://github.com/vojtajina/ng-directive-testing

I am able to test my directive: clicking on buttons with jquery inside my jasmine test has the expected result.

However, when I use jquery to update an input field that is bound to an angular variable, nothing happens. Not sure if I should call $apply, but in any case it makes no difference.

Here is a snippet of what I am doing:

var the_input=elem.find("tfoot input");
        expect(the_input.length).toBe(1);
        expect(the_input.val()).toBe('2');
        the_input.val('10');
        expect(the_input.val()).toBe('10');

[Pawel Kozlowski]

HI!

On Wed, Feb 6, 2013 at 7:32 PM, Paolo Milani Comparetti
<j.s.se...@gmail.com> wrote:
> owever, when I use jquery to update an input field that is bound to an
> angular variable, nothing happens. Not sure if I should call $apply, but in
> any case it makes no difference.

You need to trigger DOM event that AngularJS is listening to (input or change).
Here is a simple utility method to change input's value the way that
AngularJS can "see" them (working test from the typeahead directive
for bootstrap - WIP):
https://github.com/angular-ui/bootstrap/blob/typeahead_wip/src/typeahead/test/typeahead.spec.js#L13

Hope this helps,
Pawel
--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Paolo Milani Comparetti]

sorry, I fumbled some hotkey and my browser posted this before I was done: let me finish.

elem is the compiled angular element that has my directive. This does not work:

        var the_input=elem.find("..selector for my input...");

        expect(the_input.length).toBe(1);
        expect(the_input.val()).toBe('2');
        the_input.val('10');
        expect(the_input.val()).toBe('10');

        elem.scope().$apply()
        //all good up to here, but looking at the DOM the change has not been applied

This, on the other hand works:

       elem.scope().the_variable=10;
       elem.scope().$apply()
       //all good, change has been applied to DOM

Note that the_variable and the_input are bound together. Here is the input element:

       <input type="number"
            name="the_variable"
            ng-model="lltable.display_rows"
            max="1000"
            min="1"
            class="input-small"
            ng-change="current_page=0">

This works fine in the browser, my only problem is with the test.

Any ideas for what could be wrong?

thanks
Paolo

[Paolo Milani Comparetti]

Pawel,

You need to trigger DOM event that AngularJS is listening to (input or change).
Here is a simple utility method to change input's value the way that
AngularJS can "see" them (working test from the typeahead directive
for bootstrap - WIP):
https://github.com/angular-ui/bootstrap/blob/typeahead_wip/src/typeahead/test/typeahead.spec.js#L13

that's a new record, got an answer to my question before I was finished writing it...

thanks a lot, i'll try this right away.

Paolo

[Paolo Milani Comparetti]

Hi,

This works.

Is there any documentation on $sniffer? the api docs page is completely empty:

http://docs.angularjs.org/api/ng.$sniffer

thanks
Paolo

[Pawel Kozlowski]

Hi!

On Wed, Feb 6, 2013 at 7:48 PM, Paolo Milani Comparetti
<j.s.se...@gmail.com> wrote:
> Is there any documentation on $sniffer?

Nope, this is internal API. It shouldn't be documented as it is not
meant to be maintained (backward-compatibility etc.).
It is to be used inside framework and unit tests.

You can always have a look at the source though:
https://github.com/angular/angular.js/blob/master/src/ng/sniffer.js

Cheers,

[Paolo Milani Comparetti]

Pawel,

On Wednesday, 6 February 2013 10:52:47 UTC-8, Pawel Kozlowski wrote:

Hi!

On Wed, Feb 6, 2013 at 7:48 PM, Paolo Milani Comparetti
<j.s.se...@gmail.com> wrote:
> Is there any documentation on $sniffer?

Nope, this is internal API. It shouldn't be documented as it is not
meant to be maintained (backward-compatibility etc.).
It is to be used inside framework and unit tests.

You can always have a look at the source though:
https://github.com/angular/angular.js/blob/master/src/ng/sniffer.js

Ok, that's clear enough.

ciao,
Paolo