Today, we're re-releasing our old jQuery fixture library - jQuery.fixture.js - as the new and improved can-fixture. In this article, we'll cover:
- What is can-fixture?
- What is can-fixture used for?
- What's new in this release?
- can-fixture's high level APIs.
There is a free online training on can-fixture on Wednesday, April 20th at 11 AM EST. Watch it on hangout on air. Ask questions on gitter.
If you like the project, let us know with a star:
What is can-fixture?
can-fixture simulates response to HTTP requests made with the XMLHttpRequest (XHR) object. It does this by replacing the native XMLHttpRequest object with a mock XMLHttpRequest object. When you make AJAX request directly, or using jQuery or some other library, can-fixture can handle those requests any way you chooses. You can find the mock XHR object here.
can-fixture works totally independently of the rest of CanJS. You can use it with Angular, React, etc.
What is can-fixture used for?
can-fixture can be used to:
- Work on client code before services are complete.
- Test code that would normally hit the server.
- Simulate errors and slow connections.
Lets see some examples:
Work on client code before services are complete
If you are like us, it's very rare the server/services team has the service-layer working before you start working on the frontend JavaScript client code.
Fortunately, can-fixture makes it easy to simulate a response:
As we'll see later in the "What's new in this release" section, you can now create quite powerful fixtures with filtering, sorting, and pagination quite easily.
Test code that would normally hit the server
Client JavaScript code tends to make lots of requests to the server. Without something like dependency injection, this code can be very difficult to test. There tend to be a lot of possible data combinations and you don't want to have to run a server to test each one.
The following shows using can-fixture to test if the server returns a list of todos or an empty list of todos:
Simulate errors and slow connections
can-fixture allows you to simulate errors like: 401 Unauthorized , 404 Not Found, 500 Internal Server Error.
And, you can also add a time delay to requests:
What's new in this release?
Six years ago we released jQuery.fixture and while can-fixture isn't an earth shattering game-changer, it has some nice improvements and demonstrates that our tech gets better with age. Some can-fixture 0.3.0 highlights:
Supports much more powerful stores using can-set
With fixture.store you can easily create powerful fixtures that simulate a restful service, complete with filtering, sorting, and pagination:
Works with any XHR requests, not just jQuery
can-fixture used to work by hooking into jQuery's ajax functionality via ajaxtransport. Now, it overwrites the XHR object so it works with other libraries and frameworks.
Can delay all requests (slow mode)
If you want to delay all requests by two seconds, you can simply write:
fixture({}, 2000);
Loads from npm
If you're using a module loader like StealJS, JSPM or Browserify, you can add can-fixture to your project with npm like:
> npm install can-fixture --save-dev
And then import it like:
var fixture = require("can-fixture");
We also have AMD and <script> tag versions available.
Try it out!
can-fixture's github page has API docs, and a usage guide. Let us know what you think and what we should work on next.
open source
Previous Post
Next Post
