1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-01 05:16:10 +01:00

Improved slate-simulator docs. (#1972)

* Improved slate-simulator docs.

* Update index.md
This commit is contained in:
Enzo Ferey 2018-07-19 21:08:31 +02:00 committed by Ian Storm Taylor
parent 715fde4f43
commit 939787969b

View File

@ -4,7 +4,7 @@
import Simulator from 'slate-simulator'
```
A simulator to help writing tests for Slate editors and plugins. By default the simulator does not include the core plugins as they have a lot of dependencies on browser-specific globals, so running them in CI environments is very hard. If you need the core plugins for your use case you need to import them manually.
A simulator to help writing tests for Slate editors and plugins. By default the simulator does not include the [core plugins](https://docs.slatejs.org/guides/plugins#core-plugins) as they have a lot of dependencies on browser-specific globals, so running them in CI environments is very hard. If you need the core plugins for your use case you need to import them manually.
## Example
@ -39,6 +39,46 @@ const plugins = [ BeforePlugin(), ... , AfterPlugin() ]
const simulator = new Simulator({ value, plugins })
```
Core plugins will trigger default behaviour for the events. Without them, only the changes defined in the plugins passed to slate-simulator will be applied. For example, `beforeInput()` event will not insert the data's text if none of the plugins being tested does it.
## Example for `DataTransfer` events
In order to simulate paste and drop events you will need to create a [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). However this object is browser dependant and is not easy to manipulate in CI environments. The easiest work around is to fake its API with a mockup class:
```js
class FakeDataTransfer {
constructor(props) {
this.items = []
this.types = []
}
getData(key) {
return this.items.find(item => item.key === key).value
}
setData(key, value) {
this.types.push(key)
this.items.push({ key, value })
}
}
```
Later, you can use it this way to fake a paste event:
```js
import { setEventTransfer } from 'slate-react'
const pastedText = 'slatejs.org'
const fakeDataTransfer = new FakeDataTransfer()
fakeDataTransfer.setData('text', "this text doesn't matter")
const pasteEvent = { dataTransfer: fakeDataTransfer }
setEventTransfer(pasteEvent, 'text', pastedText)
simulator.paste(pasteEvent)
```
## Methods
### `beforeInput`