AngularJS - podstawowe testy z wtryskiem

Question

Tak więc jestem nowy w całym teście (byłem jednym z tych ludzi, którzy powiedzieli "powinienem pisać testy jednostkowe ...", ale nigdy w życiu tego nie robiłem: - p). Piszę teraz testy jednostkowe dla tego projektu. Używam testacular + Jasmine, z przeglądarką do kompilacji rzeczy. Nie miałem żadnych problemów, dopóki nie zacząłem próbować robić wiele rzeczy wtryskowych AngularJS.

W tej chwili po prostu próbuję wykonać test modelu ng, aby uzyskać więcej informacji na ten temat.

Mam plik testacular.conf który zawiera wszystko, co niezbędne:

files = [ 
    '../lib/jquery.js', 
    '../lib/angular.js', 
    './lib/jasmine.js', 
    './lib/angular-mocks.js', 
    JASMINE_ADAPTER, 
    './tests.js' //compiled by browserify 
]; 

mam zdefiniowaną mój kontroler (MainCtrl.coffee)

MainCtrl = ($scope, $rootScope) -> 
    $scope.hello = 'initial' 

module.exports = (angularModule) -> 
    angularModule.controller 'MainCtrl', ['$scope', '$rootScope', MainCtrl] 
    return MainCtrl 

I mam testu sama: (_MainCtrlTest. kawa, w tym samym katalogu co MainCtrl.coffee)

testModule = angular.module 'MainCtrlTest', [] 
MainCtrl = require('./MainCtrl')(testModule) 

describe 'MainCtrlTest', -> 
    scope = null 
    elm = null 
    ctrl = null 

    beforeEach inject ($rootScope, $compile, $controller) -> 
     scope = $rootScope.$new() 
     ctrl = $controller MainCtrl, $scope: scope 
     elm = $compile('<input ng-model="hello"/>')(scope) 

    describe 'value $scope.hello', -> 

     it 'should initially equal input value', -> 
      expect(elm.val()).toBe scope.hello 

     it 'should change when input value changes', -> 
      scope.$apply -> elm.val('changedValue') 
      expect(scope.hello).toBe elm.val() 

Test kończy się niepowodzeniem natychmiast, przy pomocy urządzenia ut's elm.val() zwraca puste, a scope.hello zwraca zamierzoną wartość ("initial", ustawiana w MainCtrl.coffee)

Co ja tu robię źle?

Answer 1

Aby uzyskać tej pracy, trzeba zrobić scope.$apply():

it 'should initially equal input value', -> 
    scope.$apply() 
    expect(elm.val()).toBe scope.hello 

Nie przetestować ramy, sprawdzić kod

test próbuje sprawdzić, czy kątowe wiązanie i ng-model Prace. Powinieneś raczej zaufać środowisku i przetestować swój kod.

Kod jest:

1. kontroler (ustawienie wartości początkowej scope.hello)
2. szablony HTML (i wszystkie wiążące, dyrektyw tam)

można przetestować pierwszy bardzo łatwo, nie dotykając nawet DOM. To piękno AngularJS - silne oddzielenie widoku/logiki.

W tym sterowniku, nie ma prawie nic, aby przetestować, ale wartość początkowa:

it 'should init hello', -> 
    expect(scope.hello).toBe 'initial' 

Aby przetestować druga (szablon + wiązania), chcesz zrobić test e2e. Zasadniczo chcesz przetestować, czy szablon nie zawiera żadnych literówek w wiązaniach itp. Więc chcesz przetestować prawdziwy szablon. Jeśli podczas testu wstawisz inny html, testujesz tylko AngularJS.