Add section to docs for testing web components

[treshugart]

Some basic principles should be noted:

• custom element polyfill and (a)synchrony, flush() etc
• Skate rendering at next microtask, so async
• asserting against shadow root content

How ^ can be made easier using something like https://github.com/treshugart/bore. More details: http://www.webpackbin.com/4yFHYyBGz.

[Hotell]

I would mark this as high priority. Test are mandatory thing for anyone who want's to start developing with skate. We are currently struggling with it at work

[treshugart]

Can you outline what you're struggling with? I'd like to solve it in bore and maybe see if we can move that over to the skatejs org if everyone agrees.

[Hotell]

It would be better to have here @elmariofredo who was responsible to setup tests with skate. We eventually ended with https://github.com/Polymer/web-component-tester

[elmariofredo]

well win of web-component-tester over bore is simplicity of setup. All you have to do is to create test harness file and that's all. It's ugly and huge black box and we might regret this decision, but it's working for now and we have saucelabs test with "minimal" effort.

With bore you have to setup all that karma webpack, typescript/babel nonsense and then you still have lot of work ahead towards CI multi browser testing.

I would love to have bore, but I guess it's lacking real world example which would convince others that it's worth of investment. Also having it running in nodejs would be huge win for developers, I know that it's not in your hands just saying 😉

[treshugart]

You should be able to use it in the wc tester harness. It's just a DOM abstraction that also helps eliminate polyfill boilerplate.

[elmariofredo]

That's actually great idea! Will definitely try that. I didn't though about this because of jsx like syntax which would require transpilation and that is part I'm struggling with in wct, but as I looked into bore code there should be no problem with passing simply Element(node) to the mount function. Next time I will dig more in to code before ditching library 😄

[treshugart]

@Hotell @elmariofredo screenshot of using bore in wct

[elmariofredo]

👍

setup is still rough, but thanks for pushing forward 😄

once I will fix small issues with loading I will push it to blaze-elements

thanks!

[treshugart]

@elmariofredo

setup is still rough

Can you elaborate? I'd like to resolve it if we can.

[elmariofredo]

sorry for late answer. Well it's kind of hard to get webpack and wct to work together so nothing related to bore.

I you are interested I have made it work here https://github.com/wc-catalogue/blaze-elements/blob/elmariofredo/test/packages/collapsible/index.test.tsx at the end it's simply running concurrently webpack and wct in right order 😉 I'm not super happy about that, but at this moment I don't have much time to investigate better way how to intergrate wct with webpack.

As a side question, do you have plans to have something like https://github.com/airbnb/enzyme/blob/4d1517ab01c01011d7e7d1b4e9ae4201cd23268d/docs/api/ReactWrapper/simulate.md or https://github.com/PolymerElements/iron-test-helpers/blob/master/mock-interactions.js integrated into bore?

[treshugart]

@elmariofredo I added an issue for that skatejs/bore#7. If you have any input on that, feel free :)

I was also able to do this for running tests with WCT:

"scripts": {
  "test": "webpack --config webpack.config.test.js && wct .tmp/test.js && rm -rf ./.tmp"
},

Where webpack.config.test.js is a custom config that output s a .tmp/test.js file with sourcemaps and then wct just runs that. Watching can't be done as wct doesn't support it yet. However, when it does, you can add --watch to the webpack call and then whatever to the wct call. You'll have to run them as background for && to work obv, but should be doable once implemented in wct.

Alternatively, you might be able to use script type module in an html file and webpack in watch mode locally and use wct in ci. I haven't tried this yet either, but it seems like it'd work. Interested now.

[elmariofredo]

cool!

yeah that's setup I have started with but the problem is dev experience with that approach, it's ok for CI but for building component library it's straight way to hell.

I have ended up with running webpack-dev-server and wct using concurrently package, so I can nicely reload test just by reloading browser window see https://github.com/wc-catalogue/blaze-elements/blob/204e5021143835042547e2c6c5f4b03b2fc3c48a/package.json#L17

Webpack dev server should be able to reload file using websockets, but for some strange reason it doesn't work. I'm suspecting iframe hell which wct heavily depends on, not sure but will keep trying.

Script type module looks interesting with working implementation in webkit it's good idea to give it a try, but for now it won't bring me anything more than what I have now. As I'm digging more into wct, I feel that final solution should be one plugin away, let's see. At this moment our dev experience is on acceptable level.

[trusktr]

What I found works best for me is Karma running tests through Electron headlessly, thus test code has access to native Node.js and Browser APIs. See #1419 (comment) for details.