Testando botões de opção AngularJS usando Karma e Jasmine

Lutei por meses em como acionar corretamente o evento certo para fazer o angular pegar um clique em um botão de rádio e atualizar o escopo de acordo.

Normalmente você tem algo como:

<input type="radio" 
       id="myPropertyTrue"
       name="myProperty"
       ng-value="true"
       ng-model="myModel.myProperty"/>
<input type="radio" 
       id="myPropertyFalse"
       name="myProperty"
       ng-value="false"
       ng-model="myModel.myProperty"/>

<div class="extraFormControls"
     ng-if="myProperty">
    ... dependent form controls ...
</div>

E você pensaria que em seu teste de Jasmim algo assim seria suficiente:

describe 'my page', ->
  describe 'when myProperty is true', ->
    beforeEach ->
      $('myPropertyTrue').click()
     it 'shows extra form controls', ->
       expect($('.extraFormControls')).toExist()

Mas não vai funcionar. O ng-if não é atualizado. Pode-se pensar que é devido ao escopo não estar atualizado, mas na verdade não é o caso. O problema é que o jQuery .click()não aciona o evento ‘click’.

Você deveria fazer:

beforeEach ->
  $('myPropertyTrue').click().trigger('click')

E isso funciona sempre. Espero que ajude, pois perdi quase 2 dias de trabalho procurando uma solução.

Tentei de tudo, desde um loop assíncrono clicando repetidamente no rádio para disparar o foco, desfoque, abaixamento do mouse, mouseup, mudança, entrada, selecionado, mas nada funcionou. Um pouco contra-intuitivo, mas uma vez que você tenha em sua caixa de ferramentas, certamente não é ciência de foguetes.

Siga-me no twitter: @alexmreis