如何在Ember CLI中为视图创建单元测试以呈现视图(如组件的测试)

时间:2014-12-11 10:09:39

标签: unit-testing ember.js ember-cli

我无法在Google中找到一个用于在Ember CLI中进行视图单元测试的示例,该视图会呈现视图(不会呈现所有应用)。

我想要在didInserElement hook内注册的测试事件。

对于组件,我可以很容易地找到文档。要使用moduleForComponent进行测试,只需执行以下操作:

test("component test", function(){
  var component = this.subject(),
  element = this.append();
  ok(element.is('.clickable'), 'has the clickable class');
});

但我如何为观点做这件事?

1 个答案:

答案 0 :(得分:2)

我用这种方式只渲染单元测试中的视图:

需要注意的一件重要事情是,您需要明确needs所有模板,部分和助手。否则,由于查找错误,测试将失败。

tests/unit/views/main-test.js

import Ember from 'ember';
import { test, moduleFor } from 'ember-qunit';

var view;

moduleFor('view:main', 'MainView', {
  needs: ['template:main'], // won't find the 'main' template without this
  setup: function() {
    var controller = Ember.ObjectController.extend({
      //mockController if needs
    }).create();
    view = this.subject({
      controller: controller,
      templateName: 'main',
    });
    Ember.run(function() {
      view.appendTo('#ember-testing');
    });
  },
  teardown: function() {
    Ember.run(function() {
      view.destroy();
    });
  },
});

test("didInsertElement", function(){
  var element = Ember.$('.main');
  var controller = view.get('controller');

  var eventForPressCtrlAltM = Ember.$.Event( "keydown", { which: 77, altKey: true, ctrlKey: true } );

  Ember.run(function() {
    element.trigger(eventForPressCtrlAltM);
  });
  strictEqual(/* ... */);
});