Question

这令人抓狂，因为谷歌/互联网对此没什么帮助。 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：将“按钮”更改为“提交”的最新更改仍然无效。当前错误消息：

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)

Answer 1

每个输入的选择器都是错误的。由于你给每个人一个id，你可以这样做：

fillIn('#inputEmail1', 'insert-username-here');
fillIn('#inputPassword', 'insert-password-here');

请记住，您使用CSS选择器作为fillIn的第一个参数，ID使用#前缀，类使用.。

对于提交按钮，您没有添加类或ID，但如果它是页面上唯一的提交按钮，您可以像这样定位它：

click('button[type="submit"]');

Answer 2

fillIn和click函数接受css选择器。例如，点击提交看起来像，

click("input[type='submit']");

如何在EmberJS验收测试中调用输入和按钮？

2 个答案: