elementMatches function does not work with :focus pseudo-class

[MaksymDryha]

It seems like currently there is no way to check if an element is focused. We tried to do it using by is helper, but the elementMatches does not work with :focus pseudo-class. Maybe some kind of isFocused getter should be added, for example, like this:

function isFocused(selector) {
  return computed(function () {
    const el = this.$(selector);
    return document.activeElement === el;
  });
}

[Robdel12]

Hey @MaksymDryha thanks for opening an issue! This one is quite interesting 🤔 I'm curious why is(':focus') doesn't work for you. We've used it successfully in the past to assert elements have focus (here's an example of tests checking accessible routing w/focus: https://github.com/folio-org/ui-eholdings/pull/448/files#diff-ef32313c027eb5475d660e38876750d5) So that's interesting, I'd be keen to see a reproduction repo / gist / something.

In the mean time, you can absolutely implement that exact code on your interactor 😃 It could be a custom method on that interactor or you could create a custom interactor creator & import isFocused into many interactors. Here's an example of a custom interactor creator: https://github.com/Robdel12/percy-interactor/blob/master/src/index.js#L47-L61 (you can also look at the interactors directory, they're all modeled this way: https://github.com/bigtestjs/interactor/tree/master/src/interactions)

Lastly, we're implementing something just like you've written in an update coming to Interactor soon. We're introducing a concept of "validations" to interactor. So keep your eyes peeled for that too :)

[MaksymDryha]

Hi @Robdel12 ! The example of using is(':focus') is actually the code that I'm working on. These tests fail for some reason. Maybe something changed from the moment when they were written, idn. I debugged the elementMatches function, which is used by is and here is what I found out:

function elementMatches($el, selector) {
    /*
    imagine that $el is focused, at this moment we would have:
    $el === document.activeElement -> true
    but:
    $el.matches(':focus')  -> false
    */
    if (!$el.matches) {
      return $el.msMatchesSelector(selector);
    } else {
      return $el.matches(selector);
    }
  }

It's nice to know, that validations are coming :) Thanks for your reply!

[MaksymDryha]

@Robdel12, when can we expect to see validations introduced? It's a highly expected feature for our project. Are there at least approximate dates of the next release?