@carbon/utilities/lib/makeDraggable/makeDraggable.test.js

Utilities and helpers to drive consistency across software products using the Carbon Design System

"use strict";var s=require("../makeDraggable"),n=require("@testing-library/react");function o(e={}){const t=document.createElement("div");t.style.position="absolute",t.style.left="0px",t.style.top="0px";const l=document.createElement("div"),p=document.createElement("button");return t.appendChild(l),t.appendChild(p),document.body.appendChild(t),(0,s.makeDraggable)({el:t,dragHandle:l,focusableDragHandle:p,dragStep:e.dragStep,shiftDragStep:e.shiftDragStep}),{el:t,handle:l,focusableHandle:p}}describe("makeDraggable",()=>{it("should set cursor style on handle",()=>{const{el:e,handle:t}=o();expect(t.style.cursor).toBe("move"),expect(e.style.cursor).toBe("default")}),it("should keep position as absolute when already absolute",()=>{const{el:e}=o();expect(e.style.position).toBe("absolute")}),it("should move element with arrowRight with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight"})),expect(e.style.left).toBe("8px"),expect(e.style.top).toBe("0px")}),it("should move element with arrowUp with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp"})),expect(e.style.left).toBe("0px"),expect(e.style.top).toBe("-8px")}),it("should move element with arrowLeft with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowLeft"})),expect(e.style.left).toBe("-8px"),expect(e.style.top).toBe("0px")}),it("should move element with arrowDown with default shiftDragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.left).toBe("32px"),expect(e.style.top).toBe("0px")}),it("should move element with arrow keys(dragStep)",()=>{const{el:e,focusableHandle:t}=o({dragStep:10});t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight"})),expect(e.style.left).toBe("10px"),expect(e.style.top).toBe("0px"),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowLeft"})),expect(e.style.left).toBe("0px"),expect(e.style.top).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown"})),expect(e.style.top).toBe("10px"),expect(e.style.left).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp"})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0)}),it("should move element with shift + arrow keys (shiftDragStep)",()=>{const{el:e,focusableHandle:t}=o({shiftDragStep:20});t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown",shiftKey:!0})),expect(e.style.top).toBe("20px"),expect(e.style.left).toBe("0px"),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("20px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0)}),it("should move element with mouse drag",()=>{const{el:e,handle:t}=o();n.fireEvent.mouseDown(t,{clientX:50,clientY:50}),n.fireEvent.mouseMove(document,{clientX:100,clientY:120}),expect(e.style.left).toBe("50px"),expect(e.style.top).toBe("70px"),n.fireEvent.mouseUp(t),n.fireEvent.mouseMove(document,{clientX:100,clientY:120}),expect(e.style.left).toBe("50px"),expect(e.style.top).toBe("70px")})});