DEV Community

Discussion on: Testing Workflow for Web Components

Collapse
 
enginisha profile image
Enginisha

I an not able to set up this.. Npm run test giving error.. Saying no test specified.. Content of blog is good.. But i think some setup file or steps are missing..

Collapse
 
dakmor profile image
Thomas Allmer • Edited

hey, thx for letting me know :) the setup changed a little as the @open-wc generator evolved. I updated the appropriate part.

If it doesn't work out for you the easier would be to clone github.com/daKmoR/testing-workflow... and play around there - it has a working setup.

Collapse
 
enginisha profile image
Enginisha

Thanks for replying . Can you have all types of testing methods like event , loading of data like that.The link that you have shared consist of high level testing.

Thread Thread
 
dakmor profile image
Thomas Allmer

This is a setup of a Testing System you can test whatever is possible to test with JavaScript. Writing tests first usually results in a better API as you will need to make sure that your code is testable and all the needed information is publicly accessible.

For events just add an event listener and then expect if it was called the correct amount of times and with the expected parameters. Sinon can help in this case.

For data loading it really depends on your solution - sometimes it makes sense to check which properties end up on the web component and you there could be a "loading complete event" you await before testing. Or the data management has nothing to do with the component as it just get's passed in all the information via a global state management system.

So in short you should be able to test almost everything not only web components related :)

Thread Thread
 
enginisha profile image
Enginisha

Thank you Thomas. One thing i would like to hear from you is webcomponenets using angular vs lit-elements. what is your opinion about this. if you are not aware about this , can you give me some references regarding the same.

Thread Thread
 
enginisha profile image
Enginisha

Hi Thomas,

i made one dropdown component and i want to test on changing on value one event should dispatch. but dispatch event method is on selection change method. how i will call selection change method, by firing event (if yes how?)or by taking the id on select tag (which is inside dropdown component)and firing event.

Collapse
 
enginisha profile image
Enginisha

HI Another query is what is the snapshot check use case , if somebody have updated then our changes are lost right? so what will be the right use case for testing the web components via snapshot

Thread Thread
 
dakmor profile image
Thomas Allmer

Snapshots are useful especially for components which very big dom trees - in these cases it's pretty painful to maintain 2 "versions" of the same dom (e.g. the actual dom and the dom you compare to in your test).

With snapshots you will be get an error whenever the html structure changed - what comes next depends:

  1. if you did not intend to change the dom (e.g. refactors, certain types of bug fixing, optimizations, ..) then something went wrong and you should fix it so the test passes again
  2. the dom change was intentional - then you just run the "update snapshot command" and your tests are green again

The important part here is that updating the snapshots is faster/simpler than manually adjusting a "dom string" (hence for doms with less then ~5-10 nodes it's probably impractical)