4

我正在Jasmine我的网络应用程序中实施一些测试。我Coffeescript用来编写我的模型、服务和视图模型。

class MyViewModel
  constructor: ( @options ) ->
    @alert = new Alert
      elementId: 'my-alert-element-id'

    @service = new MyService
      alertId: @alert.elementId

现在我用茉莉花写一个测试

describe 'MyViewModel', ->
  sut = null

  beforeEach ->
    sut = new MyViewModel()

  afterEach ->
    sut = null

  describe 'constructor()', ->
    it 'creates a new instance of the ViewModel', ->
      expect( sut ).not.toBeNull()

alert所以这里的问题是service我的viewModel. 这使得测试的编写和维护很烦人。

是否有库用于 Javascript 中的依赖注入。我已经使用了几个.net库，例如castle windsor和ninject。

或者我应该只是采用某种类型的模式。我应该说我正在使用knockout，当我在实际应用程序中使用视图模型时，它看起来像这样。

<script type="text/javascript">

  $(function () {
    var viewModel = new MyViewModel();
    ko.applyBindings(viewModel);
  });

</script>

我不是创建自己的对象，而是向注入框架询问MyViewModel我假设的一个实例。

我正在寻找有关采用哪种模式或库的建议，以使我的测试更容易一些，并帮助我的 javascript 类彼此分离。

我发现的库：

  • Wire - 只有 ECMA 5+，我需要支持旧版浏览器
  • 第戎- 看起来不错，但我还没有尝试过。

编辑：我最终做了什么

  • 我采用了 RequireJs 并将我所有的对象移到 AMD 风格的模块中
  • 我使用 Jamine 运行测试
  • 我使用 Sinon 创建模拟和存根
  • 我使用 Squire 将模拟和存根注入我的测试系统

查看测试文件的咖啡脚本示例

define ['squire', 'sinon' ], ( squire, sinon ) ->
  describe '==== a view model ====', ->
    sut = null
    testContext = null

    beforeEach ->
      testContext =
        squireInjector: new squire
        stubService: sinon.stub()
        stubJquery: sinon.stub()
        someCallbackSpy: sinon.spy()

      testContext.squireInjector.mock( 
        'jquery', squire.Helpers.returns( stubJquery ) )

      testContext.squireInjector.require ['aViewModel'], ( viewModel ) =>
        sut = new viewModel
          service: testContext.stubService
          someCallback: testContext.someCallbackSpy

      waitsFor( -> sut? )

    afterEach ->
      sut = null
      testContext = null

    describe 'the constructor method should', ->
      it 'create a new instance of the view 
        model and have required dependencies', ->
        expect( sut ).toBeDefined
        expect( sut.service ).toBeDefined
        expect( sut.someCallback ).toBeDefined

    describe 'the next method should', ->
      it 'increment the route id by one', ->
        # Arrange
        sut.routeId = 5

        # Act
        sut.next()

        # Assert
        expect( sut.routeId ).toEqual( 6 )
        expect( testContext.someCallbackSpy.called ).toBe(true)
4

2 回答 2

2

有一个库为 Coffeescript 提供了非常相似的功能ninject， honk -di。这是一篇关于它的有用的文章。您的示例将变得更像这样：

class MyViewModel
  elementId:  inject('element.id') # Inject a constant
  alert:      inject(Alert)
  service:    inject(MyService)

  constructor: ->
    @alert.elementId = @elementId
    @service.alertId = @alert.elementId

然后，您的测试将像使用ninject、Guice或类似方法一样工作。您在模块/绑定器中描述您的测试对象，并在测试时简单地向注入器询问您的类。

describe 'MyViewModel', ->
  sut = null

  beforeEach ->
    # Assuming you've made mocks or simplified classes for
    # Alert and MyService which are set up in TestModule.
    # `element.id` will also need a definition.
    injector = new inject.Injector(new TestModule())
    sut = injector.getInstance(MyViewModel)

  afterEach ->
    sut = null

  describe 'constructor()', ->
    it 'creates a new instance of the ViewModel', ->
      expect( sut ).not.toBeNull()
于 2014-06-04T15:45:15.160 回答
1

您可以使用 requirejs，以及以下解决方案之一：

或者你只是模拟你的对象的原型。

jasmine.spy(Alert.prototype, 'someFunction')

顺便提一句。您可以使用 shim 将wire.js 与旧版浏览器一起使用。从文档：

为了支持非 ES5 旧版浏览器，wire.js 0.9.x 需要 poly 0.5.0 或更高版本。您可以克隆或下载 poly 到您的项目中，或通过 yeoman/bower 安装它：

于 2013-05-29T06:49:54.453 回答