Simulating API responses in VueJS applications using fixtures

Building frontend web application depends on getting and submitting data from/to the backend, this dependency can slow down the frontend teams to quickly have the UI up and running.

This is a simple and quick tutorial to show how to simulate backend API for VueJS application to solve this issue.

The application

Let’s say we are tasked to build a product catalog in an administration panel for an e-commerce project and we need to have an idea about how the final result of our VueJS based UI will look like without waiting for the backend team to finish the APIs.

For the sake of this tutorial I will demonstrate how to render the products list by just using JavaScript in the browser.

The VueJS code:

The starting code for the application can be downloaded or cloned from this github repository, make sure you are using the starting git branch.

<template>
  <div id="app">
    <h3>Products</h3>
    <ul>
      <li v-for="product of products" :key="product.id">{{product.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      products: []
    }
  },
  async created() {
    const response = await axios.get('/api/products');
    this.products = response.data;
  } 
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

li {
  list-style: none;
}
</style>

Introducing can-fixture

can-fixture, a package part of CanJS framework, as its documentation says, can intercept AJAX requests and simulate the response, it can be used to simulate all HTTP methods (GET, POST, DELETE … etc).
For this introductory tutorial, I will show just how to simulate GET method to list the products.

can-fixture should only be used for development and testing purpose and removed when the real backend APIs are ready for production.

For our product catalog, we need that can-fixture returns the available products in order to be listed in the VueJS based application, this can be achieved following those steps:

• Install can-fixture as a development dependency:
  • npm install --save can-fixture.
• Create a fixtures folder inside the application src folder.
• Create a products.js file that will host the products fixture.
• Add the following code to the products.js file created above:

import fixture from 'can-fixture';

fixture("GET /api/products", () => {
    return [
        {id: 1, name: 'Product 1', 'description': 'A description'}, 
        {id: 2, name: 'Product 2', 'description': 'A product 2 description'},
        {id: 3, name: 'Product 3', 'description': 'A product 3 description'},
    ];
});

export default fixture;

• import fixtures/product in the App.vue file

The final App.vue code should look like:

<template>
  <div id="app">
    <h3>Products</h3>
    <ul>
      <li v-for="product of products" :key="product.id">{{product.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import './fixtures/products';

export default {
  name: 'App',
  data() {
    return {
      products: []
    }
  },
  async created() {
    const response = await axios.get('/api/products');
    this.products = response.data;
  } 
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

li {
  list-style: none;
}
</style>

When refreshing the browser, the configured products in the fixture should be displayed.

How it works?

The fixture function needs two arguments to have it working:

• The method with the endpoint URL
• The request handler

The request handler is the most interesting part, which is just a function that returns the needed data, it can hold more complicated logic, like filtering or sorting.
In this example the response is straightforward and holds the data of our product catalog without any logic.

You can check the canjs docs for more details about how can-fixture works.

In future tutorials we will look at how we can use can-fixture to handle more complicated use cases, like searching and filtering.

I hope you find this quick tutorial useful to improve the process and development experience, please let me know your thoughts.