Question

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

然而，当我运行测试访问页面并单击按钮时，测试告诉我它无法找到按钮。换句话说，运行-e测试和检查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');
  });
});

第一次测试（只是访问网址）通过。第二个测试是它无法找到按钮的地方。再次，当我服务 - 测试，并在控制台输入：$（＆＃39; .top-row-orders-button＆＃39;）它返回有问题的按钮。

很高兴为任何人提供更多信息。非常感谢任何帮助。我已经在这几天敲打了我的头，但没有运气。

编辑添加：

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

Answer 1

我浏览了你的存储库并发现你使海市蜃楼工厂配置错误...当使用mirage时你应该准确定义应用程序所期望的内容。

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

幻影的作用是api嘲笑。当调用api时，它会返回你在它的config.js中定义的响应，它仍然会通过你在adapters中的查询函数中定义的那个承诺。由于模型是空的，因此无需渲染，测试失败。

将海市蜃楼配置文件更改为

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

并且还会更改工厂/电影以相应地返回对象键（例如在你的情况下＆＃39; imdbID＆＃39; not＆＃39; id＆＃39;）。

Answer 2

点击助手（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，然后停在那里。

Answer 3

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

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

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

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

你是否在html中看到了你想要定位的元素？如果它在那里，尝试使用jQuery再次选择它。如果jQuery找不到它，那么你的选择器就错了。

Ember tests / Mirage没有找到DOM元素

3 个答案: