0

我正在编写一个验收测试，其中用户填写表格并向第三方资源发出 ajax 请求。我正在用Ember CLI Mirage模拟请求。

我正在编写一个基本的工作示例，我将在测试通过后对其进行重构。我知道我需要将我的请求抽象为一个服务或实用程序，但我不喜欢在没有围绕它的工作测试的情况下重构我的代码。

但是，我的代码似乎可以正常工作，当我返回更改模板中某些内容的结果时，我无法通过测试。

需要注意的是：我正在模拟的第三方 API 并不平静。

海市蜃楼配置如下：

export default function() {
  this.post('/LogonAction', () => {
    return {foo: 'bar'};
  });
}

我还没有设置 Web 服务的规范 URL。它应该是一个外部服务。

我的组件：

import Ember from 'ember';

export default Ember.Component.extend({
  result: null,
  errors: null,
  usernameTextChanged: function() { this.reset(); }.observes('username'),
  passwordTextChanged: function() { this.reset(); }.observes('password'),
  reset() {
    this.set('errors', null);
    this.set('result', null);
  },
  actions: {
    sync() {
      this.reset();

      // TODO abstract out validation and add more use cases
      if(this.get('username') === undefined || this.get('password') === undefined) {
        this.set('errors', 'Please fill out the form');
      }
      else {
        let params = { userId: this.get('username'), passwd: this.get('password') }

        this.set('test', 'foos'); //just checking...

        // TODO abstract out into a utility and move config values into config
        Ember.$.post('/LogonAction', params).then((r) => {
          // When I run tests, this renders to console.
          console.log('promise happened 1', r, this.get('result')); 
          // Fails here. I don't know why.
          this.set('result', true);
          // This does not execute
          console.log('promise happened 2', this.get('result'));
        });
      }
    }
  }
});

你会看到我输出到控制台两次，所以我可以调试它。我不确定这是在编写测​​试时进行调试的正确方法。

这是我的模板：

<form id="logon" {{action 'sync' on='submit'}}>
  {{input value=username type="text" class="username" placeholder="Your username"}}
  {{input value=password type="password" class="password"}}
  <button>Click me</button>

  [[{{test}}]] <!-- this is just debugging -->

  {{#if result}}
    <div id="result">Sync complete</div>
  {{/if}}
  {{#if errors}}
    <div id="result">{{errors}}</div>
  {{/if}}
</form>

最后，我的测试：

test('logging in', assert => {
  server.createList('LogonAction', 0);
  visit('/');

  console.log(0);

  fillIn('input.username', 'foo');
  fillIn('input.password', 'bar');
  click('button');

  console.log(1);

  andThen(() => {
    // The above console logs have happened.
    // It does not have the div#result tag in it!
    console.log(find('#logon').html());
    assert.equal(find('#result').text(), 'Sync complete'); // fails.
  });
});

控制台日志（我认为）告诉我，在我断言页面向用户显示结果之前，承诺已经解决。但我不能让它通过！一旦我设置 的值result，它就会失败。

任何帮助，非常感谢。

4

1 回答 1

0

我怀疑这可能与在测试模式下禁用运行循环的事实有关。尽管如此; 我原以为您会收到以下错误“断言失败：您已打开测试模式，这禁用了运行循环的自动运行。您需要在运行中包装任何具有异步副作用的代码”但您说它失败了默默。您可以尝试以下操作吗：只需将代码包装this.set('result', true);在 anEmber.run中，如下所示：

    Ember.run(()=>{
      this.set('result', true);
    });

我没有时间摆弄一下代码片段；你已经提供了。对此感到抱歉；如果您设置一个旋转并就我的回答结果提供反馈，我会提供更多帮助。祝你好运！

于 2017-06-23T06:06:14.460 回答