feat: add jest-puppeteer-preset

argos-ci · Mar 4, 2018 · 7fbb273 · 7fbb273
1 parent 6b7f5a4
commit 7fbb273
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 Run your tests using Jest & Puppeteer 🎪✨
 
 ```
-npm install jest-environment-puppeteer puppeteer
+npm install jest-puppeteer-preset puppeteer
 ```
 
 ## Usage
@@ -16,9 +16,7 @@ Update your Jest configuration:
 
 ```json
 {
-  "globalSetup": "jest-environment-puppeteer/setup",
-  "globalTeardown": "jest-environment-puppeteer/teardown",
-  "testEnvironment": "jest-environment-puppeteer"
+  "preset": "jest-puppeteer-preset"
 }
 ```
 
@@ -27,12 +25,11 @@ Use Puppeteer in your tests:
 ```js
 describe('Google', () => {
   beforeAll(async () => {
-    await mainPage.goto('https://google.com')
+    await page.goto('https://google.com')
   })
 
   it('should display "google" text on page', async () => {
-    const text = await mainPage.evaluate(() => document.body.textContent)
-    expect(text).toContain('google')
+    expectPage().toMatch('google')
   })
 })
 ```
@@ -41,7 +38,9 @@ describe('Google', () => {
 
 ### Writing tests using Puppeteer
 
-To write your integration tests using Puppeteer you can find all available methods in [Puppeteer documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md).
+Writing integration test can be done using [Puppeteer API]([Puppeteer documentation](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-ppuppeteer).
 
 ### Configure Puppeteer
 
@@ -59,7 +58,7 @@ module.exports = {
 
 ### Configure ESLint
 
-Jest Environment Puppeteer exposes two new globals: `browser` and `page`. If you want to avoid errors, you can add them to your `.eslintrc.js`:
+Jest Puppeteer exposes two new globals: `browser`, `page` and `expectPage`. If you want to avoid errors, you can add them to your `.eslintrc.js`:
 
 ```js
 // .eslintrc.js
@@ -70,6 +69,7 @@ module.exports = {
   globals: {
     page: true,
     browser: true,
+    expectPage: true,
   },
 }
 ```

diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,5 @@
 module.exports = {
+  preset: './jest-puppeteer-preset',
   globalSetup: './jestConfig/globalSetup',
   globalTeardown: './jestConfig/globalTeardown',
-  testEnvironment: './packages/jest-environment-puppeteer',
-  setupTestFrameworkScriptFile: './packages/expect-puppeteer',
 }
diff --git a/packages/jest-environment-puppeteer/README.md b/packages/jest-environment-puppeteer/README.md
@@ -27,96 +27,16 @@ Use Puppeteer in your tests:
 ```js
 describe('Google', () => {
   beforeAll(async () => {
-    await mainPage.goto('https://google.com')
+    await page.goto('https://google.com')
   })
 
   it('should display "google" text on page', async () => {
-    const text = await mainPage.evaluate(() => document.body.textContent)
+    const text = await page.evaluate(() => document.body.textContent)
     expect(text).toContain('google')
   })
 })
 ```
 
-## Recipes
-
-### Writing tests using Puppeteer
-
-To write your integration tests using Puppeteer you can find all available methods in [Puppeteer documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md).
-
-### Configure Puppeteer
-
-Jest Puppeteer automatically detect the best config to start Puppeteer but sometimes you may need to specify custom options.
-
-[All Puppeteer launch options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) can be specified in `jest-puppeteer.config.js` at the root of the project. Since it is JavaScript, you can use all stuff you need, including environment.
-
-```js
-// jest-puppeteer.config.js
-module.exports = {
-  dumpio: true,
-  headless: process.env.HEADLESS !== 'false',
-}
-```
-
-### Configure ESLint
-
-Jest Environment Puppeteer exposes two new globals: `browser` and `page`. If you want to avoid errors, you can add them to your `.eslintrc.js`:
-
-```js
-// .eslintrc.js
-module.exports = {
-  env: {
-    jest: true,
-  },
-  globals: {
-    page: true,
-    browser: true,
-  },
-}
-```
-
-### Extend PuppeteerEnvironment
-
-Sometimes you want to use your own environment, to do that you can extend `PuppeteerEnvironment`.
-
-```js
-const PuppeteerEnvironment = require('jest-environment-puppeteer')
-
-class CustomEnvironment extends PuppeteerEnvironment {
-  async setup() {
-    await super.setup()
-    // Your setup
-  }
-
-  async teardown() {
-    // Your teardown
-    await super.teardown()
-  }
-}
-
-module.exports = CustomEnvironment
-```
-
-### Access `globalSetup` or `globalTeardown`
-
-It is possible to access `globalSetup` or `globalTeardown` in your scripts.
-
-```js
-const {
-  setup: setupPuppeteer,
-  teardown: teardownPuppeteer,
-} = require('jest-environment-puppeteer')
-
-async function setup() {
-  await setupPuppeteer()
-  // ...
-}
-
-async function teardown() {
-  // ...
-  await teardownPuppeteer()
-}
-```
-
 ## API
 
 ### `global.browser`

diff --git a/packages/jest-environment-puppeteer/package.json b/packages/jest-environment-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-environment-puppeteer",
-  "description": "Run your tests using Jest & Puppeteer.",
+  "description": "Puppeteer environment for Jest.",
   "version": "1.0.1",
   "main": "index.js",
   "repository": "https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-environment-puppeteer",

diff --git a/packages/jest-puppeteer-preset/README.md b/packages/jest-puppeteer-preset/README.md
@@ -0,0 +1,31 @@
+# jest-puppeteer-preset
+
+[![Build Status][build-badge]][build]
+[![version][version-badge]][package]
+[![MIT License][license-badge]][license]
+
+Jest preset containing all required configuration for writing integration tests using Puppeteer.
+
+```
+npm install jest-puppeteer-preset puppeteer
+```
+
+## Usage
+
+```js
+// jest.config.js
+module.exports = {
+  preset: 'jest-puppeteer-preset',
+}
+```
+
+## License
+
+MIT
+
+[build-badge]: https://img.shields.io/travis/smooth-code/jest-puppeteer.svg?style=flat-square
+[build]: https://travis-ci.org/smooth-code/jest-puppeteer
+[version-badge]: https://img.shields.io/npm/v/jest-puppeteer-preset.svg?style=flat-square
+[package]: https://www.npmjs.com/package/jest-puppeteer-preset
+[license-badge]: https://img.shields.io/npm/l/jest-puppeteer-preset.svg?style=flat-square
+[license]: https://github.com/smooth-code/jest-puppeteer/blob/master/LICENSE
diff --git a/packages/jest-puppeteer-preset/jest-preset.json b/packages/jest-puppeteer-preset/jest-preset.json
@@ -0,0 +1,6 @@
+{
+  "globalSetup": "jest-environment-puppeteer/setup",
+  "globalTeardown": "jest-environment-puppeteer/teardown",
+  "testEnvironment": "jest-environment-puppeteer",
+  "setupTestFrameworkScriptFile": "expect-puppeteer"
+}
diff --git a/packages/jest-puppeteer-preset/package.json b/packages/jest-puppeteer-preset/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "jest-puppeteer-preset",
+  "description": "Run your tests using Jest & Puppeteer.",
+  "version": "1.0.1",
+  "main": "lib/index.js",
+  "repository": "https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-puppeteer-preset",
+  "author": "Greg Bergé <berge.greg@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "jest",
+    "puppeteer",
+    "jest-puppeteer",
+    "chromeless",
+    "chrome-headless"
+  ],
+  "peerDependencies": {
+    "puppeteer": "^1.0.0"
+  },
+  "dependencies": {
+    "jest-environment-puppeteer": "^1.0.1",
+    "expect-puppeteer": "^1.0.1"
+  }
+}