编辑：在ember-cli中使用

Question

尝试为我的ember控制器编写单元测试。它只是更改一个属性，然后打开一个bootstrap模式。难以弄清楚如何测试模态实际上是打开的。不确定这是否属于单元测试或集成测试。如果它不在我的单元测试中，那么似乎很难在以后确定代码覆盖率。 Bootstrap版本：3.3.1，ember-cli版本0.1.5，节点0.10.33。这是我试过无用的：

1

test('loginClick() opens modal', function(){
  var controller = this.subject();
  $('#login-modal').on('show.bs.modal', function(){
    equal(true, true, "the show.bs.modal event fired");
  });

  controller.send('loginClick', 'anything');
});

没有断言错误

2

test('loginClick() opens modal', function(){
  var controller = this.subject();
  andThen(function(){
    controller.send('loginClick', 'anything');
    stop();

    Ember.run.later(function(){
        start();
        equal($('#login-modal').hasClass('in'), true, "has the 'in' class");
    }, 500);
  });
});

然后没有定义

这是控制器：

loginClick: function(param){
  this.set('provider', param);//facebook or google

  $('#login-modal')
    .modal();
}

对于如何测试此类事物的任何其他建议或最佳实践将不胜感激。

P.S。还尝试在点击前添加此内容：

$.support.transition = false;

根据某人的建议，但它不会禁用模态转换。

Answer 1

我遇到了同样的问题。我不确定这是最好的解决方案，但我通过在调用App.injectTestHelpers（）之前注册异步测试助手来解决它：

Ember.Test.registerAsyncHelper 'waitForModalOpen', (app, modal) ->
  # If using QUnit < 1.16, you need to add stop().
  #stop()
  Ember.Test.promise (resolve, reject) ->
    modal.on 'shown.bs.modal', ->
      resolve()
      # If using QUnit < 1.16, you need to add start().
      #start()

然后在单击按钮之后和断言之前调用它：

modal = find '#testModal'
click '#openModal'
waitForModalOpen modal
andThen ->
  strictEqual modal.attr('aria-hidden'), 'false', 'modal should be visible'
  strictEqual modal.hasClass('in'), true, 'modal should have .in class'

这是JS Bin testcase。 QUnit 1.16支持从测试中返回promises，因此在这个版本中，不再需要调用stop（）和start（）：QUnit将等待andThen（）承诺解析。

编辑：在ember-cli中使用

ember-cli文档中有一节关于writing your own test helpers。

将帮助器创建为/tests/helpers/wait-for-modal-open.js：

import Ember from "ember";

export default Ember.Test.registerAsyncHelper('waitForModalOpen', function(app, modal) {
  return Ember.Test.promise(function(resolve, reject) {
    return modal.on('shown.bs.modal', function() {
      return resolve();
    });
  });
});

然后，在/tests/helpers/start-app.js：

中添加此行

import waitForModalOpen from './wait-for-modal-open';

您还必须在"waitForModalOpen"中的"predef"数组中添加/tests/.jshintrc以避免JSHint错误。

最后，将测试创建为/tests/integration中的文件：

import Ember from "ember";
import { test } from 'ember-qunit';
import startApp from '../helpers/start-app';
var App;

module('Bootstrap Modal Open', {
  setup: function() {
    App = startApp();
    return visit('/');
  },
  teardown: function() {
    Ember.run(App, App.destroy);
  }
});

test('clicking the button should open a modal', function() {
  var modal;
  modal = find('#testModal');
  click('#openModal');
  waitForModalOpen(modal);
  return andThen(function() {
    strictEqual(modal.attr('aria-hidden'), 'false', 'modal should be visible');
    return strictEqual(modal.hasClass('in'), true, 'modal should have .in class');
  });
});

Answer 2

另一个通用解决方案是创建一个异步帮助器waitUntil，等待html选择出现。

Ember.Test.registerAsyncHelper('waitUntil', function(app, selector, callback) {

  var waiter = function() {
    return $(selector).length > 0;
  };

  Ember.Test.registerWaiter(waiter);
  var promise = app.testHelpers.wait();

  promise.then(function() {
    Ember.Test.unregisterWaiter(waiter);
  });

  // it will be resolved when the pending events have been processed
  // (routing loads, ajax requests, run loops and waiters)
  return promise;
});

然后，waitUntil可以与其他异步助手一起使用：

waitUntil('#my-button');
click('#my-button');

或在任何同步助手之前：

waitUntil('#my-modal.modal').then(function() {
  var el = find('#my-modal.modal');
  assert.ok(el.length > 0, 'modal was open');

  ....
});

此示例显示registerWaiter和registerAsyncHelper可以结合使用来解决类似的用例。

ember-cli单元测试 - 控制器打开bootstrap模态

2 个答案:

编辑：在ember-cli中使用