0

尝试为我的 ember 控制器编写单元测试。它只是更改一个属性，然后打开一个引导模式。很难弄清楚如何测试模态是否实际打开。不确定这是否属于单元测试或集成测试。如果它不在我的单元测试中，那么以后似乎很难确定代码覆盖率。引导版本：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();
}

关于如何测试这种东西的任何其他建议或最佳实践将不胜感激。

ps还尝试在点击之前添加这个：

$.support.transition = false;

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

4

2 回答 2

4

我有同样的问题。我不确定这是最好的解决方案，但我通过在调用 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 测试用例。QUnit 1.16 支持从测试返回承诺，因此在这个版本中，不再需要调用 stop() 和 start()：QUnit 将等待 andThen() 承诺解决。

编辑：在 ember-cli 中使用

ember-cli 文档有一个关于编写你自己的测试助手的部分。

创建助手为/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');
  });
});
于 2015-02-02T15:11:07.397 回答
1

另一个通用的解决方案是创建一个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可以结合使用来解决类似的用例。

于 2016-01-18T10:30:10.827 回答