AngularJS - thử nghiệm cơ bản với tiêm

Question

Vì vậy, tôi mới cho toàn bộ thử nghiệm (Tôi đã là một trong những người đã nói 'Tôi nên viết đơn vị kiểm tra ...' nhưng không bao giờ kết thúc bao giờ làm điều đó: p). Tôi hiện đang viết các bài kiểm tra đơn vị cho dự án này. Tôi đang sử dụng testacular + Jasmine, với trình duyệt để biên dịch mọi thứ. Tôi đã không có vấn đề cho đến khi tôi bắt đầu cố gắng để làm rất nhiều công cụ tiêm AngularJS.

Ngay bây giờ tôi chỉ đơn giản là cố gắng làm một thử nghiệm của ng-mô hình để có được đầu của tôi xung quanh tất cả của nó.

Tôi có một tập tin testacular.conf trong đó bao gồm tất cả mọi thứ cần thiết:

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

Tôi đã điều khiển của tôi định nghĩa (MainCtrl.coffee)

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

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

Và tôi có thử nghiệm của tôi bản thân: (_MainCtrlTest. cà phê, trong cùng thư mục với 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() 

Kiểm tra không thành công ngay lập tức, với inp ut's elm.val() trở về trống, và scope.hello trả về giá trị dự định ('initial', được đặt trong MainCtrl.coffee)

Tôi đang làm gì sai ở đây?

Answer 1

Để làm việc này, bạn cần làm scope.$apply():

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

Đừng thử nghiệm khuôn khổ, kiểm tra mã của bạn

thử nghiệm của bạn đang cố gắng để kiểm tra xem góc của ràng buộc, và ng-model công trinh. Thay vào đó, bạn nên tin tưởng vào khung công tác và kiểm tra mã của mình.

Mã của bạn là:

1. bộ điều khiển (thiết lập ban đầu scope.hello giá trị)
2. mẫu html (và tất cả các ràng buộc, chỉ thị trong đó)

Bạn có thể kiểm tra đầu tiên rất dễ dàng, thậm chí không cần chạm vào bất kỳ DOM nào. Đó là vẻ đẹp của AngularJS - phân chia mạnh mẽ chế độ xem/logic.

Trong điều khiển này, hầu như không có gì để kiểm tra, nhưng giá trị ban đầu:

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

Để kiểm tra thứ hai (mẫu + ràng buộc), bạn muốn làm một bài kiểm tra E2E. Về cơ bản, bạn muốn thử nghiệm, cho dù mẫu không chứa bất kỳ lỗi chính tả nào trong ràng buộc, vv ... Vì vậy, bạn muốn kiểm tra mẫu thực. Nếu bạn nội tuyến một html khác trong khi thử nghiệm, bạn sẽ không thử nghiệm gì ngoài AngularJS.