ember.js - Ember App Kit 和测试模型 Hook

Question

在 Ember App Kit 中，有许多测试示例随初始 repo 一起提供。其中之一是基本的路由单元测试。这个测试很简单，如果数据是硬编码在模型钩子(Hook)中的，就像这样:

test("#model", function(){
  deepEqual(route.model(), ['red', 'yellow', 'blue']);
});

如果模型钩子(Hook)从 ember-data 返回一个 promise，你如何使用隔离容器来测试模型钩子(Hook)？

这是测试:

import Activities from 'appkit/routes/activities';

var route;
module("Unit - ActivitiesRoute", {
  setup: function(){
    var container = isolatedContainer([
      'route:activities'
    ]);

    route = container.lookup('route:activities');
  }
});

test("#model", function(){
  deepEqual(route.model(), ['activity', 'activity2', 'activity3']);
});

以及实际路线的模型钩子(Hook):

export default Ember.Route.extend({
  model: function() {
    return this.get('store').find('activity');
  }
});

更新:

在 kingpin2k 实现以下不同方法后。以下是结果摘要。

第一种方法:效果很好……但没有保证。

第二种方法:返回 promise 对象(似乎已解析)，但数组和正确的值被分配给 _detail 属性。

test("#model", function(){
  deepEqual(route.model()['_detail'], ['activity', 'activity2', 'activity3']); //passes
});

我希望在模块 setup() 中创建商店。

...
module("Unit - ActivitiesRoute", {
  setup: function(){
    var container = isolatedContainer([
      'route:activities'
    ]);

    route = container.lookup('route:activities');

    var store = {
       find: function(type){
         return new Em.RSVP.Promise(function(resolve){
            resolve(['activity', 'activity2', 'activity3']);  // or made up model(s) here
          });
       }
    };
    route.set('store', store);
  }
});

测试:

test("#model", function(){
  deepEqual(route.model(), ['activity', 'activity2', 'activity3']); // ???
});

第三种方法:

...
module('Unit - ActivitiesRoute', {
  setup: function() {
    var container = isolatedContainer([
      'route:activities'
    ]);

    route = container.lookup('route:activities');

    var store = {
      find: function() {

        var promise = new Ember.RSVP.Promise(function(resolve) {
          Em.run.later(function() {
            resolve(Activity.FIXTURES);
          }, 10);
        });

        return Ember.ArrayProxy.extend(Ember.PromiseProxyMixin).create({
          promise: promise
        });
      }
    };
    route.set('store', store);
  }
});

在测试中，调用 route.model() 返回一个空对象 {} :

test("#model", function(){
  deepEqual(route.model(), Activity.FIXTURES); // returns {}
});

更新#2

还需要添加 asyncTest() 而不是 test() 并调用 start() 以防止测试运行程序挂起。

asyncTest('#model', function(){
  Em.run(function(){
    route.model().then(function(result){
      ok(result);
      equal(result, Activity.FIXTURES);
      start();
    });
  });
});

Answer 1

简单的方法，它是一个单元测试，所以你实际上并没有测试商店，所以设置一个模拟商店和结果。

route = container.lookup('route:activities');
var store = {
   find: function(type){
      equal(type, 'activity', 'type is activity');
      return ['activity', 'activity2', 'activity3'];
   }
}

route.set('store', store);

更好的是你还可以复制 promise

route = container.lookup('route:activities');
var store = {
   find: function(type){
      equal(type, 'activity', 'type is activity');
      return new Em.RSVP.Promise(function(resolve){
        resolve(['activity', 'activity2', 'activity3']);  // or made up model(s) here
      });
   }
}

route.set('store', store);

如果您想更紧密地复制 Ember 数据，您可以使用实现 PromiseProxyMixin 的 ArrayProxy...

route = container.lookup('route:activities');
var store = {
   find: function(type){
      equal(type, 'activity', 'type is activity');
      var promise = new Ember.RSVP.Promise(function(resolve){
        Em.run.later(function(){
          resolve(['activity', 'activity2', 'activity3']);
        }, 10);
      });

      return Ember.ArrayProxy.extend(Ember.PromiseProxyMixin).create({
        promise: promise
      });
   }
}

route.set('store', store);

更新

使用你最后的方法，你应该像这样实现它

test("#model", function(){
  route.model().then(function(result){
    deepEqual(result, Activity.FIXTURES); // returns {}
  });
});

但是，这里有一些棘手的事情，因为它有一个异步响应，你会想把它包装在一个 Ember 运行循环中

test("#model", function(){
  Em.run(function(){
    route.model().then(function(result){
      deepEqual(result, Activity.FIXTURES); // returns {}
    });
  });
});