Recently we released a change that broke the entire website. I'm tired of not having a testing facility for our javascript. We make our own xtag components, and we have a bunch of js functions. One of the problems that I am having with testing facilities like Jasmine, is that I want to test focusing, clicking and tabbing.
Example:
<input tabindex="1" />
<custom-xtag-component tabindex="3"></custom-xtag-component>
<input tabindex="2" />
<input tabindex="4" />
(Before I get any comments on it, we can't have singleton xtag components that I am aware of.)
What I want to test is to tab from 1->2->3->4 correctly. I manually tested two of my components. One succeeds, the other fails.
I have seen some testing facilities that I like, but I could not find one that tests this functionality. I know that js by itself cannot test tabbing like that, am I asking too much? If it can be done, then with what js testing library can I test this automatically? I don't want to test it manually every time I change the js.
Dear readers from the future:1(Obligatory xkcd reference)
Tabbing from one field to the other cannot be simulated.2
So, the best way to test this is to make sure the custom gs-element moves the tabindex to the input inside it correctly. In order for tab to work correctly, (or any other user action for that matter) you must do certain things. Those prerequisites for the action can be tested, the action itself cannot.
I hope this helps someone.