This morning I was working on a DropdownButton widget:
I wanted to implement keyboard control so that when it’s focused, I can slect an option with the arrow keys. I begin with a new test that would simulate a key press, so I wrote:
simulateKeyDown(toggleButton, DOWN_ARROW);
// TODO: assert things
Now I need to define the simulateKeyDown function and the DOWN_ARROW
constant. The function can go somewhere below, but the constant I have
to define somewhere above. — I don’t like that because it’s noisy: the
constant definition is a test implementation detail, and I want it out
of the way.
Another option would be to defined it somewhere below in one of the outer scopes. I usually do that with imports, but I don’t like that either because it’s disconnected from the place where it’s being used.
I like the test code to be clear, and this constant definition didn’t
quite fit. I began to wonder wether this constant already exists
somewhere on the Event and I don’t have to define it at all. Went to
the browser console and poked around a bit, but without much success.
Then went to check the
KeyboardEvent docs on MDN
and scanning the property list found that keyCode that I was using…
Warning: This attribute is deprecated; you should use
KeyboardEvent.key instead, if available.
KeyboardEvent.key!? What’s that? 8-| Went back to the console, and typed:
document.body.addEventListener('keydown', function(e) { console.log(e.key); })
pressed some keys and got a bunch of undefineds. Hm… not supported in
Chrome? 8-/ Went back to the property list, and found
KeyboardEvent.code.
Playing with it in the console shows that it is supported. OK. So now,
instead of defining a constant for every key I need need, I can use its
string name:
simulateKeyDown(toggleButton, 'ArrowDown');
That’s nicer! I can now have this little simulateKeyDown extracted as
a test helper and use it across the tests.
This is neat, and I wanted to find The Official® list of key names, so that I know where to look for when I need another key. I googled around and stopped on W3.org: UI Events KeyboardEvent code Values. Nice!
* * *
It seems that browser support is not quite there for now: the code property is implemented by Firefox and Chrome, and key is implemented by Firefox and IEs.
In my case it’ll be an Elecron app, so I don’t have to worry about browser support. 8-)