Skip to content

Commit

Permalink
Add readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Mike committed Mar 21, 2020
1 parent 6a799b0 commit b9c2a37
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 1 deletion.
53 changes: 53 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# Beautiful Tests for Beautiful Drag and Drops

An extension for the `testing-library/react-testing-library` that adds a few
useful utility functions to simulate dragging.

```
Currently only tested with simple lists. Nested lists and dragging from one list to another is currently **not** supported. P/Rs welcome!
```

## Install

`npm install --save-dev react-beautiful-dnd-tester`

## Usage

`react-beautiful-dnd-tester` exports new queries, and actions on top of the
default queries from RTL's (`react-testing-library`) `render` so make sure
you're importing the correct `render`:

```javascript
import {render} from 'react-beautiful-dnd-tester`
```
All custom options are still forwarded to RTL's `render` so there should be no
other changes in your tests

### Drag

Render now returns a `drag` method to initiate a drag. Pass in the HTMLElement
you'd like to drag. _Make sure it's a drag handler!_

```javascript
const {drag, getAllByTestId} = render(<SimpleVerticalList />)
let first = getAllByTestId(/item/i)[0]
let second = getAllByTestId(/item/i)[1]
```

Once you've got your element, you're ready to drag!

#### `inFrontOf`

`drag(second).inFrontOf(first)`

#### `behind`

`drag(first).behind(second)`

### Vertical List

## Examples

Check out
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
"check-types": "tsc",
"declaration:build": "tsc -p declaration.tsconfig.json --outDir dist",
"package.json:copy": "cp package.json dist/",
"build": "rm -rf dist && babel src --ignore **/__tests__,**/__mocks__,**/__utils__,**/*.test.* --out-dir dist --extensions '.ts' && npm run declaration:build && npm run package.json:copy",
"components:copy": "cp -R components dist/",
"build": "rm -rf dist && babel src --ignore **/__tests__,**/__mocks__,**/__utils__,**/*.test.* --out-dir dist --extensions '.ts' && npm run declaration:build && npm run package.json:copy && npm run components:copy",
"release": "npm version patch && npm run build && cd dist && npm publish",
"postrelease": "npm run dist:remove",
"dist:remove": "rm -rf dist"
Expand Down

0 comments on commit b9c2a37

Please # to comment.