Testing

[jhollingworth]

• We need a decent story for testing, in particular testing action creators and stores.
• @mohanzhang showed some examples about how to do this, just need to write it up as a guide

[dmitry]

Try to build discussion board/forum, I think you can test all the possible cases, that includes:

• user registration and login
• threaded routing
• state for topics and posts
• pagination
• offline support
• caching
• uploading of an attachment
• markup encoding/decoding
• write tests for all those features
• search engine friendly
• i18n

And many more stories can be tested.

[cyrusdavid]

👍

[dariocravero]

Hi all, I'm putting together a guide on testing marty types here. I think we should merge the relevant bits afterwards :). It uses mocha but could very well be abstracted away from it and other test suites -like tape or jest- could be used then.

[chrisbarmonde]

One thing I feel is worth mentioning since it's caused me all kinds of problems recently (and this is a React TestUtils problem, not a Marty problem):

When using React's TestUtils.renderIntoDocument, it never ends up "unmounting" the components you pass in because it just "renders" them in a detached DOM node. This, however, creates havoc when you're using containers because the observers are never disposed as a result. So you'll inevitably see really bizarre side-effects while testing stores or something seemingly unrelated further down the line because the container will still be observing and reacting to changes.

I've found you basically have a couple of choices:

1. Call component.observer.dispose() manually. This assumes that no children inside the component have containers or if you're testing your container directly.
2. Probably the better option: Call React.unmountComponentAtNode(React.findDOMNode(component).parentNode); once you're done to force all the unmount logic to run on the node and its children. This is necessary if your containered component has children that also have containers to ensure they're also disposed.

I'm not quite sure where this fits into whatever anyone is working on, but there you go.

Edit: I guess I should say there is a third option: Just render <Component.InnerComponent {...props} /> instead of the container.

[oliverwoodings]

https://github.com/QubitProducts/react-test-tree

This might help you with testing. It's a library we wrote at Qubit that
makes testing react components so much simpler.
On 22 May 2015 09:28, "Chris Barmonde" notifications@github.com wrote:

One thing I feel is worth mentioning since it's caused me all kinds of
problems recently (and this is a React TestUtils problem, not a Marty
problem):

When using React's TestUtils.renderIntoDocument, it never ends up
"unmounting" the components you pass in because it just "renders" them in a
detached DOM node. This, however, creates havoc when you're using
containers because the observers are never disposed as a result. So you'll
inevitably see really bizarre side-effects while testing stores or
something seemingly unrelated further down the line because the container
will still be observing and reacting to changes.

I've found you basically have a couple of choices:

1. Call component.observer.dispose() manually. This assumes that no
   children inside the component have containers or if you're testing your
   container directly.
2. Probably the better option: Call
   React.unmountComponentAtNode(React.findDOMNode(component).parentNode);
   once you're done to force all the unmount logic to run on the node and its
   children. This is necessary if your containered component has children that
   also have containers to ensure they're also disposed.

I'm not quite sure where this fits into whatever anyone is working on, but
there you go.

—
Reply to this email directly or view it on GitHub
#19 (comment).

[jhollingworth]

@chrisbarmonde I actually just blogged about another library called react-test-tree which makes this process a bit easier:

// instead of
TestUtils.renderIntoDocument(<Foo />);

React.unmountComponentAtNode(React.findDOMNode(component).parentNode)

// you do

let tree = testTree(<Foo />);

tree.dispose();

[jhollingworth]

Oh, @oliverwoodings beat me to the punch!

[jmcbee]

WAHAHA

[chrisbarmonde]

Hahaha, awesome. I'll check it out. Thanks guys!

[jhollingworth]

Just created a repo with examples for v0.10 https://github.com/martyjs/marty-test-examples