Focus handling

This release adds improved abilities to work with focus handling.

Highlighting of focused DOMElement

Any diff produced by unexpected-dom will now show you which element currently has focus in your document.
The element in question will have :focus shown inside its opening tag:

New Assertions

To have focus

Added a new assertion to have focus, which operates on DOMElement's. to have focus documentation

// Use on dom elements directly 
const anchor = querySelector('a');
expect(anchor, 'to have focus');

// Combine with forwarding assertions
expect(page, 'when queried for first', 'button', 'to have focus');

// Use as nested assertion
expect(formLabel, 'to satisfy', {
  children: [
    expect.it('to satisfy', { name: 'input' }).and('to have focus')
  ]
});

To contain focused element matching

Added new assertion to contain focused element matching, which lets pass a parent node as the subject and a querySelector as an argument. The assertion will execute the selection for you and assert that the selected element is focused. to contain focused element matching documentation

expect(formElement, 'to contain focused element matching', 'input[name="email"]');

This can be very useful for debugging focus position within a known area. Here's an example of the wrong element being focused within the parents scope:

it('should focus the first element of a dropdown', () => {
  body.innerHTML = `<nav><a href="/">Home</a><a href="/blog">Blog</a><a href="/about">About</a></nav>`;

  const nav = body.querySelector('nav');

  nav.children[1].focus();

  expect(nav, 'to contain focused element matching', 'a[href="/"]');
});

The output when the test fails helps you spot the error:

Pull requests

• #330 Add 'DOMElement to contain focused element' assertion (Andreas Lind, Peter Müller)
• #329 Add ':focus' indicator in element start tag (Peter Müller)