Ember测试/ Mirage没有找到DOM元素 [英] Ember tests/Mirage not finding DOM elements

问题描述

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

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

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

所以我假设设置有问题或某处在一个配置中？

特别是：

  module（'Acceptance |基本测试，{
 beforeEach：function（）{
 this.application = startApp（）; 
}，
 
 afterEach：function（）{
 Ember.run（this.application，'destroy'）; 
} 
}）; 
 
 test（'visit / orders'，function（assert）{
 visit（'/ orders'）; 
 
 andThen（function（）{
 assert.equal（currentURL（），'/ orders'）; 
}）; 
}）; 
 
 test（'visit / basic'，function（assert）{
 visit（'/ orders'）; 
 click（'top-row-orders-button'）; //button.top-row-orders-button failed 
 andThen（function（）{
 assert.equal（currentURL（），'/ orders'）; 
}）; 
}）; 
  

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

快乐提供任何需要的任何更多的信息。感谢任何帮助。

已修改为添加：

$ b更一般地说，在使用Mirage时，是否有一种方法来查看/ test环境中的DOM（即实际测试运行的DOM）？也就是说，每个Mirage测试的DOM看起来像什么？

解决方案

我跑过你的存储库，发现你制作了海市mir楼配置错误...当使用 mirage 你应该准确地定义应用程序的期望。

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

Mirage做的是api嘲笑。当调用api时，它会返回你在config.js中定义的响应，它仍然会经过你在适配器中的查询函数中定义的那个承诺。由于模型是空的，没有任何内容可以呈现，测试失败。

将幻影配置文件更改为

  this.get（'http://www.omdbapi.com/'，function（db，request）{
 return {Search：db.movi​​es}; 
}）; 
  

，还可以更改工厂/电影，以相应地返回对象键（在case中说imdbID不是'id'）。

I'm trying to do some basic acceptance tests in Ember, using Mirage. I'm using only fixtures at this point to populate the test environment, just to find my feet. When I run ember in the test environment (i.e., with -e test), I can see my app is populating with expected data. And the DOM has some buttons, etc. All is well.

However, when I run a test to visit a page and click a button, the test is telling me it can't find the button. In other words, running -e test and checking localhost shows the app seems to be fine. But then checking localhost/tests has a test failing saying it can't find a button that is definitely there in the -e test screen.

I've confirmed that the button exists in the -e test environment, using both inspector and just issuing a basic jquery select at the console line.

So I assume there's something wrong in the setup or somewhere in a configuration?

In particular:

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');
  });
});

The first test (just visiting the url) passes. The second test is where it says it can't find the button. And again, when I serve -e test, and enter this at the console: $('.top-row-orders-button') it returns the button in question.

Happy to provide any more info anyone needs. Would appreciate any help. I've been banging my head on this for a few days now with no luck.

Edited to Add:

More generally, when using Mirage, is there a way to see what the DOM is within the /tests environment (i.e., the DOM that the actual tests are running on)? I.e., what the DOM looks like to each Mirage test?

解决方案

I ran through ur repository and found that u made the mirage factory configuration wrong...When using mirage u should define exactly what the app expects.

Eg: the api ur calling returns the movies in Search object when running the app. While in tests it returns the movies list object as an reponse. And you made a check in adapters -> query function to return [ ] if there is no Search object.

What Mirage does is api mocking. When calling the api it returns the response which u had defined in it's config.js and it still goes through the then promise u had defined in query function in adapters. Since the model is empty, there in nothing to render and the test failed.

Change the mirage config file as

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

and also change the factories/movie to return the object keys accordingly(say in ur case 'imdbID' not 'id').

这篇关于Ember测试/ Mirage没有找到DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！