[Tests] Automated test suite needed about formsy-material-ui HOT 16 CLOSED

Added some common test cases (not automated tests) for Textfield: https://github.com/mbrookes/formsy-material-ui/tree/textfield-testcases/test

from formsy-material-ui.

I can think of two types of automated tests that'll help with checking against new versions of Material-UI and Formsy:

1. For each Material-UI component that formsy-material-ui handles, assert that propTypes are what we expect them to be. E.g., in testing TextField, we could assert TextField.propTypes are what we expect.
2. We can assert that the Formsy mixin provides all of the expected functions.

These aren't comprehensive, but they're perhaps an easy, good start for protecting against breaking changes in the two libraries that formsy-material-ui depends on.

from formsy-material-ui.

1. Are the proptypes likely change though in a way that affects this library? Would it be better to test that things behave in a predictable manner given a known set of inputs? (As you can see, there's a reason this is flagged "help wanted"! 😆 )
2. Would it be a good idea to switch to ES6 classes first, and remove the mixin, rather than adding test that depend on it? https://github.com/christianalfoni/formsy-react/blob/master/API.md#formsyhoc

from formsy-material-ui.

1. Yes, I agree that the most important kind of test vis a vis material-ui is that the underlying component behaves predictably for a known set of props. And I do believe it's unlikely proptypes would change in a way that affects the library, but it's also an easy test to write and might provide useful feedback if/when material-ui changes its API.
2. Yes! At work, we're not using material-ui, so I've made a few components with the Formsy HOC. I'd be happy to help out in migrating to that. And I can use my experience in writing tests for those components, too.

Regarding testing tools and frameworks, what kind of things were you thinking about? I've had a great experience using mocha, chai, sinon, enzyme, and chai-enzyme together for testing React components.

from formsy-material-ui.

Thanks so much for the offer of help! I'm new to JS, so not familiar with all the testing tools or testing in JS in general, so whatever you feel works best - perhaps leaning towards whatever material-ui / formsy-react / react use, in that order, if there's any common ground there.

from formsy-material-ui.

I've started this branch. I'll make a PR for it to get a review when I get some decent tests. It uses most of the same testing tools as material-ui. One difference is that it uses enzyme; enzyme is a wrapper over React TestUtils, which is what material-ui uses. Enzyme is pretty expressive and makes writing tests for React components very clear and concise.

I'll also look into getting Travis CI set up as a tool for this GitHub repo. It would automatically test pull requests to verify they don't break anything.

from formsy-material-ui.

Thanks! Looks like a good start. 👍

from formsy-material-ui.

Here's my proposal for a testing framework: #50

If it seems good, then we can use it to build up the test suite over time.

from formsy-material-ui.

I'll also look into using Karma + Mocha rather than Mocha + JSDOM. That way, our tests would run in a real browser and let us perhaps avoid some pains associated with testing in JSDOM.

from formsy-material-ui.

@py-in-the-sky What pains have you experienced with jsdom? I'm using enzyme on a project at the moment for unit testing (well, just switched out my own jsdom helpers for enzyme). I haven't had too many issues. Complicated integration tests are done using real browsers, so none of that finds its way into jsdom tests.

from formsy-material-ui.

@nathanmarks For the most part, I love enzyme + jsdom. I've run into a few problems related specifically to testing forms in jsdom. In fact, they've all been similar to the one discussed here: facebook/react#1185 (comment)

Just out of curiosity, is the project you mentioned open source? Could you point to it? I'd love to see how others are using enzyme!

from formsy-material-ui.

@py-in-the-sky Unfortunately not.

But! I'm currently preparing a proof of concept PR for material-ui to split the test suite into browser and unit tests so that the components can be unit tested without a phantomjs browserify build required. This makes for a much happier time with TDD.

I wanted to contribute to material-ui but was frustrated that my only testing option was phantomjs + karma + browserify. There's also a significant lack of tests in there vs the number of components when you consider the popularity of the library. Maybe having an easier way to run quick tests on any component will encourage people to contribute more tests with their PRs.

It also makes development quicker (for some of us). Especially since you can basically twist your component any way you want in just a few lines of code -- that flexibility to test different possibilities can't be replicated in a demo (the current recommended method for checking your work in the CONTRIBUTING.md file).

from formsy-material-ui.

@nathanmarks That sounds terrific! If you could, please link it here when you're ready to PR it to material-ui.

I like the idea you have of splitting as many things out as possible away from karma tests. And I know what you're talking about with regards to quicker development. The setup I have at work is mocha + jsdom, and when I use it in watch mode, it makes for a great iterative-development experience -- feedback in under a second after making a change!

Cheers!

from formsy-material-ui.

@py-in-the-sky bingo!

I will definitely link you once I get it up and going (most likely by some time next week).

from formsy-material-ui.

@py-in-the-sky - @nathanmarks fantastic work on testing has been merged in Material-UI. Unit tests are now in development.

from formsy-material-ui.

I'm closing this, as @py-in-the-sky has done the hard work of putting a test suite in place. There's still work to be done on test coverage, but the ground-work is there. Thanks @py-in-the-sky. Come back any time! 👍

from formsy-material-ui.