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

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);
  });
});

andThen 未定义

这是控制器：

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 支持从测试中返回承诺，因此对于这个版本，不再需要调用 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';

您还必须在 /tests/.jshintrc 的 "predef" 数组中添加 "waitForModalOpen" 以避免 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 模态

ember-cli unit test - controller opens bootstrap modal

unit-testing

twitter-bootstrap

ember.js

ember-cli

ember-qunit

编辑：在 ember-cli