Skip to content

juanca/accessible-query

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

accessible-query

The one query to rule them all.

Motivation

Most UI is pretty static. Queries such as getBy* are more than enough to make assertions. However, when you put it all together, a UI will be asynchronous. This library helps simplify test coverage in finding specific accessible UI with specific state.

For example, imagine a user action disables an input element. The test coverage would look something like:

// Without
const node = await waitFor(() => {
  const node = screen.findByLabelText('Some input');
  
  if (node.getAttribute('disabled') !== '') {
    throw new Error('Unable to find disabled input.')
  }
  
  return node;
});

expect(node).toBeDisabled();

// With
expect(await query('Some input', { disabled: '' })).toBeDisabled();

How to use

  1. Install accessible-query
  2. Import into test file
  3. await the result
  4. ???
  5. Profit!

Missing functionality

  1. Better error messaging -- provide context based on DOM / element state
  2. Better aria-* attribute support
  3. Better boolean attribute support (e.g. { disabled: true } matches on { disabled: '' })

About

The one query to rule them all

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published