Simulating API responses in VueJS applications using fixtures
Tags: vue, restful, javascript
Published: 2020-03-04 16:48:23

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](https://vuejs.org) 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](https://github.com/cherifGsoul/vue-can-fixture/tree/starting), make sure you are using the `starting` git branch.

```js
<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](https://canjs.com/doc/can-fixture.html), a package part of [CanJS](https://canjs.com/) 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:

```js
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:
```js
<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](https://canjs.com/doc/can-fixture.html#fixture_methodAndUrl_url_data_requestHandler_) 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](https://canjs.com/doc/can-fixture.html) 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.