Ember 带有计算变量的动作集成测试

Question

使用 Ember cli 2.9 我正在制作一个简单的应用程序来将瑞士法郎转换为欧元。该应用程序在我的浏览器中手动运行良好，但我为转换器编写的集成测试失败。它作为一个名为 home-index

的 Ember 组件存在

模板：

<h2>INPUT GOES HERE</h2>

{{input value=userInput class="user-input" placeholder="enter your francs please"}}

<button class="convert-button" {{action 'convertInput'}}>CONVERT</button>

<div class="display-output">{{outputNumber}}</div>

组件逻辑：

import Ember from 'ember';

export default Ember.Component.extend({

 userInput: "",
 outputNumber : 0,

 numberifiedInput: Ember.computed('userInput', function() { 
  let userInput = this.get('userInput');
  return parseFloat(userInput);
 }),

 actions: {
  convertInput() {
   var input = this.get('numberifiedInput');
   var converted = input * 0.93;
   this.set('outputNumber', converted);
  }
 }
});

集成测试：

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('home-index', 'Integration | Component | home index', {
  integration: true
});

test('should recieve input from user and display output', function(assert) {
  assert.expect(1);

  this.render(hbs`{{home-index}}`);
  this.$(".user-input").val("1");
  this.$('.convert-button').click();

  assert.equal(this.$(".display-output").text(), "0.93", "should display correct converted amount");    

});

在浏览器中手动使用该应用程序时，值会从 1 正确转换为 0.93 并显示在 div 中。但是，集成测试 returns "NaN' instead of "0.93".

当我将测试写入验收测试时，它通过并给出了正确的结果。这让我相信这是由于使用了异步助手。

然后我尝试重写包含在导入等待方法中的集成测试，如下所示：

return wait()
  .then(() => {
    assert.equal(this.$(".display-output").text(), "0.93", "should display correct converted amount");    
  });
});

但在集成测试中仍然给出 "NaN" 作为结果。有谁知道为什么会这样？

PS。抱歉在片段中发帖，堆栈溢出代码块很不稳定..

Answer 1

尝试在设置值后触发输入字段上的事件 'input' 和 'change'。

$('.user-input').val('1');
$('.user-input').trigger('input');
$('.user-input').change();

请参阅 https://github.com/emberjs/ember.js/blob/v2.9.1/packages/ember-testing/lib/helpers/fill_in.js#L15 了解验收测试助手 fillIn 是如何做到的（但没有 jQuery）。

如果验收测试是可以接受的，它可能是测试这类事情的更好方法，因为内置的帮助程序会处理通常由用户交互触发的各种事件。

Ember 带有计算变量的动作集成测试

Ember integration test for action with computed variable

integration-testing