Add recipe for cy.task / using import/export in plugins (#120)

* add recipe for seeding db with cy.task / using import/export in plugins

* cy.task -> cy.task()

* node.js -> Node.js

- split contractions

* package-lock changes

* get it together package-lock

Author: chrisbreiding

README.md

@@ -29,6 +29,7 @@ Recipe | Category | Description
 [File Upload in React](#file-upload-in-react) | Unit Testing | Test file upload in React app
 [Adding Chai Assertions](#adding-chai-assertions) | Extending Cypress | Add new or custom chai assertions
 [Bootstrapping your App](#bootstrapping-your-app) | Server Communication | Seed your application with test data
+[Seeding your Database in Node](#seeding-your-database-in-node) | Server Communication | Seed your database with test data
 
 ## Overview
 
@@ -268,5 +269,11 @@ Get around the lack of a `.hover()` command.
 - Stub an XHR to seed with test data.
 - Wait on an XHR to finish.
 
+### [Seeding your Database in Node](./examples/server-communication__seeding-database-in-node)
+
+- Use [`cy.task()`](https://on.cypress.io/task) to communicate with node via the `pluginsFile`.
+- Seed your database with test data.
+- Wrap your `pluginsFile` so you can require files that use ES modules (`import`/`export`).
+
 [renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
-[renovate-app]: https://renovateapp.com/
+[renovate-app]: https://renovateapp.com/

examples/server-communication__seeding-database-in-node/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-es2015-modules-commonjs"]
+}

examples/server-communication__seeding-database-in-node/.gitignore

@@ -0,0 +1 @@
+db.json

examples/server-communication__seeding-database-in-node/README.md

@@ -0,0 +1,14 @@
+# Seeding Your Database in Node
+
+This recipe demonstrates two things:
+
+* Seeding your database with node.js using [`cy.task()`](https://on.cypress.io/task)
+* Using ES modules `import`/`export` syntax in your plugins
+
+## Seeding your database
+
+If you use Node.js for your app, you can re-use your app code to help set up and manipulate data for your tests. In this example, we utilize [`cy.task()`](https://on.cypress.io/task) to connect with node via the `pluginsFile` to re-use the `server/db.js` and seed the database.
+
+## Using ES modules in plugins
+
+You can not use `import`/`export` directly in your `pluginsFile`, but you can wrap it so that any subsequently required files can utilize `import`/`export` and any other syntax that is configured in your `.babelrc`.

examples/server-communication__seeding-database-in-node/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:7082",
+  "supportFile": false
+}

examples/server-communication__seeding-database-in-node/cypress/fixtures/seed.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "title": "Cypress is going open source!",
+      "date": "05-04-2017",
+      "body": "That’s right! After years of development and focused iteration with our early adopters, the most advanced front-end testing tool in the universe is almost ready for its ultimate adventure: going open source!"
+    },
+    {
+      "title": "Atom test utils",
+      "date": "05-05-2017",
+      "body": "At Cypress, we love creating tools that make testing easier and more productive. We also write a lot of tests ourselves to both guide our development and help prevent regressions. While having a lot of tests is a great way to prevent regressions, it can get in the way of getting quick feedback during development. The more tests there are, the longer it takes to run them all, which can slow things down."
+    },
+    {
+      "title": "Why I joined the Cypress.io team",
+      "date": "05-15-2017",
+      "body": "You know what is hard? Changing jobs is hard. Testing web applications is hard. Luckily for me, I have an opportunity to tackle both problems at once!"
+    }
+  ]
+}

examples/server-communication__seeding-database-in-node/cypress/integration/seeding_database_in_node_spec.js

@@ -0,0 +1,22 @@
+// This recipe shows you how to seed your database using node.js
+
+describe('Seeding Database in Node', function(){
+  beforeEach(function(){
+    cy.fixture('seed').as('seed')
+  })
+
+  it('can use fixture data to seed database', function(){
+    // We can use cy.task to communicate with node via the pluginsFile
+    // See cypress/plugins/main.js for the implementation of the 'seed:db' task
+    cy.task('seed:db', this.seed)
+    cy.visit('/index.html')
+    cy.get('#posts li').should('have.length', 3)
+    cy.get('#posts li').first().find('h2').should('have.text', 'Cypress is going open source!')
+  })
+
+  it('can directly seed data to test empty state', function(){
+    cy.task('seed:db', { posts: [] })
+    cy.visit('/index.html')
+    cy.get('#posts').should('have.text', 'No posts')
+  })
+})

examples/server-communication__seeding-database-in-node/cypress/plugins/index.js

@@ -0,0 +1,10 @@
+// This enables using import/export in plugins/main.js
+// and any files it requires
+//
+// Support for other syntax and features (not supported
+// by the version of node run by Cypress) can
+// be configured via babel plugins in the .babelrc
+
+require('babel-register')
+
+module.exports = require('./main').default

examples/server-communication__seeding-database-in-node/cypress/plugins/main.js

@@ -0,0 +1,12 @@
+// We're able to import and re-use the same code we use in our app
+import { seed } from '../../server/db'
+
+export default (on) => {
+  on('task', {
+    'seed:db' (data) {
+      return seed(data).then(() => {
+        return data
+      })
+    }
+  })
+}

examples/server-communication__seeding-database-in-node/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Seeding Your Database with Test Data</title>
+</head>
+<body>
+  <h1>Seeding Your Database with Test Data</h1>
+  <p>
+    This example has the client app.js make an XHR for the data from the server.
+  </p>
+  <p>
+    In this recipe we are going to seed the database with Cypress so we can control the initial data payload.
+  </p>
+  <div id="posts"></div>
+
+  <script src="/node_modules/jquery/dist/jquery.js"></script>
+  <script>
+    const App = {
+      start: function(){
+        $.getJSON('/posts.json')
+        .done((posts) => {
+          this.displayPosts(posts)
+        })
+      },
+
+      displayPosts: function(posts = []){
+        if (posts.length) {
+          const postsDom = posts.map((post) => (
+            `<li>
+              <h2>${post.title}</h2>
+              <p>${post.date}</p>
+              <p>${post.body}</p>
+            </li>`
+          )).join('')
+          $('#posts').append(`<ul>${postsDom}</ul>`)
+        } else {
+          $('#posts').text('No posts')
+        }
+      }
+    }
+
+    App.start()
+  </script>
+</body>
+</html>

examples/server-communication__seeding-database-in-node/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "seeding-your-database",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "start": "node server/index.js --port 7082"
+  }
+}

examples/server-communication__seeding-database-in-node/server/db.js

@@ -0,0 +1,15 @@
+import fs from 'fs-extra'
+import path from 'path'
+
+const filePath = path.join(__dirname, 'db.json')
+
+export function seed (data) {
+  return fs.outputJson(filePath, data)
+}
+
+export function getPosts () {
+  return fs.readJson(filePath)
+  .then((data = {}) => {
+    return data.posts
+  })
+}

examples/server-communication__seeding-database-in-node/server/index.js

@@ -0,0 +1,2 @@
+require('babel-register')
+require('./routes')

examples/server-communication__seeding-database-in-node/server/routes.js

@@ -0,0 +1,20 @@
+import path from 'path'
+import minimist from 'minimist'
+import express from 'express'
+import { getPosts } from './db'
+
+const app = express()
+
+// get port from passed in args from scripts/start.js
+const port = minimist(process.argv.slice(2)).port
+
+app.use(express.static('.'))
+app.use('/node_modules', express.static(path.join(__dirname, '..', '..', '..', 'node_modules')))
+
+app.get('/posts.json', (req, res) => {
+  getPosts().then((posts) => {
+    res.json(posts)
+  })
+})
+
+app.listen(port)

nodemon.json

@@ -0,0 +1,6 @@
+{
+  "ignore": [
+    "cypress/integration/*.js",
+    "db.json"
+  ]
+}