fixture(ajaxSettings, requestHandler(...))

If an XHR request matches ajaxSettings, calls requestHandler with the XHR requests data. Makes the XHR request respond with the return value of requestHandler or the result of calling its response argument.

When adding a fixture, it will remove any identical fixtures from the list of fixtures. The last fixture added will be the first matched.

The following traps requests to GET /todos and responds with an array of data:

import {fixture, ajax} from "can";

fixture( { method: "get", url: "/todos" },
  ( request, response, headers, ajaxSettings ) => {
    return {
      data: [
        { id: 1, name: "dishes" },
        { id: 2, name: "mow" }
      ]
    };
  }
);

ajax( {url: "/todos"} ).then( result => {
  console.log( result.data ); //-> [{id: 1, name: "dishes"}, {id:2, name: "mow"}]
} );

Return a Promise (or use async & await) from requestHandler to asynchronously return results. This allows fixtures to depend on each other, introduce dynamic delays, and even depend on external resources.

import {fixture, ajax} from "can";

fixture( { method: "get", url: "/todos" },
  ( request, response, headers, ajaxSettings ) => {
    return new Promise((resolve) => {
      setTimeout(() => resolve({
        data: [
          { id: 1, name: "dishes" },
          { id: 2, name: "mow" }
        ]
      }), 1000);
    });
  }
);

// or

fixture( { method: "get", url: "/todos" },
  async ( request, response, headers, ajaxSettings ) => {
    await delay(1000);
    return {
      data: [
        { id: 1, name: "dishes" },
        { id: 2, name: "mow" }
      ]
    };
  });
);

ajax( {url: "/todos"} ).then( result => {
  console.log( result.data ); //-> [{id: 1, name: "dishes"}, {id:2, name: "mow"}]
} );

fixture( ajaxSettings, url )

Redirects the request to another url. This can be useful for simulating a response with a file.

import {fixture, ajax} from "can";

fixture( { url: "/tasks" }, "/fixtures/tasks.json" );

ajax( {url: "/tasks"} ); // "can-fixture: /tasks => /fixtures/tasks.json"

Placeholders available in the ajaxSettings url will be available in the redirect url:

import {fixture, ajax} from "can";

fixture( {url: "/tasks/{id}"}, "fixtures/tasks/{id}.json" );

ajax( {url: "/tasks/1"} ); // "can-fixture: /tasks/1 => /fixtures/tasks/1.json"

fixture( ajaxSettings, data )

Responds with the result of data.

import {fixture, ajax} from "can";

fixture( {url: "/tasks"}, {tasks: [ {id: 1, complete: false} ]} );

ajax( {url: "/tasks"} ).then( result => {
  console.log( result ); //-> {tasks:[{id:1, complete:false}]}
} );

fixture(ajaxSettings, delay)

Delays the ajax request from being made for delay milliseconds. See delay for more information.

import {fixture, ajax} from "can";

fixture( { url: "/tasks" }, 2000 );

ajax( {url: "/tasks"} ); // "can-fixture: /tasks => delay 2000ms"

This doesn't simulate a response, but is useful for simulating slow connections.

fixture(ajaxSettings, null)

Removes the matching fixture from the list of fixtures. See on for related.

import {fixture, ajax} from "can";

fixture( {url: "/tasks"}, "fixtures/tasks.json" );

ajax( {url: "/tasks"} ); // requests fixtures/tasks.json

fixture( {url: "/tasks"}, null );

// Made a request to "/tasks", but we catch a 404.
ajax( {url: "/tasks"} ).catch( error => {
  console.log("error"); //-> "error"
});

fixture( methodAndUrl, url|data|requestHandler )

A short hand for creating an ajaxSettings with a method and url.

fixture( "GET /tasks", requestHandler );

// is the same as

fixture( { method: "get", url: "/tasks" }, requestHandler );

fixture( url, url|data|requestHandler )

A short hand for creating an ajaxSettings with just a url.

fixture( "/tasks", requestHandler );

// is the same as

fixture( { url: "/tasks" }, requestHandler );

fixture( fixtures )

Create multiple fixtures at once.

import {fixture, ajax} from "can";

fixture( {
  "POST /tasks": () => {
    return { id: parseInt(Math.random() * 10, 10) };
  },
  "GET /tasks": { data: [ {id: 1, name: "mow lawn"} ] },
  "/people": "fixtures/people.json"
} );

ajax( {type: "POST", url:"/tasks"} ).then( result => {
  console.log( result ); //-> {id: RandomNumber}
} );

ajax( {url: "/tasks"} ).then( result => {
  console.log( result.data ); //-> [ {id: 1, name: "mow lawn"} ]
} );

fixture( restfulUrl, store )

Wire up a restful API scheme to a store.

import {QueryLogic, fixture, ajax} from "can";

const todoStore = fixture.store( [
  { id: 1, name: "Do the dishes" },
  { id: 2, name: "Walk the dog" }
], new QueryLogic( {identity: ["id"]} ) );

// can also be written fixture("/api/todos", todoStore);
fixture( "/api/todos/{id}", todoStore );

ajax( {url:"/api/todos/1"} ).then( result => {
  console.log( result ); //-> "{'id':1,'name':'Do the dishes'}"
} );

This is a shorthand for wiring up the todoStore as follows:

import {QueryLogic, fixture, ajax} from "can";

const todoStore = fixture.store( [
  { id: 1, name: "Do the dishes" },
  { id: 2, name: "Walk the dog" }
], new QueryLogic( {identity: ["id"]} ) );

fixture( {
  "GET /api/todos": todoStore.getListData,
  "GET /api/todos/{id}": todoStore.getData,
  "POST /api/todos": todoStore.createData,
  "PUT /api/todos/{id}": todoStore.updateData,
  "DELETE /api/todos/{id}": todoStore.destroyData
} );

ajax( {url: "/api/todos/1"} ).then( result => {
  console.log( result ); //-> "{'id':1,'name':'Do the dishes'}"
} );

fixture(ajaxSettingsArray)

Add fixtures that have been previously removed with another call to fixture.