Skip to content

Commit 4ba93a4

Browse files
chrisbreidingjennifer-shehane
authored andcommitted
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
1 parent e6f3b4c commit 4ba93a4

File tree

17 files changed

+376
-203
lines changed

17 files changed

+376
-203
lines changed

README.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ Recipe | Category | Description
2929
[File Upload in React](#file-upload-in-react) | Unit Testing | Test file upload in React app
3030
[Adding Chai Assertions](#adding-chai-assertions) | Extending Cypress | Add new or custom chai assertions
3131
[Bootstrapping your App](#bootstrapping-your-app) | Server Communication | Seed your application with test data
32+
[Seeding your Database in Node](#seeding-your-database-in-node) | Server Communication | Seed your database with test data
3233

3334
## Overview
3435

@@ -268,5 +269,11 @@ Get around the lack of a `.hover()` command.
268269
- Stub an XHR to seed with test data.
269270
- Wait on an XHR to finish.
270271

272+
### [Seeding your Database in Node](./examples/server-communication__seeding-database-in-node)
273+
274+
- Use [`cy.task()`](https://on.cypress.io/task) to communicate with node via the `pluginsFile`.
275+
- Seed your database with test data.
276+
- Wrap your `pluginsFile` so you can require files that use ES modules (`import`/`export`).
277+
271278
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
272-
[renovate-app]: https://renovateapp.com/
279+
[renovate-app]: https://renovateapp.com/
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["transform-es2015-modules-commonjs"]
3+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
db.json
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Seeding Your Database in Node
2+
3+
This recipe demonstrates two things:
4+
5+
* Seeding your database with node.js using [`cy.task()`](https://on.cypress.io/task)
6+
* Using ES modules `import`/`export` syntax in your plugins
7+
8+
## Seeding your database
9+
10+
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.
11+
12+
## Using ES modules in plugins
13+
14+
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`.
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"baseUrl": "http://localhost:7082",
3+
"supportFile": false
4+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"posts": [
3+
{
4+
"title": "Cypress is going open source!",
5+
"date": "05-04-2017",
6+
"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!"
7+
},
8+
{
9+
"title": "Atom test utils",
10+
"date": "05-05-2017",
11+
"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."
12+
},
13+
{
14+
"title": "Why I joined the Cypress.io team",
15+
"date": "05-15-2017",
16+
"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!"
17+
}
18+
]
19+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// This recipe shows you how to seed your database using node.js
2+
3+
describe('Seeding Database in Node', function(){
4+
beforeEach(function(){
5+
cy.fixture('seed').as('seed')
6+
})
7+
8+
it('can use fixture data to seed database', function(){
9+
// We can use cy.task to communicate with node via the pluginsFile
10+
// See cypress/plugins/main.js for the implementation of the 'seed:db' task
11+
cy.task('seed:db', this.seed)
12+
cy.visit('/index.html')
13+
cy.get('#posts li').should('have.length', 3)
14+
cy.get('#posts li').first().find('h2').should('have.text', 'Cypress is going open source!')
15+
})
16+
17+
it('can directly seed data to test empty state', function(){
18+
cy.task('seed:db', { posts: [] })
19+
cy.visit('/index.html')
20+
cy.get('#posts').should('have.text', 'No posts')
21+
})
22+
})
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This enables using import/export in plugins/main.js
2+
// and any files it requires
3+
//
4+
// Support for other syntax and features (not supported
5+
// by the version of node run by Cypress) can
6+
// be configured via babel plugins in the .babelrc
7+
8+
require('babel-register')
9+
10+
module.exports = require('./main').default
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// We're able to import and re-use the same code we use in our app
2+
import { seed } from '../../server/db'
3+
4+
export default (on) => {
5+
on('task', {
6+
'seed:db' (data) {
7+
return seed(data).then(() => {
8+
return data
9+
})
10+
}
11+
})
12+
}
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Seeding Your Database with Test Data</title>
6+
</head>
7+
<body>
8+
<h1>Seeding Your Database with Test Data</h1>
9+
<p>
10+
This example has the client app.js make an XHR for the data from the server.
11+
</p>
12+
<p>
13+
In this recipe we are going to seed the database with Cypress so we can control the initial data payload.
14+
</p>
15+
<div id="posts"></div>
16+
17+
<script src="/node_modules/jquery/dist/jquery.js"></script>
18+
<script>
19+
const App = {
20+
start: function(){
21+
$.getJSON('/posts.json')
22+
.done((posts) => {
23+
this.displayPosts(posts)
24+
})
25+
},
26+
27+
displayPosts: function(posts = []){
28+
if (posts.length) {
29+
const postsDom = posts.map((post) => (
30+
`<li>
31+
<h2>${post.title}</h2>
32+
<p>${post.date}</p>
33+
<p>${post.body}</p>
34+
</li>`
35+
)).join('')
36+
$('#posts').append(`<ul>${postsDom}</ul>`)
37+
} else {
38+
$('#posts').text('No posts')
39+
}
40+
}
41+
}
42+
43+
App.start()
44+
</script>
45+
</body>
46+
</html>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "seeding-your-database",
3+
"version": "1.0.0",
4+
"description": "",
5+
"scripts": {
6+
"cypress:run": "../../node_modules/.bin/cypress run",
7+
"cypress:open": "../../node_modules/.bin/cypress open",
8+
"start": "node server/index.js --port 7082"
9+
}
10+
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import fs from 'fs-extra'
2+
import path from 'path'
3+
4+
const filePath = path.join(__dirname, 'db.json')
5+
6+
export function seed (data) {
7+
return fs.outputJson(filePath, data)
8+
}
9+
10+
export function getPosts () {
11+
return fs.readJson(filePath)
12+
.then((data = {}) => {
13+
return data.posts
14+
})
15+
}
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
require('babel-register')
2+
require('./routes')
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import path from 'path'
2+
import minimist from 'minimist'
3+
import express from 'express'
4+
import { getPosts } from './db'
5+
6+
const app = express()
7+
8+
// get port from passed in args from scripts/start.js
9+
const port = minimist(process.argv.slice(2)).port
10+
11+
app.use(express.static('.'))
12+
app.use('/node_modules', express.static(path.join(__dirname, '..', '..', '..', 'node_modules')))
13+
14+
app.get('/posts.json', (req, res) => {
15+
getPosts().then((posts) => {
16+
res.json(posts)
17+
})
18+
})
19+
20+
app.listen(port)

nodemon.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"ignore": [
3+
"cypress/integration/*.js",
4+
"db.json"
5+
]
6+
}

0 commit comments

Comments
 (0)