M
A further problem was that jsdelivr.net only has vue-test-utils version 1.0.0-beta.11, which has a date of 11th Jan 2018?!?!
NPM is already at version 1.0.0-beta.29. So I switched to unpkg.com:
<script src="https://unpkg.com/@vue/test-utils@1.0.0-beta.29/dist/vue-test-utils.umd.js"></script>
Now the wrapper which I get when I select the q-input finally has a setValue function, and things are working MUCH better.
I still have to mess around with focusing the element, but that makes sense, because I’m using lazy rules. wrapper.find(...).trigger("focus") doesn’t seem to work on a q-input but I can use native Javascript which works find. Maybe because I appended the wrapper.element to a div in my browser while running the tests. Note: I’m not following the docs here, and I’m running the tests in the browser using QUnit so that I can interact with the widgets if I need to, if a test isn’t working the way I expect it to.
The focus and blur process required in the test is complicated but lazy-rules just works that way, so I have no other choice:
rules are not validated until the field is focused
rules are not validated the first time until the field loses focus
rules are continuously validated after returning to the field
In order to get the validation to fire after blurring the first time I had to do a “nextTick”, i.e. await on a setTimeout(..., 0). I guess quasar/vue are waiting for some messages in the queue to be processed by the event loop. See the link to my example code below for more details.
Once you understand that and program the test to expect that behaviour, the test works quite well.
An example is here:
https://github.com/maxant/kafka-data-consistency/blob/14f62badf13188ed153ae38de00aa9dc2042f27c/ui/claims.spec.js
If you check that project out and serve https://github.com/maxant/kafka-data-consistency/blob/14f62badf13188ed153ae38de00aa9dc2042f27c/ui/tests.html using a simple web server like nodes http-server, you can see all the tests running in the browser, and you can see the components
So, summary:
wrapper.setValue(...) from vue-test-utils works fine with a q-input.
same for q-btns
if you use lazy-rules then expect to have to focus and blur the q-input
wrapper.find(...).trigger("blur") or “focus” doesnt work => instead use native calls
that might only work if the component is appended and actually visible in the browser… not sure
my original question was whether quasar provided any utility functions to help test widgets, but I don’t currently believe any extra stuff is required - vue-test-utils suffices
Thanks for the help!
Ant
