Do you have a sample test ? about react-dnd HOT 17 CLOSED

It's in the examples folder in the repo. And the README has link to live demo for the same code.

from react-dnd.

AFAIK the examples folder only contains demos - not tests. I'm looking for code to use for writing my own tests testing the dnd interactions.

from react-dnd.

Ah, I get it now. No, this project has no tests. We use it extensively in production though.

If you find a meaningful way to test it (a lot of its logic has to do with browser differences, for example), please let me know!

from react-dnd.

I'm mainly looking for ways to simulate drag and drop, but I'll let you
know. Thanks for a nice library!

2015-01-04 14:49 GMT+01:00 Dan Abramov [email protected]:

Ah, I get it now. No, this project has no tests. We use it extensively in
production though.

If you find a meaningful way to test it (a lot of its logic has to do with
browser differences, for example), please let me know!

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

Tarjei Huse
Mobil: 920 63 413

from react-dnd.

I'm just not familiar with React testing infrastructure. If it allows simulating dragstart / dragover / dragend you'll be fine. If not, maybe you can suggest some way in which I can add test helpers. I'm just not sure what kind of API is needed there.

from react-dnd.

I would also be interested in this. But at an even more basic level, how would you propose writing a simple unit test for a component that uses the DragDropMixin?

This is a fantastic library, by the way. I'm using it for some production code, but I'm required to write some unit tests for code using it.

from react-dnd.

Thanks!

We can probably go two routes here:

1. Simulate "logical" states in library
2. Simulate actual DOM events on some window and have library catch it

Which is closer to what you'd like to test? Do you run your tests in a browser or in some fake DOM env?

(Disclaimer: I never wrote tests for UI in my life and know very little about it.)

from react-dnd.

I'm using jest by facebook right now and i believe jest tests run in a virtual DOM.

from react-dnd.

Can you share a minimal Jest example for the kind of thing you'd like to test?
Just something I can get running to see what I can do.

from react-dnd.

i think it would be great if there's some way to determine whether a component is being dragged, dropped, etc. so, if a test could do something like

/* 
 * Code to simulate mouseDown, mouseMove on someComponentInstance
 */
expect(ReactDnD.getDragState(someComponentInstance)).toBeTrue();

I'm not sure if this is a great example, as I am really new to UI testing, myself.

from react-dnd.

So, using Jest, I was able to test drag and drop functionality with this function. I used React's TestUtils and simulated dragstart and drop events. Some code in the configDataTransfer file required some attributes on the event that were not provided by jest, so those necessary properties are included. Do you have suggesting for what kind of mock data should be included in the dataTransfer object?

simulateDragAndDrop: function(dragComponent, dropComponent) {
    TestUtils.Simulate.dragStart(
        dragComponent,
        { nativeEvent: { dataTransfer: {} } }
    );

    TestUtils.Simulate.drop(
        dropComponent,
        { dataTransfer: { types: [] } }
    );
}

from react-dnd.

Hmm.. I think you should just add whatever stuff necessary to make it work and see :-)
Anything you want to test in particular that this approach doesn't give you yet?

from react-dnd.

not at the moment. i will get back to you if something comes up or if i come up with a better solution.

from react-dnd.

Closing, as it's not really an issue. We will try to make the testing story better after v1.0 with #55.

from react-dnd.

Testing is now supported, even without the browser: http://gaearon.github.io/react-dnd/docs-testing.html

from react-dnd.

Great work - and a brilliant component!

Thanks!

2015-05-19 14:11 GMT+02:00 Dan Abramov [email protected]:

Testing is now supported, even without the browser:
http://gaearon.github.io/react-dnd/docs-testing.html

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

Tarjei Huse
Mobil: 920 63 413

from react-dnd.

looks great!

from react-dnd.