如何在我的 EmberJS 验收测试中调用输入和按钮?
How do I call inputs and buttons in my EmberJS acceptance tests?
这太让人抓狂了,因为 google/the 互联网上对此几乎没有任何帮助。 https://guides.emberjs.com/v2.4.0/testing/acceptance/ 也不是很有帮助,即使它尝试过。我基本上是从头开始学习这个。我知道少量的 HTML、车把和 javascript,但强调适度。
这是我的模板,其中大部分是从我的架构师的设计中复制的代码,他没有时间帮助我:
<form {{action "login" on="submit"}} class="col-md-4 col-md-offset-4">
{{#if loginFailed}}
<div class="alert">Invalid username or password.</div>
{{/if}}
<div class="form-group">
<label for="inputEmail">Email address</label>
{{input value=username type="email" class="form-control" id="inputEmail1" placeholder="Email"}}
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
{{input value=password type="password" class="form-control" id="inputPassword" placeholder="Password"}}
</div>
<button type="submit" class="btn btn-default" disabled={{isProcessing}}>Log in!</button>
</form>
请注意应用程序运行正常(我能够生成连接到我的本地数据库的登录屏幕,并且我能够在凭据正确时正确登录,而在凭据不正确时无法登录)。
路由还有一个很大的 .js 文件,其中有一个 ajax 调用和相应的承诺,我可以理解,但最重要的是,它有效:
import Ember from 'ember';
import ajax from 'ic-ajax';
export default Ember.Route.extend({
loginFailed: false,
isProcessing: false,
beforeModel: function(){
this.store.unloadAll('security-setting');
this.store.unloadAll('org');
var user = this.modelFor('application').user;
user.setProperties({email: '', auth: ''});
},
actions: {
login: function() {
this.setProperties({
loginFailed: false,
isProcessing: true
});
var _this = this;
ajax({
url: _this.modelFor('application').url + '/signin.json/',
type: 'post',
data: {session: {email: this.controller.get("username"), password: this.controller.get("password")}},
}).then(
function(result) {
// proprietary stuff, it all works
},
function(error){
alert(error.jqXHR.responseText);
this.set('isProcessing', false);
_this.set("loginFailed", true);
}
);
},
},
reset: function() {
this.set('isProcessing', false);
this.controller.set('password', '');
this.controller.set('username', '');
}
});
这是我正在尝试编写的验收测试:
import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'ember-super-user/tests/helpers/start-app';
module('Acceptance | login', {
beforeEach: function() {
this.application = startApp();
},
afterEach: function() {
Ember.run(this.application, 'destroy');
}
});
test('visiting /login and fail a login attempt', function(assert) {
visit('/login');
fillIn('input.username', 'insert-username-here');
fillIn('input.password', 'insert-password-here');
click('button.submit');
// I know this assert is wrong but I haven't even gotten this far yet so I'm // not thinking about it; basically what happens is a popup appears and says // wrong-username-or-password-etc
andThen(function() {
assert.equal(currentURL(), '/login');
});
});
执行在 fillIn
行代码处终止。我真的不知道在这里做什么,我已经尝试了 'input.username'、'input.inputEmail1'、'input.inputEmail' 的所有组合...我只是不确定我应该做什么做,在所有。我也很确定 'button.submit' 也不会神奇地起作用。然后,我知道当我尝试填写 andThen
承诺以确认弹出窗口显示错误密码等事实时,我会更加迷茫
请帮忙;非常感谢您的宝贵时间。
编辑:我已经能够修复测试的 fillIn
部分,但是 click
(可能是点击,无论如何,因为错误消息不清楚哪一行是问题)正在产生一些我无法诊断的错误。 QUnit 测试套件输出中出现的错误消息对我来说毫无意义 --
TypeError: Cannot read property 'set' of undefined@ 4286 ms
Expected:
true
Result:
false
Diff:
trufalse
at http://localhost:7357/assets/test-support.js:3592:13
at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:7357/assets/vendor.js:52460:7)
at onerrorDefault (http://localhost:7357/assets/vendor.js:43162:24)
at Object.exports.default.trigger (http://localhost:7357/assets/vendor.js:67346:11)
at Promise._onerror (http://localhost:7357/assets/vendor.js:68312:22)
at publishRejection (http://localhost:7357/assets/vendor.js:66619:15)
编辑 2:将 'button' 更改为 'submit' 的最新更改仍然无效。当前错误消息:
Error: Element input[type='submit'] not found.@ 166 ms
Expected:
true
Result:
false
Diff:
trufalse
Source:
at http://localhost:7357/assets/test-support.js:3592:13
at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:7357/assets/vendor.js:52460:7)
at onerrorDefault (http://localhost:7357/assets/vendor.js:43162:24)
at Object.exports.default.trigger (http://localhost:7357/assets/vendor.js:67346:11)
at Promise._onerror (http://localhost:7357/assets/vendor.js:68312:22)
at publishRejection (http://localhost:7357/assets/vendor.js:66619:15)
您的每个输入选择器都是错误的。既然你给了每个人一个id,你可以这样做:
fillIn('#inputEmail1', 'insert-username-here');
fillIn('#inputPassword', 'insert-password-here');
请记住,您正在为 fillIn
的第一个参数使用 CSS 选择器,ID 使用 #
前缀,class 使用 .
。
对于提交按钮,您没有添加 class 或 ID,但如果它是页面上唯一的提交按钮,您可以这样定位它:
click('button[type="submit"]');
fillIn 和 click 函数接受 css 选择器。所以例如,点击提交看起来像,
click("input[type='submit']");
这太让人抓狂了,因为 google/the 互联网上对此几乎没有任何帮助。 https://guides.emberjs.com/v2.4.0/testing/acceptance/ 也不是很有帮助,即使它尝试过。我基本上是从头开始学习这个。我知道少量的 HTML、车把和 javascript,但强调适度。
这是我的模板,其中大部分是从我的架构师的设计中复制的代码,他没有时间帮助我:
<form {{action "login" on="submit"}} class="col-md-4 col-md-offset-4">
{{#if loginFailed}}
<div class="alert">Invalid username or password.</div>
{{/if}}
<div class="form-group">
<label for="inputEmail">Email address</label>
{{input value=username type="email" class="form-control" id="inputEmail1" placeholder="Email"}}
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
{{input value=password type="password" class="form-control" id="inputPassword" placeholder="Password"}}
</div>
<button type="submit" class="btn btn-default" disabled={{isProcessing}}>Log in!</button>
</form>
请注意应用程序运行正常(我能够生成连接到我的本地数据库的登录屏幕,并且我能够在凭据正确时正确登录,而在凭据不正确时无法登录)。
路由还有一个很大的 .js 文件,其中有一个 ajax 调用和相应的承诺,我可以理解,但最重要的是,它有效:
import Ember from 'ember';
import ajax from 'ic-ajax';
export default Ember.Route.extend({
loginFailed: false,
isProcessing: false,
beforeModel: function(){
this.store.unloadAll('security-setting');
this.store.unloadAll('org');
var user = this.modelFor('application').user;
user.setProperties({email: '', auth: ''});
},
actions: {
login: function() {
this.setProperties({
loginFailed: false,
isProcessing: true
});
var _this = this;
ajax({
url: _this.modelFor('application').url + '/signin.json/',
type: 'post',
data: {session: {email: this.controller.get("username"), password: this.controller.get("password")}},
}).then(
function(result) {
// proprietary stuff, it all works
},
function(error){
alert(error.jqXHR.responseText);
this.set('isProcessing', false);
_this.set("loginFailed", true);
}
);
},
},
reset: function() {
this.set('isProcessing', false);
this.controller.set('password', '');
this.controller.set('username', '');
}
});
这是我正在尝试编写的验收测试:
import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'ember-super-user/tests/helpers/start-app';
module('Acceptance | login', {
beforeEach: function() {
this.application = startApp();
},
afterEach: function() {
Ember.run(this.application, 'destroy');
}
});
test('visiting /login and fail a login attempt', function(assert) {
visit('/login');
fillIn('input.username', 'insert-username-here');
fillIn('input.password', 'insert-password-here');
click('button.submit');
// I know this assert is wrong but I haven't even gotten this far yet so I'm // not thinking about it; basically what happens is a popup appears and says // wrong-username-or-password-etc
andThen(function() {
assert.equal(currentURL(), '/login');
});
});
执行在 fillIn
行代码处终止。我真的不知道在这里做什么,我已经尝试了 'input.username'、'input.inputEmail1'、'input.inputEmail' 的所有组合...我只是不确定我应该做什么做,在所有。我也很确定 'button.submit' 也不会神奇地起作用。然后,我知道当我尝试填写 andThen
承诺以确认弹出窗口显示错误密码等事实时,我会更加迷茫
请帮忙;非常感谢您的宝贵时间。
编辑:我已经能够修复测试的 fillIn
部分,但是 click
(可能是点击,无论如何,因为错误消息不清楚哪一行是问题)正在产生一些我无法诊断的错误。 QUnit 测试套件输出中出现的错误消息对我来说毫无意义 --
TypeError: Cannot read property 'set' of undefined@ 4286 ms
Expected:
true
Result:
false
Diff:
trufalse
at http://localhost:7357/assets/test-support.js:3592:13
at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:7357/assets/vendor.js:52460:7)
at onerrorDefault (http://localhost:7357/assets/vendor.js:43162:24)
at Object.exports.default.trigger (http://localhost:7357/assets/vendor.js:67346:11)
at Promise._onerror (http://localhost:7357/assets/vendor.js:68312:22)
at publishRejection (http://localhost:7357/assets/vendor.js:66619:15)
编辑 2:将 'button' 更改为 'submit' 的最新更改仍然无效。当前错误消息:
Error: Element input[type='submit'] not found.@ 166 ms
Expected:
true
Result:
false
Diff:
trufalse
Source:
at http://localhost:7357/assets/test-support.js:3592:13
at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:7357/assets/vendor.js:52460:7)
at onerrorDefault (http://localhost:7357/assets/vendor.js:43162:24)
at Object.exports.default.trigger (http://localhost:7357/assets/vendor.js:67346:11)
at Promise._onerror (http://localhost:7357/assets/vendor.js:68312:22)
at publishRejection (http://localhost:7357/assets/vendor.js:66619:15)
您的每个输入选择器都是错误的。既然你给了每个人一个id,你可以这样做:
fillIn('#inputEmail1', 'insert-username-here');
fillIn('#inputPassword', 'insert-password-here');
请记住,您正在为 fillIn
的第一个参数使用 CSS 选择器,ID 使用 #
前缀,class 使用 .
。
对于提交按钮,您没有添加 class 或 ID,但如果它是页面上唯一的提交按钮,您可以这样定位它:
click('button[type="submit"]');
fillIn 和 click 函数接受 css 选择器。所以例如,点击提交看起来像,
click("input[type='submit']");