How to unit-test a component? Guidance needed

[thebarty]

Hi guys,

@mitar: Do you think you can give some best-practise guidance on how to test a BlazeCompoent? I love the idea of writing unit-tests for templates as indicated in https://guide.meteor.com/testing.html#simple-blaze-unit-test.

How would you do this with BlazeComponents?

[mitar]

You should check tests for Blaze Components itself. :-) I think they do similar things. You can render it, and then inspect the output.

[thebarty]

Thanks for the amazingly quick response.

OK, with the help of renderComponentToHTML() we can render the template and then text-inspect it. And I guess this is where it STOPS/ENDS.

I am starting to see the BIG advantages of React-Land, where you would now be able to see and inspect the component within https://github.com/storybooks/react-storybook.

DummyQuestion: There is NO way to do something like this in blaze, right?

[mitar]

You can also do renderComponentToHTML(), then parse it with jQuery ($.parseHtml), and then use selectors to investigate the state of it. So that you do not have to be messing around with strings.

DummyQuestion: There is NO way to do something like this in blaze, right?

Maybe you should check:

http://meteor.toys/

See "template inspector". I think you can write to the author to request components support. :-)

There is some console support for debugging. But yes, making a nice UI -- somebody can do it. Everything is there you need. It is easy to get to a component from a DOM element, so then you can inspect its state.

[thebarty]

@mitar: you are the man!

This is how the story goes: After playing around for it for 4 hours, I still could not get it to work with my quite-complex template.

The first cradle was to get fixtures working on client, which you can get to work using https://atmospherejs.com/hwillson/stub-collections. Still I have a little problem getting simple-schema to work with it - probably because I am using a "transform" approach for collection-helpers (hwillson/meteor-stub-collections#7).

The current cradle which i did NOT manage to climb, is debugging blaze-error messages. When running a const html = MyComponent.renderComponentToHTML(null, null, data, right now mocha is giving me this totally uninformative error:

Error: No such function: _packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3157:24
call@packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:172:23
mustacheImpl@packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:106:30
mustache@packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5

Well, what the hell does that mean? I am guessing that it might have to do with some global template-helpers, p.e. using isInRole of alanning:roles. But still I kind of doubt it, because usually Blaze is so forgiving and does NOT throw much errors. Maybe it has to do with the collection-stubbing mentioned above... maybe... maybe... it is starting to worn me out.

So I am switching back to running unit-tests as chimp-acceptance-tests for now. They are MUCH slower to run, but I need to get some results by this afternoon.

Anyways. I'd actually pay for a tutorial on how to unit-test complex templates using Blaze-Components. 👍

[mitar]

It would be really great if you could provide some small reproduction. A repository, where you put together what you are trying to do. A simple test case, mocking everything you use and so on.