3

問題を示すために、この簡単なデモ コンポーネントを作成しました。コンポーネントコードは以下です

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. 外部コンテナーからの focusdOut
  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. 外部コンテナーからの focusdOut

focusOutログは、クリック後のログの前ではなく、最後に印刷されました。最後に追加のログ（クリック後）だけで、ログの順序が同じになると予想していました。

これがバグなのか、私のコードに問題があるのか​​ わかりません。

また、テストの実行中に別の問題に気付きました。テストの実行中に chrome dev-tools に注目すると、focusOutイベントはまったくトリガーされません。

これに関するいくつかの助けは大歓迎です。

4

1 に答える 1

2

クリック イベントはフォーカスを設定しません (バック ドア ルートです)。同じ結果が必要な場合は、手動でフォーカスを設定してからクリックする必要があります。

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、コンソール、出力

また、破棄するとフォーカス アウト イベントも呼び出されることに注意してください。したがって、フォーカスアウトがまったく表示されなかった主な理由は、分解時にボタンの子からフォーカスが失われたためです。

ember テストではクリック ヘルパーのマウスダウンの前にフォーカスを設定する必要があるかもしれませんが、他に何が影響するかはわかりません。

于 2014-12-28T17:39:30.010 に答える