Skip to content

Latest commit

 

History

History

server-communication__bootstrapping-your-app

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
cypress
cypress
 
 
README.md
README.md
 
 
app.js
app.js
 
 
bootstrap.hbs
bootstrap.hbs
 
 
cypress.config.js
cypress.config.js
 
 
package.json
package.json
 
 
server.js
server.js
 
 
xhr.hbs
xhr.hbs
 
 

README.md

bootstrapping-your-app

Shows how end-to-end tests can inject data into the application

  • Use cy.visit() onBeforeLoad callback.
  • Start your application with test data.
  • Stub an XHR to seed with test data.
  • Wait on an XHR to finish.

See cypress/e2e/bootstrapping_your_app_spec.cy.js for two solutions.

1. Injecting object into window

In bootstrap.hbs the application renders into the page an object stored in window._bootstrappedData. The end-to-end tests against /bootstrap.html check the default data and also inject their own data us cy.visit() onBeforeLoad callback.

2. Mocking data returned by XHR call

In xhr.hbs the application makes a separate call to get the data to display. The end-to-end tests can stub the call and inject an object loaded from the fixture file cypress/fixtures/bootstrap.json

Development

  1. Start the local server
npm start

This servers a page at http://localhost:7070/bootstrap.html and another example page at http://localhost:7070/xhr.html

  1. Open Cypress GUI
npm run cypress:open

tip: to start both the local server and open Cypress GUI at once use (useful for development)

npm run dev