Using Fixture JSON with Ember CLI's http-mocks & Tests

Ember.js in Beast Mode… In DEV and TEST ENVs…Instantaneous XHR responses are awesome. I can work anywhere, any time, regardless of my connectivity to a dev/cloud server, and even before I/someone build(s) an API. Sharing the same fixture JSON with my tests is priceless.

Transcript

1. U S I N G F I X T U R E J S O N W I T H 
 E M B E R C L I ' S H T T P - M O C K S & T E S T S E M B E R . J S I N B E A S T M O D E …
2. B AT T L E W I T H Y O U R A P I ? E V E R L O O S E A …
3. – E M B E R - C L I . C O M “Mocks have several advantages over fixtures, a primary one being that they interact with your application’s adapters”
4. W O R K C L O U D L E S S ? W / O A N A P I ? • Oh wait, we didn’t build that endpoint yet • Model some data in your application offline, cloudless and/or before the endpoint is created -404-
5. B E A S T M O D E T U R N O N …
6. U S E _ H T T P _ M O C K S = t r u e   e m b e r   s e r v e r   -­‐ d e v I N B E A S T M O D E …
8. W H E R E I S T H E D ATA S O U R C E ? … F O R T H E T E S T S … F O R T H E M O C K A P I
9. I S T H E D ATA T H E S A M E ? … I N T H E T E S T S … T H E M O C K A P I
10. U S E T H E S A M E PAY L O A D A S Y O U R P R O D U C T I O N S E R V E R W I L L U S E … J S O N F I X T U R E
11. I T ’ S A C T U A L LY P R E T T Y S I M P L E • Use the generator to create an http-mock
 `ember  g  http-­‐mock  colors` • Import a JSON payload from /fixtures/api/colors.json into the Ember CLI (express) mock server • Import the same JSON doc as an ES6 module in your tests (need to customize your Brocfile) • Customize your Brocfile to convert the JSON fixtures into modules for importing in your tests • Add Sinon.JS to your project and mock XHR responses
12. L E T ’ S L O O K AT S O M E C O D E …
13. C U S T O M I Z E T H E E X P R E S S S E R V E R … H T T P - M O C K S
16. C R E AT E A M O D E L & R O U T E U S E T H E M O C K J S O N
17. FA K E X H R I N Y O U R T E S T S … S I N O N . J S
18. B R O C F I L E . J S • Convert static JSON files to modules • Compile JSON to ES6 • Custom build runs only in ‘test’ ENV • Import JSON modules in the test runner • Use fixture JSON in your tests, mock XHR
19. A F E W M O R E F I L E S T O S E T U P…
24. R E - C A P… • This is not an ember-cli addon • It’s a DIY solution • Perhaps we could make an addon for converting from JSON fixture files (*.json) to ES6 modules (tooling) • Use the same JSON Payload as your production server sends to your client application, copy to fixture/*/*.json • What I love about this setup is…
25. – M E I N E M B E R B E A S T M O D E “Ember.js in Beast Mode… In DEV and TEST ENVs… Instantaneous XHR responses are awesome. 
 I can work anywhere, any time, regardless of my connectivity to a dev/cloud server, and even before 
 I/someone build(s) an API. Sharing the same fixture JSON with my tests is priceless.”
27. E M B E R F I X T U R I F I C … https://github.com/pixelhandler/ember-fixturific/pull/1/files