Do you have a sample test ?

[tarjei]

Hi, do you have a sample code for testing a drag and drop interaction?

[mukeshsoni]

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

[tarjei]

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.

[gaearon]

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!

[tarjei]

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 notifications@github.com:

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

[gaearon]

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.

[stefvhuynh]

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.

[gaearon]

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.)

[stefvhuynh]

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

[gaearon]

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.

[stefvhuynh]

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.

[stefvhuynh]

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: [] } }
    );
}

[gaearon]

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?

[stefvhuynh]

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

[gaearon]

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

[gaearon]

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

[tarjei]

Great work - and a brilliant component!

Thanks!

2015-05-19 14:11 GMT+02:00 Dan Abramov notifications@github.com:

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

[stefvhuynh]

looks great!