Add initial tests to drag-around examples (#3032)

* chore: upgrade dependencies

* test: add tests for drag-around-naive scenario

* test: add tests to CustomDraglayer

* chore: cut semver doc

* fix: add @types/react resolutions

* fix: remove unused imports

.yarn/versions/6fb81e4d.yml

@@ -0,0 +1,9 @@
+releases:
+  react-dnd-test-utils: patch
+
+declined:
+  - "@react-dnd/build"
+  - react-dnd-documentation
+  - react-dnd-examples-decorators
+  - react-dnd-examples-hooks
+  - react-dnd

package.json

@@ -62,22 +62,22 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
+    "@babel/core": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
     "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.12.13",
+    "@babel/preset-typescript": "^7.12.16",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.25",
-    "@types/testing-library__jest-dom": "^5",
+    "@types/node": "^14.14.27",
+    "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "alex": "^9.1.0",
     "conventional-changelog-cli": "^2.1.1",
-    "eslint": "^7.19.0",
+    "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-no-for-of-loops": "^1.0.1",
@@ -100,5 +100,9 @@
     "react-dnd-touch-backend": "workspace:packages/backend-touch",
     "rimraf": "^3.0.2",
     "typescript": "^4.1.5"
+  },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.1"
   }
 }

packages/build/package.json

@@ -8,13 +8,13 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@babel/core": "^7.12.13",
+    "@babel/core": "^7.12.16",
     "@babel/plugin-proposal-class-properties": "^7.12.13",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
-    "@babel/preset-typescript": "^7.12.13",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/preset-typescript": "^7.12.16",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-babel": "^5.2.3",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -27,7 +27,7 @@
     "gulp-plumber": "^1.2.1",
     "gulp-typescript": "^6.0.0-alpha.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.38.5",
+    "rollup": "^2.39.0",
     "rollup-plugin-terser": "^7.0.2",
     "through2": "^4.0.2",
     "tslib": "^2.1.0",
@@ -39,7 +39,7 @@
     "@types/babel__core": "^7.1.12",
     "@types/chalk": "^2.2.0",
     "@types/fancy-log": "^1.3.1",
-    "@types/node": "^14.14.25",
+    "@types/node": "^14.14.27",
     "@types/rimraf": "^3.0.0",
     "@types/through2": "^2.0.36",
     "@types/vinyl-source-stream": "^0.0.30",

packages/docsite/package.json

@@ -49,10 +49,10 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/plugin-transform-react-jsx": "^7.12.16",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "@types/react-helmet": "^6.1.0",
     "@types/react-tabs": "^2.3.2",
     "@types/rehype-react": "^4.0.0",

packages/examples-decorators/package.json

@@ -38,10 +38,10 @@
     "@types/faker": "^5.1.6",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.25",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
-    "@types/testing-library__jest-dom": "^5",
+    "@types/node": "^14.14.27",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@types/testing-library__jest-dom": "^5.9.5",
     "gulp": "^4.0.2",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",

packages/examples-hooks/package.json

@@ -37,9 +37,9 @@
     "@testing-library/react": "^11.2.5",
     "@types/faker": "^5.1.6",
     "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.25",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "^14.14.27",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "gulp": "^4.0.2",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",

packages/examples-hooks/src/02-drag-around/custom-drag-layer/Box.tsx

@@ -9,9 +9,17 @@ const styles: CSSProperties = {
 export interface BoxProps {
 	title: string
 	yellow?: boolean
+	preview?: boolean
 }
 
-export const Box: FC<BoxProps> = ({ title, yellow }) => {
+export const Box: FC<BoxProps> = ({ title, yellow, preview }) => {
 	const backgroundColor = yellow ? 'yellow' : 'white'
-	return <div style={{ ...styles, backgroundColor }}>{title}</div>
+	return (
+		<div
+			style={{ ...styles, backgroundColor }}
+			role={preview ? 'Box-Preview' : 'Box'}
+		>
+			{title}
+		</div>
+	)
 }

packages/examples-hooks/src/02-drag-around/custom-drag-layer/BoxDragPreview.tsx

@@ -28,7 +28,7 @@ export const BoxDragPreview: FC<BoxDragPreviewProps> = memo(({ title }) => {
 
 	return (
 		<div style={styles}>
-			<Box title={title} yellow={tickTock} />
+			<Box title={title} yellow={tickTock} preview />
 		</div>
 	)
 })

packages/examples-hooks/src/02-drag-around/custom-drag-layer/Container.tsx

@@ -21,10 +21,6 @@ interface BoxMap {
 	[key: string]: { top: number; left: number; title: string }
 }
 
-function renderBox(item: any, key: any) {
-	return <DraggableBox key={key} id={key} {...item} />
-}
-
 export const Container: FC<ContainerProps> = ({ snapToGrid }) => {
 	const [boxes, setBoxes] = useState<BoxMap>({
 		a: { top: 20, left: 80, title: 'Drag me around' },
@@ -65,7 +61,9 @@ export const Container: FC<ContainerProps> = ({ snapToGrid }) => {
 
 	return (
 		<div ref={drop} style={styles}>
-			{Object.keys(boxes).map((key) => renderBox(boxes[key], key))}
+			{Object.keys(boxes).map((key) => (
+				<DraggableBox key={key} id={key} {...boxes[key]} />
+			))}
 		</div>
 	)
 }

packages/examples-hooks/src/02-drag-around/custom-drag-layer/DraggableBox.tsx

@@ -42,7 +42,11 @@ export const DraggableBox: FC<DraggableBoxProps> = (props) => {
 	}, [])
 
 	return (
-		<div ref={drag} style={getStyles(left, top, isDragging)}>
+		<div
+			ref={drag}
+			style={getStyles(left, top, isDragging)}
+			role="DraggableBox"
+		>
 			<Box title={title} />
 		</div>
 	)

packages/examples-hooks/src/02-drag-around/custom-drag-layer/__tests__/custom-drag-layer-integration.spec.tsx

@@ -0,0 +1,40 @@
+import Example from '../index'
+import { act, fireEvent, render } from '@testing-library/react'
+import { wrapWithBackend, tick } from 'react-dnd-test-utils'
+
+describe('Drag Around: Custom Drag Layer', () => {
+	it('toggles the overlay layer over time', async () => {
+		jest.useFakeTimers()
+		const TestExample = wrapWithBackend(Example)
+		const rendered = render(<TestExample />)
+		const draggableBoxes = await rendered.findAllByRole('DraggableBox')
+		expect(draggableBoxes).toHaveLength(2)
+		const first = draggableBoxes[0]
+		const second = draggableBoxes[1]
+
+		// Dragging a box hides it
+		let tickAwait: Promise<void>
+		await act(async () => {
+			fireEvent.dragStart(first)
+			tickAwait = tick()
+			jest.advanceTimersByTime(10)
+			await tickAwait
+		})
+
+		expect(first).toHaveStyle({ opacity: 0 })
+		expect(second).toHaveStyle({ opacity: 1 })
+
+		const preview = await rendered.findByRole('Box-Preview')
+		expect(preview).toHaveStyle({ backgroundColor: 'white' })
+
+		act(() => {
+			jest.advanceTimersByTime(501)
+		})
+		expect(preview).toHaveStyle({ backgroundColor: 'yellow' })
+
+		act(() => {
+			jest.advanceTimersByTime(501)
+		})
+		expect(preview).toHaveStyle({ backgroundColor: 'white' })
+	})
+})

packages/examples-hooks/src/02-drag-around/naive/Box.tsx

@@ -35,7 +35,7 @@ export const Box: FC<BoxProps> = ({
 		return <div ref={drag} />
 	}
 	return (
-		<div ref={drag} style={{ ...style, left, top }}>
+		<div ref={drag} style={{ ...style, left, top }} role="Box">
 			{children}
 		</div>
 	)

packages/examples-hooks/src/02-drag-around/naive/Example.tsx

@@ -15,6 +15,7 @@ export const Example: FC = () => {
 					<input
 						id="hideSourceOnDrag"
 						type="checkbox"
+						role="checkbox"
 						checked={hideSourceOnDrag}
 						onChange={toggle}
 					/>

packages/examples-hooks/src/02-drag-around/naive/__tests__/drag-around-naive-integration.spec.tsx

@@ -0,0 +1,50 @@
+import Example from '../index'
+import { fireEvent, render } from '@testing-library/react'
+import {
+	wrapWithBackend,
+	fireDrag,
+	fireReleaseDrag,
+	tick,
+} from 'react-dnd-test-utils'
+
+describe('Drag Around: Naive', () => {
+	it('can hide the source node on drag', async () => {
+		const TestExample = wrapWithBackend(Example)
+		const rendered = render(<TestExample />)
+		const getBoxes = () => rendered.findAllByRole('Box')
+		const boxes = await getBoxes()
+		expect(boxes.length).toEqual(2)
+		const first = boxes[0]
+
+		// Dragging a box hides it
+		await fireDrag(first)
+		await tick()
+		expect(await getBoxes()).toHaveLength(1)
+
+		// Dropping the box shows it again
+		await fireReleaseDrag(first)
+		expect(await getBoxes()).toHaveLength(2)
+	})
+
+	it('can disable source hiding', async () => {
+		const TestExample = wrapWithBackend(Example)
+		const rendered = render(<TestExample />)
+		const getBoxes = () => rendered.findAllByRole('Box')
+		const boxes = await getBoxes()
+		const checkbox = await rendered.findByRole('checkbox')
+		expect(boxes.length).toEqual(2)
+		const first = boxes[0]
+
+		// disable source hiding
+		await fireEvent.click(checkbox)
+
+		// Drag a box
+		await fireDrag(first)
+		await tick()
+		expect(await getBoxes()).toHaveLength(2)
+
+		// Drop the box
+		await fireReleaseDrag(first)
+		expect(await getBoxes()).toHaveLength(2)
+	})
+})

packages/examples-hooks/src/07-regression/chained-connectors/BoxWithHandle.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react'
-import { DragSource, DropTarget, useDrop, useDrag } from 'react-dnd'
+import { useDrop, useDrag } from 'react-dnd'
 import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
@@ -18,7 +18,7 @@ const handleStyle: CSSProperties = {
 	cursor: 'move',
 }
 
-const BoxWithHandleRaw: FC = () => {
+export const BoxWithHandle: FC = () => {
 	const [, drop] = useDrop({
 		accept: ItemTypes.BOX,
 	})
@@ -40,21 +40,3 @@ const BoxWithHandleRaw: FC = () => {
 		),
 	)
 }
-
-export const BoxWithHandle = DragSource(
-	ItemTypes.BOX,
-	{
-		beginDrag: () => ({}),
-	},
-	(connect, monitor) => ({
-		connectDragSource: connect.dragSource(),
-		connectDragPreview: connect.dragPreview(),
-		isDragging: monitor.isDragging(),
-	}),
-)(
-	DropTarget(ItemTypes.BOX, {}, (connect, monitor) => ({
-		connectDropTarget: connect.dropTarget(),
-		isDraggingHover: monitor.isOver({ shallow: true }),
-		isOver: monitor.isOver(),
-	}))(BoxWithHandleRaw),
-)

packages/react-dnd/package.json

@@ -31,9 +31,9 @@
     "@testing-library/react": "^11.2.5",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.25",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "^14.14.27",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "gulp": "^4.0.2",
     "react": "^17.0.1",
     "react-dnd-test-backend": "portal:../backend-test",

packages/test-utils/package.json

@@ -17,9 +17,9 @@
   "devDependencies": {
     "@react-dnd/build": "workspace:packages/build",
     "@testing-library/react": "^11.2.5",
-    "@types/node": "^14.14.25",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "^14.14.27",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "dnd-core": "workspace:packages/dnd-core",
     "gulp": "^4.0.2",
     "react": "^17.0.1",

packages/test-utils/src/testingLibraryEvents.ts

@@ -1,7 +1,7 @@
 import { tick } from './utils'
 import { fireEvent, act } from '@testing-library/react'
 
-export async function fireDragDrop(source: HTMLElement, target: HTMLElement) {
+export async function fireDragDrop(source: Element, target: Element) {
 	await act(async () => {
 		fireEvent.dragStart(source)
 		fireEvent.dragEnter(target)
@@ -11,7 +11,7 @@ export async function fireDragDrop(source: HTMLElement, target: HTMLElement) {
 	})
 }
 
-export async function fireDragHover(source: HTMLElement, target: HTMLElement) {
+export async function fireDragHover(source: Element, target: Element) {
 	await act(async () => {
 		fireEvent.dragStart(source)
 		fireEvent.dragEnter(target)
@@ -20,9 +20,16 @@ export async function fireDragHover(source: HTMLElement, target: HTMLElement) {
 	})
 }
 
-export async function fireDrag(source: HTMLElement) {
+export async function fireDrag(source: Element) {
 	await act(async () => {
 		fireEvent.dragStart(source)
 		await tick()
 	})
 }
+
+export async function fireReleaseDrag(source: Element) {
+	await act(async () => {
+		fireEvent.drop(window)
+		await tick()
+	})
+}