How to use react-dnd-test-utils - 10 common examples

To help you get started, we’ve selected a few react-dnd-test-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-dnd / react-dnd / packages / examples / src / 01 Dustbin / Single Target / __tests__ / integration.spec.tsx View on Github external
it('can simulate a full drag and drop interaction', () => {
		function TestCase() {
			return (
				<div>
					<Dustbin />
					<Box name="test" />
				</div>
			)
		}
		const WrappedTestCase = wrapInTestContext(TestCase)

		// Render with the test context that uses the test backend
		const root: any = TestUtils.renderIntoDocument(<WrappedTestCase />)

		// Obtain a reference to the backend
		const backend = root.getManager().getBackend()

		// Find the drag source ID and use it to simulate the dragging operation
		const box: any = TestUtils.findRenderedComponentWithType(root, Box)
		backend.simulateBeginDrag([box.getHandlerId()])

		window.alert = jest.fn()

		const dustbin: any = TestUtils.findRenderedComponentWithType(root, Dustbin)
		backend.simulateHover([dustbin.getHandlerId()])
		backend.simulateDrop()
github react-dnd / react-dnd / packages / documentation / examples-decorators / src / 01-dustbin / multiple-targets / __tests__ / multiple-target-integration.spec.tsx View on Github external
it('behaves as expected', () => {
		const Wrapped = wrapInTestContext(Example)
		const root = mount(<Wrapped />)
		const backend = getInstance()!

		// Verify that all of the key components mounted
		const dustbins = root.find(DndDustbin)
		const boxes = root.find(DndBox)
		expect(dustbins.length).toEqual(4)
		expect(boxes.length).toEqual(3)

		window.alert = jest.fn()

		// Bin Types
		const glassBin: DndC<DustbinProps> = dustbins.at(0).instance() as any
		const foodBin: DndC<DustbinProps> = dustbins.at(1).instance() as any
		// const paperGlassUrlBin: DndC<DustbinProps> = dustbins
		// 	.at(2)
github react-dnd / react-dnd / packages / examples / src / 01-dustbin / single-target / __tests__ / single-target-integration.spec.tsx View on Github external
it('can simulate a full drag and drop interaction', () => {
		function TestCase() {
			return <Example />
		}
		const WrappedTestCase = wrapInTestContext(TestCase)

		// Render with the test context that uses the test backend
		const root = mount(<WrappedTestCase />)

		// Obtain a reference to the backend
		const backend = getBackendFromInstance<TestBackend>(root.instance() as any)

		// Find the drag source ID and use it to simulate the dragging operation
		const box: DndComponent<BoxProps> = root
			.find(Box)
			.at(0)
			.instance() as any
		const dustbin: DndComponent<DustbinProps> = root
			.find(Dustbin)
			.instance() as any
github react-dnd / react-dnd / packages / examples / src / 01-dustbin / single-target / __tests__ / Box.spec.tsx View on Github external
it('can be tested with the testing backend', () => {
		// Render with the testing backend
		const BoxContext = wrapInTestContext(Box)
		const root = mount(<BoxContext name="test" />)

		// Obtain a reference to the backend
		const element = root.instance() as ContextComponent<TestBackend>
		const backend = (element.getManager().getBackend() as any) as TestBackend
		expect(backend).toBeDefined()

		// Check that the opacity is 1
		let div = root.getDOMNode() as HTMLDivElement
		expect(div.style.opacity).toEqual('1')

		// Find the drag source ID and use it to simulate the dragging state
		const box: any = root.find(Box).instance()
		backend.simulateBeginDrag([box.getHandlerId()])

		// Verify that the div changed its opacity
github react-dnd / react-dnd / examples_ts / 01-dustbin / single-target / __tests__ / Box.spec.tsx View on Github external
it('can be tested with the testing backend', () => {
    // Render with the testing backend
    const BoxContext = wrapInTestContext(Box)
    const root = mount(<BoxContext name="test" />)

    // Obtain a reference to the backend
    const element = root.instance() as ContextComponent<TestBackend>
    const backend = (element.getManager().getBackend() as any) as TestBackend
    expect(backend).toBeDefined()

    // Check that the opacity is 1
    let div = root.getDOMNode() as HTMLDivElement
    expect(div.style.opacity).toEqual('1')

    // Find the drag source ID and use it to simulate the dragging state
    const box: any = root.find(Box).instance()
    backend.simulateBeginDrag([box.getHandlerId()])

    // Verify that the div changed its opacity
github react-dnd / react-dnd / packages / examples / src / 01-dustbin / single-target / __tests__ / single-target-integration.spec.tsx View on Github external
it('can simulate a full drag and drop interaction', () => {
		function TestCase() {
			return <Example />
		}
		const WrappedTestCase = wrapInTestContext(TestCase)

		// Render with the test context that uses the test backend
		const root = mount(<WrappedTestCase />)

		// Obtain a reference to the backend
		const backend = getBackendFromInstance<TestBackend>(root.instance() as any)

		// Find the drag source ID and use it to simulate the dragging operation
		const box: DndComponent<BoxProps> = root
			.find(Box)
			.at(0)
			.instance() as any
		const dustbin: DndComponent<DustbinProps> = root
			.find(Dustbin)
			.instance() as any

		window.alert = jest.fn()
		simulateDragDropSequence(box, dustbin, backend)
		expect(window.alert).toHaveBeenCalledWith(
			`You dropped ${box.props.name} into Dustbin!`,
		)
	})
github react-dnd / react-dnd / packages / react-dnd-decorators / src / __tests__ / ConnectorFunctions.spec.tsx View on Github external
let connectArgs: any[] = []

		const Target = DropTarget(
			'BOX',
			{
				drop: () => ({ name: 'Target' }),
			},
			(connect, monitor, props) => {
				connectorFired = true
				connectArgs = [connect, monitor, props]
				return { drop: connect.dropTarget() }
			},
		)((props: any) => props.drop(<div>test target</div>))

		// Render with the test context that uses the test backend
		const WrappedTarget = wrapInTestContext(Target)
		TestUtils.renderIntoDocument(<WrappedTarget x={1} y={2} />)

		expect(connectorFired).toBeTruthy()
		expect(connectArgs.length).toEqual(3)
		connectArgs.forEach(c => expect(c).toBeDefined())
		expect(connectArgs[2].x).toEqual(1)
		expect(connectArgs[2].y).toEqual(2)
	})
})
github react-dnd / react-dnd / packages / core / react-dnd / src / decorators / __tests__ / ConnectorFunctions.spec.tsx View on Github external
let connectArgs: any[] = []

		const Target = DropTarget(
			'BOX',
			{
				drop: () => ({ name: 'Target' }),
			},
			(connect, monitor, props) => {
				connectorFired = true
				connectArgs = [connect, monitor, props]
				return { drop: connect.dropTarget() }
			},
		)((props: any) => props.drop(<div>test target</div>))

		// Render with the test context that uses the test backend
		const WrappedTarget = wrapInTestContext(Target)
		mount(<WrappedTarget x={1} y={2} />)

		expect(connectorFired).toBeTruthy()
		expect(connectArgs.length).toEqual(3)
		connectArgs.forEach(c => expect(c).toBeDefined())
		expect(connectArgs[2].x).toEqual(1)
		expect(connectArgs[2].y).toEqual(2)
	})
})
github react-dnd / react-dnd / packages / examples / src / 01-dustbin / single-target / __tests__ / single-target-integration.spec.tsx View on Github external
const root = mount(<WrappedTestCase />)

		// Obtain a reference to the backend
		const backend = getBackendFromInstance<TestBackend>(root.instance() as any)

		// Find the drag source ID and use it to simulate the dragging operation
		const box: DndComponent<BoxProps> = root
			.find(Box)
			.at(0)
			.instance() as any
		const dustbin: DndComponent<DustbinProps> = root
			.find(Dustbin)
			.instance() as any

		window.alert = jest.fn()
		simulateDragDropSequence(box, dustbin, backend)
		expect(window.alert).toHaveBeenCalledWith(
			`You dropped ${box.props.name} into Dustbin!`,
		)
	})
})
github react-dnd / react-dnd / packages / documentation / examples-decorators / src / 01-dustbin / multiple-targets / __tests__ / multiple-target-integration.spec.tsx View on Github external
// interactions

		// drop bottle into glass bin
		simulateDragDropSequence(bottleBox, glassBin, backend)
		expect(glassBin.props.lastDroppedItem.name).toEqual(bottleBox.props.name)

		// food won't drop into the glass bin
		simulateDragDropSequence(bananaBox, glassBin, backend)
		expect(glassBin.props.lastDroppedItem.name).toEqual(bottleBox.props.name)

		// glass won't drop into the food box...
		simulateDragDropSequence(bottleBox, foodBin, backend)
		expect(foodBin.props.lastDroppedItem).toBeNull()

		// but some food will work
		simulateDragDropSequence(bananaBox, foodBin, backend)
		expect(foodBin.props.lastDroppedItem.name).toEqual(bananaBox.props.name)
	})
})

react-dnd-test-utils

MIT
Latest version published 7 months ago

Package Health Score

78 / 100
Full package analysis

Similar packages