feat: simplify expect usage

BREAKING CHANGE: `expectPage()` is replaced by `expect(page)`

README.md

@@ -29,7 +29,7 @@ describe('Google', () => {
   })
 
   it('should display "google" text on page', async () => {
-    await expectPage().toMatch('google')
+    await expect(page).toMatch('google')
   })
 })
 ```
@@ -40,29 +40,29 @@ describe('Google', () => {
 
 Writing integration test can be done using [Puppeteer API](<(https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md)>) but it can be complicated and hard because API is not designed for testing.
 
-To make it simpler, an `expectPage()` is automatically installed and available, it provides a lot of convenient methods, all documented in [expect-puppeteer API](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/expect-puppeteer/README.md#api).
+To make it simpler, [expect-puppeteer API](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/expect-puppeteer/README.md#api) add some specific matchers if you make expectation on a [Puppeteer Page](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page).
 
 Some examples:
 
 #### Find a text in the page
 
 ```js
 // Assert that current page contains 'Text in the page'
-await expectPage().toMatch('Text in the page')
+await expect(page).toMatch('Text in the page')
 ```
 
 #### Click a button
 
 ```js
 // Assert that a button containing text "Home" will be clicked
-await expectPage().toClick('button', { text: 'Home' })
+await expect(page).toClick('button', { text: 'Home' })
 ```
 
 #### Fill a form
 
 ```js
 // Assert that a form will be filled
-await expectPage().toFillForm('form[name="myForm"]', {
+await expect(page).toFillForm('form[name="myForm"]', {
   firstName: 'James',
   lastName: 'Bond',
 })
@@ -182,12 +182,12 @@ it('should fill an input', async () => {
 })
 ```
 
-### `global.expectPage`
+### `global.expect(page)`
 
 Helper to make Puppeteer assertions, [see documentation](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/expect-puppeteer/README.md#api).
 
 ```js
-await expectPage().toMatch('A text in the page')
+await expect(page).toMatch('A text in the page')
 // ...
 ```
 

packages/expect-puppeteer/README.md

@@ -12,104 +12,116 @@ npm install expect-puppeteer
 
 ## Usage
 
+Without Jest:
+
 ```js
-import expectPage from 'expect-puppeteer'
+import expect from 'expect-puppeteer'
 ;(async () => {
   const browser = await puppeteer.launch()
   const page = await browser.newPage()
   await page.goto('https://google.com')
-  await expectPage(page).toMatch('google')
+  await expect(page).toMatch('google')
   await browser.close()
 })()
 ```
 
+## Use with Jest
+
+To use with Jest, just modify your configuration:
+
+```json
+{
+  "setupTestFrameworkScriptFile": "expect-puppeteer"
+}
+```
+
 ## API
 
 ##### Table of Contents
 
 <!-- toc -->
 
-* [toClick](#expectpagepagetoclickselector-options)
-* [toDisplayDialog](#expectpagepagetodisplaydialogblock)
-* [toFill](#expectpagepagetofillselector-value-options)
-* [toFillForm](#expectpagepagetofillformselector-values-options)
-* [toMatch](#expectpagepagetomatchtext)
-* [toSelect](#expectpagepagetoselectselector-valueortext)
-* [toUploadFile](#expectpagepagetouploadfileselector-filepath)
+* [toClick](#expectpagetoclickselector-options)
+* [toDisplayDialog](#expectpagetodisplaydialogblock)
+* [toFill](#expectpagetofillselector-value-options)
+* [toFillForm](#expectpagetofillformselector-values-options)
+* [toMatch](#expectpagetomatchtext)
+* [toSelect](#expectpagetoselectselector-valueortext)
+* [toUploadFile](#expectpagetouploadfileselector-filepath)
 
-### expectPage(page).toClick(selector[, options])
+### expect(page).toClick(selector[, options])
 
 * `selector` <[string]> A [selector] to click on
 * `options` <[Object]> Optional parameters
   * text <[string]> A text to match
 
 ```js
-await expectPage(page).toClick('button', { text: 'Home' })
+await expect(page).toClick('button', { text: 'Home' })
 ```
 
-### expectPage(page).toDisplayDialog(block)
+### expect(page).toDisplayDialog(block)
 
 * `block` <[function]> A [function] that should trigger a dialog
 
 ```js
-await expectPage(page).toDisplayDialog(async () => {
-  await expectPage(page).toClick('button', { text: 'Show dialog' })
+await expect(page).toDisplayDialog(async () => {
+  await expect(page).toClick('button', { text: 'Show dialog' })
 })
 ```
 
-### expectPage(page).toFill(selector, value[, options])
+### expect(page).toFill(selector, value[, options])
 
 * `selector` <[string]> A [selector] to match field
 * `value` <[string]> Value to fill
 * `options` <[Object]> Optional parameters
   * `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `500`.
 
 ```js
-await expectPage(page).toFill('input[name="firstName"]', 'James')
+await expect(page).toFill('input[name="firstName"]', 'James')
 ```
 
-### expectPage(page).toFillForm(selector, values[, options])
+### expect(page).toFillForm(selector, values[, options])
 
 * `selector` <[string]> A [selector] to match form
 * `values` <[Object]> Values to fill
 * `options` <[Object]> Optional parameters
   * `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `500`.
 
 ```js
-await expectPage(page).toFillForm('form[name="myForm"]', {
+await expect(page).toFillForm('form[name="myForm"]', {
   firstName: 'James',
   lastName: 'Bond',
 })
 ```
 
-### expectPage(page).toMatch(text)
+### expect(page).toMatch(text)
 
 * `text` <[string]> A text to match in page
 * `options` <[Object]> Optional parameters
   * `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `500`.
 
 ```js
-await expectPage(page).toMatch('Lorem ipsum')
+await expect(page).toMatch('Lorem ipsum')
 ```
 
-### expectPage(page).toSelect(selector, valueOrText)
+### expect(page).toSelect(selector, valueOrText)
 
 * `selector` <[string]> A [selector] to match select [element]
 * `valueOrText` <[string]> Value or text matching option
 
 ```js
-await expectPage(page).toSelect('select[name="choices"]', 'Choice 1')
+await expect(page).toSelect('select[name="choices"]', 'Choice 1')
 ```
 
-### expectPage(page).toUploadFile(selector, filePath)
+### expect(page).toUploadFile(selector, filePath)
 
 * `selector` <[string]> A [selector] to match input [element]
 * `filePath` <[string]> A file path
 
 ```js
 import path from 'path'
 
-await expectPage(page).toUploadFile(
+await expect(page).toUploadFile(
   'input[type="file"]',
   path.join(__dirname, 'file.txt'),
 )

packages/expect-puppeteer/src/index.js

@@ -36,7 +36,7 @@ function createMatcher(matcher, page) {
   }
 }
 
-function expectPage(page = global.page) {
+function expectPage(page) {
   const expectation = {
     not: {},
   }
@@ -54,7 +54,18 @@ function expectPage(page = global.page) {
 }
 
 if (typeof global.expect !== 'undefined') {
-  global.expectPage = expectPage
+  const isPuppeteerPage = object =>
+    Boolean(object && object.$ && object.$$ && object.close && object.click)
+  const originalExpect = global.expect
+  global.expect = (actual, ...args) => {
+    if (isPuppeteerPage(actual)) {
+      return expectPage(actual)
+    }
+    return originalExpect(actual, ...args)
+  }
+  Object.keys(originalExpect).forEach(prop => {
+    global.expect[prop] = originalExpect[prop]
+  })
 }
 
 module.exports = expectPage

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

@@ -4,14 +4,14 @@ describe('not.toMatch', () => {
   })
 
   it('should be ok if text is not in the page', async () => {
-    await expectPage().not.toMatch('Nop!')
+    await expect(page).not.toMatch('Nop!')
   })
 
   it('should return an error if text is in the page', async () => {
     expect.assertions(2)
 
     try {
-      await expectPage().not.toMatch('home')
+      await expect(page).not.toMatch('home')
     } catch (error) {
       expect(error.message).toMatch('Text found "home"')
     }

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

@@ -4,13 +4,13 @@ describe('toMatch', () => {
   })
 
   it('should click using selector', async () => {
-    await expectPage().toClick('a[href="/page2.html"]')
+    await expect(page).toClick('a[href="/page2.html"]')
     const pathname = await page.evaluate(() => document.location.pathname)
     expect(pathname).toBe('/page2.html')
   })
 
   it('should click using text', async () => {
-    await expectPage().toClick('a', { text: 'Page 2' })
+    await expect(page).toClick('a', { text: 'Page 2' })
     const pathname = await page.evaluate(() => document.location.pathname)
     expect(pathname).toBe('/page2.html')
   })
@@ -19,7 +19,7 @@ describe('toMatch', () => {
     expect.assertions(2)
 
     try {
-      await expectPage().toClick('a', { text: 'Nop' })
+      await expect(page).toClick('a', { text: 'Nop' })
     } catch (error) {
       expect(error.message).toMatch('Error: Element a (text: "Nop") not found')
     }

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

@@ -4,7 +4,7 @@ describe('toDisplayDialog', () => {
   })
 
   it('should handle dialog', async () => {
-    const dialog = await expectPage().toDisplayDialog(async () => {
+    const dialog = await expect(page).toDisplayDialog(async () => {
       await page.click('#dialog-btn')
     })
     expect(dialog.message()).toBe('Bouh!')

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

@@ -4,7 +4,7 @@ describe('toFill', () => {
   })
 
   it('should fill input', async () => {
-    await expectPage().toFill('[name="firstName"]', 'James')
+    await expect(page).toFill('[name="firstName"]', 'James')
     const value = await page.evaluate(
       () => document.querySelector('[name="firstName"]').value,
     )
@@ -15,7 +15,7 @@ describe('toFill', () => {
     expect.assertions(2)
 
     try {
-      await expectPage().toFill('[name="notFound"]', 'James')
+      await expect(page).toFill('[name="notFound"]', 'James')
     } catch (error) {
       expect(error.message).toMatch('Unable to find "[name="notFound"]" field')
     }

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

@@ -4,7 +4,7 @@ describe('toFillForm', () => {
   })
 
   it('should fill input', async () => {
-    await expectPage().toFillForm('form', {
+    await expect(page).toFillForm('form', {
       firstName: 'James',
       lastName: 'Bond',
     })
@@ -22,7 +22,7 @@ describe('toFillForm', () => {
     expect.assertions(2)
 
     try {
-      await expectPage().toFillForm('form[name="notFound"]', {
+      await expect(page).toFillForm('form[name="notFound"]', {
         firstName: 'James',
         lastName: 'Bond',
       })

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

@@ -4,14 +4,14 @@ describe('toMatch', () => {
   })
 
   it('should be ok if text is in the page', async () => {
-    await expectPage().toMatch('This is home!')
+    await expect(page).toMatch('This is home!')
   })
 
   it('should return an error if text is not in the page', async () => {
     expect.assertions(2)
 
     try {
-      await expectPage().toMatch('Nop')
+      await expect(page).toMatch('Nop')
     } catch (error) {
       expect(error.message).toMatch('Text not found "Nop"')
     }

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

@@ -4,15 +4,15 @@ describe('toSelect', () => {
   })
 
   it('should select an option using value', async () => {
-    await expectPage().toSelect('select[name="my-select"]', 'opt1')
+    await expect(page).toSelect('select[name="my-select"]', 'opt1')
     const currentValue = await page.evaluate(
       () => document.querySelector('select[name="my-select"]').value,
     )
     expect(currentValue).toBe('opt1')
   })
 
   it('should select an option using text', async () => {
-    await expectPage().toSelect('select[name="my-select"]', 'Option 2')
+    await expect(page).toSelect('select[name="my-select"]', 'Option 2')
     const currentValue = await page.evaluate(
       () => document.querySelector('select[name="my-select"]').value,
     )
@@ -23,7 +23,7 @@ describe('toSelect', () => {
     expect.assertions(2)
 
     try {
-      await expectPage().toSelect('select[name="my-select"]', 'Another world')
+      await expect(page).toSelect('select[name="my-select"]', 'Another world')
     } catch (error) {
       expect(error.message).toMatch(
         'Option not found "select[name="my-select"]" ("Another world")',

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

@@ -6,7 +6,7 @@ describe('toUploadFile', () => {
   })
 
   it('should upload a select file', async () => {
-    await expectPage().toUploadFile(
+    await expect(page).toUploadFile(
       'input[type="file"]',
       path.join(__dirname, '../../__fixtures__/file.txt'),
     )
@@ -16,7 +16,7 @@ describe('toUploadFile', () => {
     expect.assertions(2)
 
     try {
-      await expectPage().toUploadFile(
+      await expect(page).toUploadFile(
         'input[name="foo"]',
         path.join(__dirname, '../../__fixtures__/file.txt'),
       )