Ember 事件触发顺序在应用和测试中有所不同

Question

我写了这个简单的演示组件来演示一个问题。组件代码如下

App.FocusOutComponent = Em.Component.extend({
  attributeBindings: ['tabindex'],
  tagName: 'focus-out',
  setFocus: function() {
    console.log('clicked focus-out container');
    this.$().find('button').focus();
    console.log('focus set to button');
  }.on('click'),
  focussedOut: function() {
    console.log('focussedOut from outer container');
  }.on('focusOut'),
});
{{#focus-out id="focus-container" tabindex="-1"}}
  <button id="text-button">Test Button</button>
{{/focus-out}}

当我运行它并单击 focus-out 元素时，这是日志的顺序。链接到演示

1. 单击的焦点输出容器
2. 聚焦从外部容器输出
3. 焦点设置为按钮

现在，当我尝试使用以下代码为此编写验收测试时。

test('test visit / and click button', function() {
  expect(0);
  visit('/').then(function() {
    find('focus-out').click();
    console.log('after click in test');
  });
});

日志的顺序不同。链接到演示。

1. 单击的焦点输出容器
2. 焦点设置为按钮
3. 点击测试后
4. 聚焦从外部容器输出

focusOut日志在最后打印，而不是在单击后日志之前打印。我期待日志的相同顺序，最后只有一个额外的日志（单击后）。

我不确定这是错误还是我的代码有问题。

我在执行测试时还注意到另一个问题。如果我在测试运行时专注于 chrome 开发工具，则根本不会触发 focusOut 事件。

非常感谢对此的一些帮助。

Answer 1

Click 事件不设置焦点（作为后门路由）。 您需要手动设置焦点，然后单击是否想要相同的结果。

Ember的点击助手（发送鼠标向下/鼠标向上，然后单击）

function click(app, selector, context) {
  var $el = app.testHelpers.findWithAssert(selector, context);
  run($el, 'mousedown');
  if ($el.is(':input')) {
    var type = $el.prop('type');
    if (type !== 'checkbox' && type !== 'radio' && type !== 'hidden') {
      run($el, function(){
        // Firefox does not trigger the `focusin` event if the window
        // does not have focus. If the document doesn't have focus just
        // use trigger('focusin') instead.
        if (!document.hasFocus || document.hasFocus()) {
          this.focus();
        } else {
          this.trigger('focusin');
        }
      });
    }
  }
  run($el, 'mouseup');
  run($el, 'click');
  return app.testHelpers.wait();
}

修改后的测试

test('test visit / and click button', function() {
  expect(0);
  visit('/').then(function() {
    var el = find('focus-out');
    el.focus();
    click(el);
    console.log('after click in test');
  });
});

http://emberjs.jsbin.com/lefazevozi/1/edit?js,console,output

同样重要的是要注意，拆除也会调用焦点事件。 所以你看到焦点的主要原因是因为在拆解时，它失去了纽扣孩子的焦点。

也许应该在余烬测试中将鼠标悬停在单击助手上之前设置焦点，尽管我不确定这可能会影响什么，或者人们通常不会期望，因为 jquery 不会这样做。