test: added unit tests for react-dnd-html5-backend (#1283)

packages/react-dnd-html5-backend/src/__tests__/BrowserDetector.spec.ts

@@ -0,0 +1,7 @@
+import { isFirefox } from '../BrowserDetector'
+
+describe('BrowserDetector', () => {
+	it('should detect firefox', () => {
+		expect(isFirefox()).toEqual(false)
+	})
+})

packages/react-dnd-html5-backend/src/__tests__/EnterLeaveCounter.spec.ts

@@ -0,0 +1,48 @@
+import EnterLeaveCounter from '../EnterLeaveCounter'
+
+describe('EnterLeaveCounter', () => {
+	const parentDiv = document.createElement('div')
+	parentDiv.setAttribute('id', 'parent')
+	const childDiv = document.createElement('div')
+	childDiv.setAttribute('id', 'child')
+	parentDiv.appendChild(childDiv)
+
+	const isNodeInDocument = () => {
+		return true
+	}
+	it('should check if the element is entered', () => {
+		const enterLeaveCounter: EnterLeaveCounter = new EnterLeaveCounter(
+			isNodeInDocument,
+		)
+		const hasEntered = enterLeaveCounter.enter(parentDiv)
+		expect(hasEntered).toEqual(true)
+	})
+
+	it('should not falsely check child elements as new element entered', () => {
+		const enterLeaveCounter: EnterLeaveCounter = new EnterLeaveCounter(
+			isNodeInDocument,
+		)
+		enterLeaveCounter.enter(parentDiv)
+		const hasEntered = enterLeaveCounter.enter(childDiv)
+		expect(hasEntered).toEqual(false)
+	})
+
+	it('should check if leave element was entered', () => {
+		const enterLeaveCounter: EnterLeaveCounter = new EnterLeaveCounter(
+			isNodeInDocument,
+		)
+		enterLeaveCounter.enter(parentDiv)
+		const testElem = document.createElement('p')
+		const hasLeft = enterLeaveCounter.leave(testElem)
+		expect(hasLeft).toEqual(false)
+	})
+
+	it('should leave element if it is entered', () => {
+		const enterLeaveCounter: EnterLeaveCounter = new EnterLeaveCounter(
+			isNodeInDocument,
+		)
+		enterLeaveCounter.enter(parentDiv)
+		const hasLeft = enterLeaveCounter.leave(parentDiv)
+		expect(hasLeft).toEqual(true)
+	})
+})

packages/react-dnd-html5-backend/src/__tests__/HTML5Backend.spec.ts

@@ -53,4 +53,57 @@ describe('The HTML5 Backend', () => {
 			expect(backend.window).toBe(fakeWindow)
 		})
 	})
+
+	describe('setup and teardown', () => {
+		let backend: HTML5Backend
+		let mockManager: DragDropManager<HTML5BackendContext>
+		let fakeWindow: any = {}
+		beforeEach(() => {
+			mockManager = {
+				getActions: () => null,
+				getMonitor: () => null,
+				getRegistry: () => null,
+				getContext: () => ({
+					window: fakeWindow,
+				}),
+			} as any
+		})
+
+		afterEach(() => {
+			fakeWindow = {}
+		})
+
+		it('should throw error if two instances of html5 backend are setup', () => {
+			backend = new HTML5Backend(mockManager)
+			backend.setup()
+			try {
+				backend.setup()
+			} catch (e) {
+				expect(e.message).toEqual(
+					'Cannot have two HTML5 backends at the same time.',
+				)
+			}
+		})
+
+		it('should set __isReactDndBackendSetUp on setup', () => {
+			backend = new HTML5Backend(mockManager)
+			backend.setup()
+			expect(fakeWindow.__isReactDndBackendSetUp).toBeTruthy()
+		})
+
+		it('should unset ____isReactDndBackendSetUp on teardown', () => {
+			backend = new HTML5Backend(mockManager)
+			backend.setup()
+			backend.teardown()
+			expect(fakeWindow.__isReactDndBackendSetUp).toBeFalsy()
+		})
+
+		it('should be able to call setup after teardown', () => {
+			backend = new HTML5Backend(mockManager)
+			backend.setup()
+			backend.teardown()
+			backend.setup()
+			expect(fakeWindow.__isReactDndBackendSetUp).toBeTruthy()
+		})
+	})
 })

packages/react-dnd-html5-backend/src/__tests__/OffsetUtils.spec.ts

@@ -0,0 +1,72 @@
+import {
+	getNodeClientOffset,
+	getEventClientOffset,
+	getDragPreviewOffset,
+} from '../OffsetUtils'
+
+describe('OffsetUtils', () => {
+	describe('getNodeClientOffset', () => {
+		it('should get node client offset for element node', () => {
+			const el = document.createElement('div')
+			expect(getNodeClientOffset(el)).toEqual({
+				x: 0,
+				y: 0,
+			})
+		})
+
+		it('should return get parent node client offset if element type is not ELEMENT NODE', () => {
+			const el = document.createElement('p')
+			el.textContent = 'Text inside paragraph'
+			expect(getNodeClientOffset(el.firstChild)).toEqual({
+				x: 0,
+				y: 0,
+			})
+		})
+
+		it('should return null if parent node is not of Node.ELEMENT_NODE', () => {
+			const el = document.createComment('this is comment node of type 3')
+			expect(getNodeClientOffset(el)).toEqual(null)
+		})
+	})
+
+	describe('getEventClientOffset', () => {
+		it('should return client offset', () => {
+			const el = document.createEvent('MouseEvent')
+			expect(getEventClientOffset(el)).toEqual({
+				x: 0,
+				y: 0,
+			})
+		})
+	})
+
+	describe('getDragPreviewOffset', () => {
+		it('should get offset of drag preview component', () => {
+			const sourceNode = document.createElement('div')
+			const dragPreview = document.createElement('div')
+			const clientOffset = {
+				x: 0,
+				y: 0,
+			}
+			const anchorPoint = {
+				anchorX: 0,
+				anchorY: 0,
+			}
+			const offsetPoint = {
+				offsetX: 0,
+				offsetY: 0,
+			}
+			expect(
+				getDragPreviewOffset(
+					sourceNode,
+					dragPreview,
+					clientOffset,
+					anchorPoint,
+					offsetPoint,
+				),
+			).toEqual({
+				x: 0,
+				y: 0,
+			})
+		})
+	})
+})

packages/react-dnd-html5-backend/src/__tests__/getEmptyImage.spec.ts

@@ -0,0 +1,8 @@
+import getEmptyImage from '../getEmptyImage'
+
+describe('Get Empty Image', () => {
+	it('should return image', () => {
+		const image = getEmptyImage()
+		expect(image.getAttribute('src')).toBeDefined()
+	})
+})

packages/react-dnd-html5-backend/src/__tests__/index.spec.ts

@@ -0,0 +1,15 @@
+import createHTML5Backend, { HTML5BackendContext } from '../index'
+import { DragDropManager } from 'dnd-core'
+
+describe('index', () => {
+	it('should return HTML5 backend', () => {
+		const mockManager: DragDropManager<HTML5BackendContext> = {
+			getActions: () => null,
+			getMonitor: () => null,
+			getRegistry: () => null,
+			getContext: () => ({}),
+		} as any
+		const backend = createHTML5Backend(mockManager)
+		expect(backend).toBeDefined()
+	})
+})

packages/react-dnd-html5-backend/src/__tests__/matchesType.spec.ts

@@ -0,0 +1,21 @@
+import matchesType from '../matchesType'
+
+describe('matchesType', () => {
+	it('should match type for single source and single target', () => {
+		const target = 'a'
+		const source = 'a'
+		expect(matchesType(target, source)).toBeTruthy()
+	})
+
+	it('should match type for single source and multiple targets', () => {
+		const targets = ['a', 'b', 'c']
+		const source = 'a'
+		expect(matchesType(targets, source)).toBeTruthy()
+	})
+
+	it('should match type when source and target are null', () => {
+		const target = null
+		const source = null
+		expect(matchesType(target, source)).toBeTruthy()
+	})
+})