在验收测试中调试Ember CLI Mirage

Question

我正在尝试使用Ember CLI Mirage为我的Ember CLI（1.13.1）接受测试设置一个模拟服务器。 我一直在研究如何调试设置以及实际测试视图中可用的模型数据。

我尝试在海市rage楼路线中添加控制台日志语句：

this.get('/users', function(db){
  console.log(db.users);
  return db.users;
});

这告诉我已调用了幻影路由，并且应该有三个用户在场。 但是我的测试仍然失败。 如何在验收测试或模板中检查商店中的内容？

测试/接受/用户/index-test.js

/* jshint expr:true */
import {
  describe,
  it,
  beforeEach,
  afterEach
} from 'mocha';
import { expect } from 'chai';
import Ember from 'ember';
import startApp from 'tagged/tests/helpers/start-app';

describe('Acceptance: UsersIndex', function() {
  var application;
  var users;

  beforeEach(function() {
    application = startApp();
    users = server.createList('user', 3);
  });

  afterEach(function() {
    Ember.run(application, 'destroy');
  });

  it('can visit /users/index', function() {
    visit('/users');
    andThen(function() {
      expect(currentPath()).to.equal('users.index');
    });
  });

  it('lists the users', function(){
    visit('/users');
    andThen(function() {
      users = server.createList('user', 3);
      expect(find('.user').length).to.equal(3); // fails
    });
  });
});

AssertionError：预期0等于3

app / mirage / config.js

export default function() {
  /*
    Config (with defaults).

    Note: these only affect routes defined *after* them!
  */
  this.namespace = '/api/v1';    // make this `api`, for example, if your API is namespaced
  // this.timing = 400;      // delay for each request, automatically set to 0 during testing

  this.get('/users');
}


// You can optionally export a config that is only loaded during tests
export function testConfig() {
  this.timing = 1;
}

app / mirage / factories / user.js

import Mirage, {faker} from 'ember-cli-mirage';
export default Mirage.Factory.extend({
  email: function(){ return faker.internet.email(); }
});

应用程序/路由/用户/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.findAll('user');
  }
});

应用程序/模板/用户/index.hbs

<h2>Users</h2>

<table>
  <thead>
    <tr>
      <th>Actions</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>

  {{#each model as |user|}}
    <tr class="user">
      <td class="actions"><a href="#">Show</a></td>
      <td class="email">{{ user.email }}</td>
    </tr>
  {{/each}}
  </tbody>
</table>

Answer 1

我通常首先查看Ember Inspector的“数据”选项卡，以查看是否有任何模型添加到商店中。

如果您使用的是1.13，则可能正在使用JSON API适配器，并且将需要在Mirage路由处理程序中做更多的工作，例如在带有类型的数据键下返回对象。

例如，它可能看起来像这样：

this.get('/users', function(db){
  return {
    data: db.users.map(u => ({
      id: u.id,
      type: u.type,
      attributes: _.omit(u, ['id', 'type'])
     }))
  };
});

请注意，您的工厂仅用于播种Mirage的数据库。 因此，使用上述路线，您现在就可以使用您在问题中定义的工厂。

// mirage/scenarios/default.js
export default function(server) {
  server.createList('user', 10);
});

然后，当您启动应用程序并向/users发出GET请求时，数据应返回并由Ember Data正确反序列化。