diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.test.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.test.tsx
index b0b9d00b47..a37ff0117f 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.test.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.test.tsx
@@ -21,7 +21,11 @@ function TestDraggable(props: {
constrain,
gestureTarget,
});
- return ;
+ return (
+
+ );
}
describe("useDraggable", () => {
@@ -177,6 +181,45 @@ describe("useDraggable", () => {
// - (11, 9), neither userTransform nor the inverse was applied.
expect(onMoveSpy).toHaveBeenCalledWith([10.5, 9.5]);
});
+
+ it("moves a draggable element with the keyboard", async () => {
+ // Arrange: a 200x200px graph with a 20-unit range in each dimension.
+ // One graph unit = 10px.
+ const mafsProps = {
+ width: 200,
+ height: 200,
+ viewBox: {
+ x: [-10, 10] as Interval,
+ y: [-10, 10] as Interval,
+ padding: 0,
+ },
+ };
+ const onMoveSpy = jest.fn();
+ render(
+
+ [
+ Math.round(point[0]),
+ Math.round(point[1]),
+ ]}
+ />
+ ,
+ );
+ // focus the draggable element
+ await userEvent.tab();
+ await userEvent.tab();
+
+ // Pre-assert: the draggable element is actually focused
+ expect(screen.getByRole("button")).toHaveFocus();
+
+ // Act:
+ await userEvent.keyboard("{arrowright>1}{arrowup>1}");
+
+ // Assert: the element moved one step to the right and then one step up
+ expect(onMoveSpy.mock.calls).toEqual([[[1, 0]], [[0, 1]]]);
+ });
});
function mouseDownAt(element: Element, clientX: number, clientY: number) {