• victoria emmy
  • NEWBIE
  • 0 Points
  • Member since 2023

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
Hi,

How should we test that an element received focus.
In the js controller we are testing we used:
const button  = this.template.queryselector('xxx');
button.focus()

We know this works because it been tested through the UI ie. the focus box shows around the button.

I have tried a few things in Jest not nothign seems to work:

- Use jest-dom:
 

expect(button).toHaveFocus()


But only the top parent is returned by toHaveFocus().

I tested it in the smallest example possible and it just doesn't work.
- Use document.activeElement
that returns :
 

HTMLBridgeElement [HTMLElement] {}

I don't even understand what this could be, and Google doesn't seem to know either.
My gut feeling tells me that LockerService is preventing the use of document.activeElement, which is used under the hood  by jest-dom toHaveFocus().
But in the end I don't know how to test focus at all
Any idea?