testing-library/testing-library-docs

The [user-event] pointer method simulates a selection and cannot trigger the onselectionChange event

Mr-LJQ opened this issue · 0 comments

  • This is an example from the documentation
// element: <div><span>foo</span><span>bar</span></div>
// | marking the cursor.
// [ ] marking a selection.

pointer([{ target: element, offset: 2, keys: "[MouseLeft>]" }, { offset: 5 }]);
// => <div><span>fo[o</span><span>ba]r</span></div>
  • I thought this would trigger these three events,onmousedown、 onselectionchange 、onmouseup

  • In fact, I found that only one event could be triggered:onmousedown

  • Written like this, it can trigger both events : onmousedown 、 onmouseup

pointer([
  { target: divElement, offset: 2, keys: "[MouseLeft>]" },
  { offset: 5, keys: "[/MouseLeft]" },
]);
  • But I found that the call to getSelection().toString() returned "", and that the previous method would have returned the value correctly

  • This problem can be fixed by writing this

pointer([
  { target: divElement, offset: 2, keys: "[MouseLeft>]" },
  { offset: 5 },
  { offset: 5, keys: "[/MouseLeft]" },
]);
  • Now my problem is that for whatever reason, I can't figure out how to make it trigger onselectionchange, it doesn't trigger onselectionchange during this process, and it doesn't correspond to what the user actually does when they do the same thing. onselectionchange should be triggered during this process.

  • The logic I want to verify is this: The onselectionchange is triggered to change the state of a variable after onmousedown is triggered. This state then determines exactly how the onmouseup behaves when it is triggered. Now because onselectionchange doesn't fire at all, my validation can't go ahead.

  • Is this because I didn't write it correctly, or because it doesn't simulate the behavior at all?