-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* test: setup enzyme, re-enable box tests * test: update box spec to use enzyme * test: move dustbin integration test into enzyme * test: add multiple-dustbin integration test * bump react version to 16.8.5 * add test-util functions: getBackendFromInstance, simulateDragDropSequence, simulateHoverSequence
- Loading branch information
1 parent
a9f340b
commit f0aa2fa
Showing
20 changed files
with
1,004 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| const Enzyme = require('enzyme') | ||
| const Adapter = require('enzyme-adapter-react-16') | ||
|
|
||
| Enzyme.configure({ adapter: new Adapter() }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
...s/examples/src/01 Dustbin/Multiple Targets/__tests__/multiple-target-integration.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React from 'react' | ||
| import Example from '..' | ||
| import DndDustbin, { DustbinProps } from '../Dustbin' | ||
| import DndBox, { BoxProps } from '../Box' | ||
| import { | ||
| wrapInTestContext, | ||
| getBackendFromInstance, | ||
| simulateDragDropSequence, | ||
| } from 'react-dnd-test-utils' | ||
| import { mount } from 'enzyme' | ||
| import { TestBackend } from 'react-dnd-test-backend' | ||
| import { DndComponent as DndC } from 'react-dnd' | ||
|
|
||
| describe('Dustbin: Multiple Targets', () => { | ||
| it('behaves as expected', () => { | ||
| const Wrapped = wrapInTestContext(Example) | ||
| const root = mount(<Wrapped />) | ||
| const backend = getBackendFromInstance<TestBackend>(root.instance() as any) | ||
|
|
||
| // 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) | ||
| // .instance() as any | ||
| // const paperFileBin: DndC<DustbinProps> = dustbins.at(3).instance() as any | ||
|
|
||
| // Box Types | ||
| const bottleBox: DndC<BoxProps> = boxes.at(0).instance() as any | ||
| const bananaBox: DndC<BoxProps> = boxes.at(1).instance() as any | ||
| // const magazineBox: DndC<BoxProps> = boxes.at(2).instance() as any | ||
|
|
||
| // 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) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 21 additions & 32 deletions
53
packages/examples/src/01 Dustbin/Single Target/__tests__/Box.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,63 @@ | ||
| import React from 'react' | ||
| import * as TestUtils from 'react-dom/test-utils' | ||
| import Box from '../Box' | ||
| import { wrapInTestContext } from 'react-dnd-test-utils' | ||
| import { mount } from 'enzyme' | ||
| import { TestBackend } from 'react-dnd-test-backend' | ||
| import { ContextComponent } from 'react-dnd' | ||
|
|
||
| class Wrapper extends React.Component { | ||
| public render() { | ||
| return this.props.children | ||
| } | ||
| } | ||
| describe('Box', () => { | ||
| // TODO: test utils are acting wonking with function components. | ||
| // take a pass at making the tests behave better | ||
| it.skip('can be tested independently', () => { | ||
| it('can be tested independently', () => { | ||
| // Obtain the reference to the component before React DnD wrapping | ||
| const OriginalBox = Box.DecoratedComponent | ||
|
|
||
| // Stub the React DnD connector functions with an identity function | ||
| const identity = (x: any) => x | ||
|
|
||
| const TestCase: React.FC = () => ( | ||
| <Wrapper> | ||
| <OriginalBox | ||
| name="test" | ||
| connectDragSource={identity} | ||
| isDragging={false} | ||
| /> | ||
| </Wrapper> | ||
| ) | ||
|
|
||
| // Render with one set of props and test | ||
| let root: any = TestUtils.renderIntoDocument(<TestCase />) | ||
| let div: HTMLDivElement = TestUtils.findRenderedDOMComponentWithTag( | ||
| root, | ||
| 'div,', | ||
| ) as HTMLDivElement | ||
| let root = mount( | ||
| <OriginalBox | ||
| name="test" | ||
| connectDragSource={identity} | ||
| isDragging={false} | ||
| />, | ||
| ) | ||
| let div = root.getDOMNode() as HTMLDivElement | ||
| expect(div.style.opacity).toEqual('1') | ||
|
|
||
| // Render with another set of props and test | ||
| root = TestUtils.renderIntoDocument( | ||
| root = mount( | ||
| <OriginalBox | ||
| name="test" | ||
| connectDragSource={identity} | ||
| isDragging={true} | ||
| />, | ||
| ) | ||
| div = TestUtils.findRenderedDOMComponentWithTag( | ||
| root, | ||
| 'div', | ||
| ) as HTMLDivElement | ||
| div = root.getDOMNode() as HTMLDivElement | ||
| expect(div.style.opacity).toEqual('0.4') | ||
| }) | ||
|
|
||
| it('can be tested with the testing backend', () => { | ||
| // Render with the testing backend | ||
| const BoxContext = wrapInTestContext(Box) | ||
| const root: any = TestUtils.renderIntoDocument(<BoxContext name="test" />) | ||
| const root = mount(<BoxContext name="test" />) | ||
|
|
||
| // Obtain a reference to the backend | ||
| const backend = root.getManager().getBackend() | ||
| 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: any = TestUtils.findRenderedDOMComponentWithTag(root, 'div') | ||
| 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 = TestUtils.findRenderedComponentWithType(root, Box as any) | ||
| const box: any = root.find(Box).instance() | ||
| backend.simulateBeginDrag([box.getHandlerId()]) | ||
|
|
||
| // Verify that the div changed its opacity | ||
| div = TestUtils.findRenderedDOMComponentWithTag(root, 'div') | ||
| div = root.getDOMNode() as HTMLDivElement | ||
| expect(div.style.opacity).toEqual('0.4') | ||
| }) | ||
| }) |
38 changes: 0 additions & 38 deletions
38
packages/examples/src/01 Dustbin/Single Target/__tests__/integration.spec.tsx
This file was deleted.
Oops, something went wrong.
42 changes: 42 additions & 0 deletions
42
packages/examples/src/01 Dustbin/Single Target/__tests__/single-target-integration.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React from 'react' | ||
| import Example from '../index' | ||
| import Box, { BoxProps } from '../Box' | ||
| import Dustbin, { DustbinProps } from '../Dustbin' | ||
| import { | ||
| wrapInTestContext, | ||
| getBackendFromInstance, | ||
| simulateDragDropSequence, | ||
| } from 'react-dnd-test-utils' | ||
| import { mount } from 'enzyme' | ||
| import { TestBackend } from 'react-dnd-test-backend' | ||
| import { DndComponent } from 'react-dnd' | ||
|
|
||
| describe('Integration: Dustbin Single Target', () => { | ||
| 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!`, | ||
| ) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export * from './wrapInTestContext' | ||
| export * from './utils' |
Oops, something went wrong.