Alex is a Software Engineer working on Android development tools, especially Android Studio, at Google. His interests include Java, API design, OOP, IDEs and testing. Alex spends some of his spare time working on Open Source, blogging, writing technical articles, and speaking at international conferences. The opinions expressed here represent his own and not those of his employer. Alex is a DZone MVB and is not an employee of DZone and has posted 49 posts at DZone. You can read more from them at their website. View Full User Profile

Testing Drag 'n Drop in JavaFX UIs (with Demo)

02.06.2009
| 9771 views |
  • submit to reddit
I've been making some progress on the JavaFX UI testing front. I have added support for 'drag and drop' (dnd) JavaFX nodes to FEST-JavaFX.

Currently, support for dnd is complete. I added the class NodeDragAndDrop which is capable of dragging nodes and dropping them either inside another node or at any point in the UI. To test this class, I used the "Drag and Drop" sample application that comes with NetBeans 6.5. Here is a screenshot of the application:

As you may guessed by now, this sample application allows users to drag the red ball and drop it anywhere in the window.

As a side note, we can assign a unique id to a JavaFX node, to guarantee that node lookup is always reliable. In our example, I assigned the id "ball" to the node to drag and drop:

Stage {
title: "Drag And Drop: v1"
scene: Scene {
content: Group {
content: [
ImageView { image: Image { url: "{__DIR__}images/background.png" } },
DraggableImage {
id: "ball"
maxX: 240
maxY: 320
image: Image { url: "{__DIR__}images/ball.png" }
}
]
}
}
}

We can use the class NodeDragAndDrop directly to simulate a user dragging and dropping a node, but it would require too much code in our tests. Following FEST's approach for compact and readable APIs, I created ImageFixture. This class can handle testing of JavaFX image nodes and also provides shortcut methods for dragging and dropping nodes.

The following test that the red ball can be actually dragged by the user and dropped anywhere in the UI:

@Test public class DragAndDropBallTest {

private JavaFxRobot robot;
private FrameFixture frame;

@BeforeMethod public void setUp() {
robot = BasicJavaFxRobot.robotWithNewAwtHierarchy();
frame = new FrameFixture(robot, launch(Main.class));
}

@AfterMethod public void tearDown() {
robot.cleanUp();
}

public void shouldDragAndDropBall() {
Point target = new Point(100, 100);
ImageFixture image = frame.image("ball");
image.dragAndDropTo(target);
Rectangle2D boundsInScene = image.node().getBoundsInScene();
Point center = centerOf(image.node());
assertThat(boundsInScene.getX()).isEqualTo(target.x - center.x);
assertThat(boundsInScene.getY()).isEqualTo(target.y - center.y);
}
}

The method dragAndDropTo(Point) is the one that simulates a user dragging the ball and dropping it at the point [100, 100] in the window hosting the UI. It uses the AWT Robot to actually move the mouse pointer as if a user was interacting with the UI. Currently, the implementation of dragAndDropTo(Point) drops the node at a point where the center of the node is at the given coordinates. That's why our assertions use the coordinates belonging to the center of the node to verify that the ball was actually dropped at the desired point.

Please click the image to see the test running: (QuickTime format):

Feedback is always appreciated.

From http://jroller.com/alexRuiz/

Published at DZone with permission of Alex Ruiz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Sam Zuo replied on Tue, 2009/06/23 - 11:13am

thank you for sharing... I'm new for JavaFX, would you please tell me how to drag and drop a node along a path (not animation)?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.