feat(expect-puppeteer): added delay option to element.type for toFill…

… matcher (#52)

packages/expect-puppeteer/README.md

@@ -116,6 +116,7 @@ Expect a control to be in the page or element, then fill it with text.
     * `raf` - to constantly execute `pageFunction` in `requestAnimationFrame` callback. This is the tightest polling mode which is suitable to observe styling changes.
     * `mutation` - to execute `pageFunction` on every DOM mutation.
   * `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `500`.
+  * `delay` <[number]> delay to pass to [the puppeteer `element.type` API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandletypetext-options)
 
 ```js
 await expect(page).toFill('input[name="firstName"]', 'James')

packages/expect-puppeteer/src/matchers/toFill.js

@@ -1,9 +1,12 @@
 import toMatchElement from './toMatchElement'
 
 async function toFill(instance, selector, value, options) {
-  const element = await toMatchElement(instance, selector, options)
+  const { delay, ...toMatchElementOptions } = options || {}
+  const element = await toMatchElement(instance, selector, toMatchElementOptions)
   await element.click({ clickCount: 3 })
-  await element.type(value)
+  await element.type(value, {
+    delay,
+  })
 }
 
 export default toFill

packages/expect-puppeteer/src/matchers/toFill.test.js

@@ -32,6 +32,16 @@ describe('toFill', () => {
       )
       expect(value).toBe('James')
     })
+    it('should fill input with custom delay', async () => {
+      const body = await page.$('body')
+      await expect(body).toFill('[name="firstName"]', 'James', {
+        delay: 50
+      })
+      const value = await page.evaluate(
+        () => document.querySelector('[name="firstName"]').value,
+      )
+      expect(value).toBe('James')
+    })
 
     it('should return an error if text is not in the page', async () => {
       const body = await page.$('body')