Storybook and unit tests

[wilcoschoneveld]

Hey!

I've smashed together a proof of concept for creating unit tests with storybooks. The stories can be used for demonstration purposes as well as testing the animation logic.

• I've used yarn to set things up (storybooks doesn't work well with npm)
• I don't fully understand what your dev workflow is yet, so I might have broken some things
• You can start storybooks with yarn storybook
• I've added two basic stories (a fade in and move to right animation)
• I stub the requestAnimationFrame method to allow stepping through the animations
• I've shown that the properties of the animated div can be inspected in a unit test

It's a very rough proof of concept, what do you think?

[drcmda]

@wilcoschoneveld wow, thanks a lot, any kind of improvement to testing in general is a welcome addition. I normally use the examples wolder project for visual proofing, but that's fairly limited. I thought about snapshotting it, though. Other than that storybook could also be a nice tool for learning.

Do you plan to add some more stories to it? I'll def merge this and don't worry, nothing's broken. :-)

[wilcoschoneveld]

Good to hear! I'm going to try and find the time to work on this more regularly.

I added one fullscreen example to see how this would work in storybooks. I'm not yet sure how I can alias the 'react-spring' package to make the importing easier. How do you do this? Unfortunately there is a console warning when toggling this example but I haven't digged into the internals of react-spring to see whats going on, maybe you can have a quick look. Would you be ok to migrate all the examples to the storybook? I'm interested to hear what your development workflow is for this project. Maybe we could have a chat outside of this issue so we could do a quick questions and answers session.

I added a couple more stories. I think it would be cool to have a lot of small separate tests in the storybook as demonstrations but also to use as unit tests. However I haven't yet found a way to reliably stub requestAnimationFrame so that a single step is always the same duration in the spring. Again, I haven't dug that deep yet but it looks like animations depend on Date.now()? Maybe we need to make the animation timing functions pluggable so we can control it from unit tests. What are your thoughts on this?

I'm also trying to test Transition with enzyme mount but for now I can't get to the second child, small steps... 😄

[drcmda]

@wilcoschoneveld the framing function is pluggable, you can readily exchange it.

import { Spring, Globals } from 'react-spring'
Globals.injectFrame(cb => global.requestAnimationFrame(cb), cb => global.cancelAnimationFrame(cb))

The current spring does depend on date.now(). Actually this is one of the things i want to look into. Right now that oscillator is a huge function with loops and whatnot ... but games usually use semi-explicit euler, which is really, really simple and probably faster as well. But i don't know what made Christopher Chedeau initially go for RK4 instead. Mysteries ...

[wilcoschoneveld]

Thanks for the snippet. I made the now function injectable as well and I got the tests to be reproducible. I'll create some tests and come back to you

[drcmda]

@wilcoschoneveld sounds fantastic! Whenever you need this merged just ping me here.

[wilcoschoneveld]

I introduced react-testing-library and I'm very happy with the resulting test setup: toggle.test.js

[wilcoschoneveld]

Added more examples and removed enzyme

Todo:

• Setup jest command for CI (with coverage)
• Setup jest command for devs (watch, no coverage)
• Port a couple more full screen examples

[drcmda]

Tests started working again :-)

BTW, i've started a documentation using mdx based docz, i think it could well live side by side storybook. Docz leans more into documentation, storybook would be great for visual proofing/testing.

[wilcoschoneveld]

I added two more tests for the delay and immediate props. I'm happy with the current setup and I think it should function as a good basis for the test suite. I added package-lock.json to gitignore to indicate that we should only use yarn and the accompanied yarn.lock file.

I like the idea of docz, I'm interested to see how that would work out!

If you're ok with everything you can go ahead and merge 👍