Question

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

我尝试在我的海市蜃楼路线中添加一个控制台日志声明：

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

这告诉我海市蜃楼路线被召唤，应该有三个用户在场。但我的测试仍然失败。如何在验收测试或模板中检查商店中的内容？

测试/接受/用户/索引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

应用/幻影/ 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;
}

应用/幻影/工厂/ 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的Data选项卡，看看是否有任何模型被添加到商店。

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

1 个答案: