unit-testing - AngularJS - 基本的注入(inject)测试

Question

所以我是整个测试的新手(我曾经是那些说过“我应该编写单元测试......”但从未最终做到这一点的人之一:-p)。我现在正在为这个项目编写单元测试。我正在使用 testacular + Jasmine 和 browserify 来编译东西。在我开始尝试做很多 AngularJS 注入(inject)之前，我一直没有遇到任何问题。

现在我只是想对 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
];

我定义了我的 Controller (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 中设置)

我在这里做错了什么？

Answer 1

要让它正常工作，您需要执行 scope.$apply():

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

不要测试框架，测试你的代码

您的测试试图测试 Angular 的绑定(bind)和 ng-model 是否有效。您应该更信任该框架并测试您的代码。

您的代码是:

1. Controller (设置初始 scope.hello 值)
2. html 模板(以及其中的所有绑定(bind)和指令)

您可以非常轻松地测试第一个，甚至无需接触任何 DOM。这就是 AngularJS 的美妙之处 - View /逻辑的强大分离。

在这个 Controller 中，几乎没有什么要测试的，只有初始值:

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

要测试第二个(模板+绑定(bind))，您需要进行端到端测试。您基本上想要测试模板是否不包含任何绑定(bind)等拼写错误......所以您想测试真正的模板。如果您在测试期间内联不同的 html，那么您测试的只是 AngularJS。