gpt4 book ai didi

ember.js - 应用程序和测试中的 ember 事件触发顺序不同

转载 作者:行者123 更新时间:2023-12-02 01:42:32 25 4
gpt4 key购买 nike

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

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 元素时,这是日志的顺序。 <强> Link to demo

  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');
});
});

日志的顺序不同。 Link to demo .

  1. 点击焦点外容器
  2. 焦点设置到按钮
  3. 点击测试后
  4. focussedOut 从外容器

focusOut 日志打印在最后而不是点击后日志之前。我期望日志的顺序相同,最后只有一个额外的日志(点击后)。

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

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

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

最佳答案

点击事件没有设置焦点(作为后门路由)。如果您想要相同的结果,您需要手动设置焦点然后单击。

Ember 的点击助手(发送 mousedown/mouseup,然后点击)

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

同样重要的是要注意,拆除也会调用 focus out 事件。所以你看到 focusout 的主要原因是因为在拆解时它失去了按钮 child 的焦点。

在 ember 测试中,也许应该在 mousedown 之前将焦点设置在点击帮助器上,尽管我不确定还有什么可能会影响,或者如果人们通常不会期望这样做,因为 jquery 不会那样做。

关于ember.js - 应用程序和测试中的 ember 事件触发顺序不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27675537/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com