Testing WebComponents
# newsc
Community Blogs Feed
04/23/2024, 12:10 AM📣 New post: Testing Lit components created with TypeScript and Vite using Web Test Runner
https://www.enkelmedia.se/blogg/2024/4/23/testing-lit-components-created-with-typescript-and-vite-using-web-test-runner
w
Warren Buckley
04/23/2024, 7:04 AMInteresting post @Markus Johansson be curious to know what your tests look like. Is there common things/patterns to test for
m
Markus Johansson
04/23/2024, 8:03 AMThanks @Warren Buckley! Still exploring ways to test. In the core they are testing things like “is the component an instance of X”, one can also test public properties etc. all the examples I’ve found so far is very explicit. Like querying the shadowDOM for a button to click etc. I’m looking for a cleaner way to approach it but not found anything yet.
Markus Johansson
04/23/2024, 1:43 PMThis is the direction that I seem to have to go
https://cdn.discordapp.com/attachments/1232121267121950791/1232325948171354132/image.png?ex=66290c79&is=6627baf9&hm=0a228727c351aad5390abcdbfc3ba86e6f0effa0f16bed11186acd44232ae3b5&
Markus Johansson
04/23/2024, 1:45 PMIn this scenario the component that I'm testing have a nested component (think I'm testing a "Button Group" that contains "Button"), seems like the way it's implemented in UUI is to query the shadowRoot to get a reference to these elements.
It would be much nicer if it was possible to use the syntax used by Playwright, to basically "get element by text", "get element by label" etc. to avoid having to hardcode the inner details of the component into the tests.
Seems like early days and probably need to do more research as well
7 Views