Ember tests/Mirage 未找到 DOM 个元素

Question

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

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

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

所以我假设设置或配置中的某处有问题？

特别是：

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 测试时，并在控制台输入：$('.top-row-orders-button') 它 returns 有问题的按钮。

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

编辑添加：

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

Answer 1

我运行通过你的存储库，发现你将 Mirage 工厂配置错误...使用 mirage 时，你应该准确定义应用程序的期望。

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

Mirage 所做的是 api 嘲讽。当调用 api 时，它 return 是你在 config.js 中定义的响应，它仍然通过你在 adapters 中的查询函数中定义的承诺。由于模型是空的，没有任何东西可以渲染，测试失败。

将 mirage 配置文件更改为

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

并相应地将 factories/movie 更改为 return 对象键（在你的情况下说 'imdbID' 而不是 'id'）。

Answer 2

点击助手 (click('top-row-orders-button')) 采用 CSS 选择器，因此如果您正在寻找具有 class top-row-orders-button 的 DOM 节点，您想用

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

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

你能解释一下 -e test 是什么意思吗？人们通常通过两种方式在浏览器中查看测试运行ner。首先，如果您已经完成 ember serve，您可以访问 localhost:4200/tests。但是，推荐的方式是使用ember test --server。这将使用 testem 并在您的控制台中启动测试运行ner，但它还会向您显示一个 link，类似于

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

你可以去看看测试运行ner.

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

的运行时环境

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

最后，关于您的最后一个问题，实际上并没有 "Mirage test" 这样的东西。 Mirage 的服务器在验收测试中与您的 Ember 应用程序一起启动。但是 Mirage 对您的 Ember 应用一无所知，甚至不知道它正在测试中。它基本上只是模拟 XMLHttpRequest，然后停在那里。

Answer 3

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

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

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

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

您在 html 中看到您要定位的元素了吗？如果存在，请尝试使用 jQuery 再次选择它。如果 jQuery 没有找到，则说明您的选择器有误。

Ember tests/Mirage 未找到 DOM 个元素

Ember tests/Mirage not finding DOM elements

ember.js

ember-cli-mirage