5

だから私はテスト全体に不慣れです（私は「ユニットテストを書くべきだ...」と言ったが、それをやったことがない人の1人でした:-p)。現在、このプロジェクトの単体テストを書いています。私は testacular + Jasmine を使用しており、browserify を使用してコンパイルしています。AngularJS のインジェクションをたくさんやろうとするまでは、何の問題もありませんでした。

今、私は単に ng-model のテストを行って、すべてを把握しようとしています。

必要なものがすべて含まれている testacular.conf ファイルがあります。

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

コントローラーを定義しました (MainCtrl.coffee)

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

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

そして、私は自分のテスト自体を持っています：（_MainCtrlTest.coffee、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()

テストはすぐに失敗し、入力の elm.val() が空白を返し、scope.hello が意図した値 ('initial'、MainCtrl.coffee で設定) を返します。

ここで何が間違っていますか？

4

1 に答える 1

10

これを機能させるには、次のことを行う必要がありますscope.$apply()。

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

フレームワークをテストせず、コードをテストします

あなたのテストは、Angularのバインディングが機能するかどうかをテストしようとしてng-modelいます。代わりに、フレームワークを信頼してコードをテストする必要があります。

あなたのコードは：

  1. コントローラ（初期scope.hello値設定）
  2. htmlテンプレート（およびそこにあるすべてのバインディング、ディレクティブ）

DOMに触れることなく、最初のものを非常に簡単にテストできます。それがAngularJSの美しさです-ビュー/ロジックの強力な分離。

このコントローラーでは、テストするものはほとんどありませんが、初期値は次のとおりです。

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

2番目（テンプレート+バインディング）をテストするには、e2eテストを実行します。基本的に、テンプレートにバインディングなどのタイプミスが含まれていないかどうかをテストする必要があります。したがって、実際のテンプレートをテストします。テスト中に別のhtmlをインライン化すると、AngularJSだけがテストされます。

于 2012-05-27T18:19:38.067 に答える