在验收测试中调试 Ember CLI Mirage

Question

我正在尝试使用 Ember CLI Mirage 为我的 Ember CLI (1.13.1) 验收测试设置一个模拟服务器。我坚持如何调试设置并实际测试视图中可用的模型数据。

我尝试在我的 mirage 路由中添加控制台日志语句：

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

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

tests/acceptance/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: expected 0 to equal 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(); }
});

app/routes/users/index.js

import Ember from 'ember';

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

app/templates/users/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 检查器的“数据”选项卡，看看是否有任何模型被添加到商店中。

如果您使用的是 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.

正确反序列化

在验收测试中调试 Ember CLI Mirage

Debugging Ember CLI Mirage in an acceptance test

javascript

ember.js

ember-cli

ember-cli-mirage