0

我正在尝试使用 Mirage 在 Ember 中进行一些基本的验收测试。我现在只使用固定装置来填充测试环境，只是为了找到我的脚。当我在测试环境中运行 ember（即，使用 -e test）时，我可以看到我的应用程序正在填充预期的数据。并且 DOM 有一些按钮等。一切都很好。

但是，当我运行测试以访问页面并单击按钮时，测试告诉我它找不到按钮。换句话说，运行 -e test 并检查 localhost 表明该应用程序似乎很好。但是然后检查 localhost/tests 有一个测试失败，说它在 -e 测试屏幕中找不到肯定存在的按钮。

我已经确认该按钮存在于 -e 测试环境中，同时使用检查器并仅在控制台行发出基本的 jquery 选择。

所以我认为设置或配置中的某个地方有问题？

尤其是：

module('Acceptance | basic tests', {
  beforeEach: function() {
    this.application = startApp();
  },

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

test('visiting /orders', function(assert) {
  visit('/orders');

  andThen(function() {
    assert.equal(currentURL(), '/orders');
  });
});

test('visiting /basic', function(assert) {
  visit('/orders');
  click('top-row-orders-button'); //button.top-row-orders-button fails too
  andThen(function() {
    assert.equal(currentURL(), '/orders');
  });
});

第一个测试（只是访问 url）通过了。第二个测试是它说它找不到按钮。再一次，当我提供 -e test 并在控制台输入： $('.top-row-orders-button') 它返回有问题的按钮。

很高兴提供任何人需要的更多信息。将不胜感激任何帮助。几天来我一直在努力解决这个问题，但没有运气。

编辑添加：

更一般地说，当使用 Mirage 时，有没有办法查看 /tests 环境中的 DOM（即运行实际测试的 DOM）？即，每个 Mirage 测试的 DOM 是什么样的？

4

3 回答 3

1

在测试主体中添加调试器语句并打开控制台。重新运行测试。

该应用程序应暂停。在控制台中，您可以检查 DOM。使用铬。

$('#ember-testing')在控制台中尝试。

您应该在控制台中看到一个 DOM 片段。您可以与此 DOM 片段进行交互。单击箭头将其打开。

您是否在 html 中看到了您尝试定位的元素？如果它在那里，请尝试使用 jQuery 再次选择它。如果 jQuery 没有找到它，你的选择器是错误的。

于 2016-02-26T00:17:42.433 回答
1

我浏览了您的存储库，发现您将 mirage 工厂配置错误...使用时mirage您应该准确定义应用程序的期望。

Search例如： api ur 调用在运行应用程序时返回对象中的电影。在测试中，它会返回电影列表对象作为响应。如果没有 Search 对象，您检查了适配器 -> 查询函数以返回 [ ]。

Mirage 所做的是 api mocking。当调用 api 时，它返回你在它的 config.js 中定义的响应，它仍然通过你在查询函数中定义的 then 承诺adapters。由于模型是空的，因此没有可渲染的内容并且测试失败。

将幻影配置文件更改为

this.get('http://www.omdbapi.com/', function(db, request) {
  return { Search: db.movies };
});

并更改工厂/电影以相应地返回对象键（比如在你的情况下是“imdbID”而不是“id”）。

于 2016-02-25T17:17:25.877 回答
1

click helper ( click('top-row-orders-button')) 接受一个 CSS 选择器，所以如果你正在寻找一个带有top-row-orders-button你想要使用的类的 DOM 节点

click('.top-row-orders-button');

如果未找到该按钮，请尝试在帮助程序debugger之前放置一个，然后在控制台中输入。click$('.top-row-orders-button')

你能澄清一下是什么-e test意思吗？人们通常有两种方式在浏览器中查看测试运行程序。首先，如果你已经完成ember serve，你可以访问localhost:4200/tests。但是，推荐的方法是使用ember test --server. 这将使用 testem 并在您的控制台中启动测试运行程序，但它也会向您显示一个链接，例如

Open the URL below in a browser to connect.
http://localhost:7357/

您可以访问以查看测试运行程序。

首选第二种方法的原因是因为该ember test命令使用的 Ember 应用程序具有构建时（节点）环境和test运行时环境test（即环境变量config/environment.js），而使用ember serve然后访问/tests使用的构建时环境development和运行时环境test。

通常你不需要指定--environment test- 你可以使用ember test --server命令。

最后，对于您的最后一个问题，实际上并没有“幻影测试”之类的东西。在验收测试中，Mirage 的服务器与您的 Ember 应用程序一起启动。但 Mirage 对您的 Ember 应用程序一无所知，甚至对它正在用于测试的事实一无所知。它基本上只是模拟出 XMLHttpRequest，然后停在那里。

于 2016-02-25T20:20:06.483 回答