Thank you for the time to writing this awesome tutorial!
Working through it has tremendously improved my understanding of the bits and pieces that make up testing in JS in general and for web components in particular.
I have been fiddling around with the "updates are asynchronous" problem, and found what looks like a solution: The updateComplete promise.
Using this promise, waiting for the updates to finish seems straight forward:
The tests pass using this construct, but -- as you already pointed out -- passing tests doesn't mean the tests actually work correctly. So maybe that's introducing more trouble down the line or hiding something, that I am unaware of, but still I have to ask: Is there a particular reason, you decided not to use updateComplete?
you are correct - using updateComplete will make the test pass. And in tests I use updateComplete a lot :) even the fixture itself relies on it 💪
However, setting properties is usually not an async action. So you would need to know that it's async and then you would need to know how to await this async-ness.
For logging it could be ok to stay async, unless you are actually logging timings 🙈
However other things
el.firstName='Foo';el.lastName='Bar';// would require an await el.updateComplete; if it's asyncif(el.fullName==='Foo Bar'){...}
really would feel strange if they only work if you await an rendering update?
the "calculation" of a fullName should not depend on the updates of the dom.
Thank you for the time to writing this awesome tutorial!
Working through it has tremendously improved my understanding of the bits and pieces that make up testing in JS in general and for web components in particular.
I have been fiddling around with the "updates are asynchronous" problem, and found what looks like a solution: The updateComplete promise.
Using this promise, waiting for the updates to finish seems straight forward:
The tests pass using this construct, but -- as you already pointed out -- passing tests doesn't mean the tests actually work correctly. So maybe that's introducing more trouble down the line or hiding something, that I am unaware of, but still I have to ask: Is there a particular reason, you decided not to use
updateComplete?thxxxx ❤️
you are correct - using
updateCompletewill make the test pass. And in tests I useupdateCompletea lot :) even thefixtureitself relies on it 💪However, setting properties is usually not an async action. So you would need to know that it's async and then you would need to know how to await this async-ness.
For logging it could be ok to stay async, unless you are actually logging timings 🙈
However other things
really would feel strange if they only work if you await an rendering update?
the "calculation" of a fullName should not depend on the updates of the dom.
I hope this makes it a little more clear 🤗
you can also read more in the original issue: github.com/Polymer/lit-element/iss...
Ah yes, I see what you mean now. Thanks for the added details.
I even had a look at the issue before I wrote my comment, but I just didn't get it in its entirety 🙈