<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1%20https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1"> Bitovi Blog - UX and UI design, JavaScript and Front-end development

AJAX fixtures for JavaScript

Justin Meyer

can-fixture provides AJAX fixtures for JavaScript. Mock up AJAX responses to test code, simulate errors or slow connections.

posted in Open Source on April 18, 2016 by Justin Meyer

AJAX fixtures for JavaScript

Justin Meyer by Justin Meyer

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:

JS Bin on jsbin.com

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:

JS Bin on jsbin.com

Simulate errors and slow connections

can-fixture allows you to simulate errors like: 401 Unauthorized , 404 Not Found, 500 Internal Server Error.

JS Bin on jsbin.com

And, you can also add a time delay to requests:

JS Bin on jsbin.com

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:

JS Bin on jsbin.com

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.

Create better web applications. We’ll help. Let’s work together.