Using Frisby.js to test your API

Why test your API?

Testing an API is important because it allows you to assert that you are conforming to the interface in which you promise to deliver. Testing a the API layer explicitly allows you to catch code changes that change data types, number of return values, etc… and can be an important trigger for you to update your unit tests and API Docs.

Why can’t I just unit test?

Unit testing is intended for the developer to vet the units of their code. You should worry about testing at the *method* level and not necessarily how it all fits together. By introducing API testing, you’ll be able to get a better handle on whether you’re using appropriate mock data in your tests and asserting the correct return values.

Well can’t I just rely on automated testing instead?

Automation suites, such as Selenium do not test at the API level; rather, they test at the user interface level. Sure, you could build your own automated tool to explicitly use your API to test behavior, but again, you are not testing the purity and correctness of the API. Sure, if your test uses the API a certain way and a developer breaks it, you can detect API failures. However, these types of tests don’t necessarily check for parameter correctness and all variations of use of an API.

API Testing Example

This is where Frisby.js comes into play. Frisby.js is a JavaScript-based API testing framework that makes it incredibly simple for you to test against your API. Here is an example:

Getting set up

Install Frisby.js + Jasmine Node

Test Structure

Frisby tests require that you reference the frisby global variable. From here, you can call frisby.create to create the structure of your first test:

Write your first test

Let’s say your website allows you to check a stock price by passing in a stock symbol. This is a GET request and takes one required parameter, symbol,  and one optional parameter, timestamp. If timestamp is passed in, the API will retrieve the stock price, if available, at the given timestamp. Otherwise, it will return the latest stock price.

In this example, we used Frisby.js to assert the validity of the response both in TYPES and in values, once we could narrow the stock down to a particular time. In one short test, we tested the response code, the header contents, and the JSON body of the response. Be sure to check out the Frisby.js API for detailed descriptions on each of the statements above.

In conclusion…

In this blog post, we explored WHY we test an API vs. unit testing vs. automated testing and went through a simple example on how to write a test against a simple API. API testing is important because it will help you identify breaking API changes from code that may otherwise been unnoticed. Also, it helps you keep your mock data/unit tests up to date and identify changes needed in your API documentation.

In a future blog post, I will dive deeper into Frisby.js and show you how you can write tests that depend on one another (think OAuth tokens and needing a token for a subsequent test) as well as a few more advanced examples.



ES6 Features: Classes

Up until ES6, JavaScript lacked the ability to create classes in the way that other languages offer. Sure you could create “classes,” but it always left a sour taste in our mouths. Talk about UGLY code. Although ES6 adds the keyword, “class”, they really are syntactic sugar around the old way of doing it in ES5. You’ll notice this trend around much of ES6 features–but I digress.

Why should I care?
Classes promote structure and the new syntax covers up the yucky code behind the scenes. These new classes also promote the use of inheritance and building structured code.

Imagine a scenario, where you are creating a class to represent a user in your database.

ES5 “Classes”

Eh it’s not really that bad, but it can be really confusing. Aren’t functions functions? How is it possible to create a new instance of a function? There is a lot you can do with building objects and inheritance, by ES5 just didn’t really expose it or make it meaningful enough for novice users to understand.

ES6 Classes

Pretty cool, huh?  This looks and feels like classes in other languages and comes more natural. You explicitly define a constructor, which is how you create an instance of a class. Then you can define members of the class as you see fit (notice you do NOT need the keyword function in front of them–pretty odd and inconsistent if you ask me).

ES6 Class Inheritance

Lets say your database has another type of user called an author. Authors are users but also have additional metadata. You can use class inheritance to model this:

What did we learn here?

  1. Use the keyword “extends” to write a class that inherits from another class.
  2. The keyword “super” becomes available in the child class and can be used to call methods on the parent
  3. You can override methods from the parent class simply by defining the method in the class. Notice there is no @override annotation or anything of the sorts required.

Classes in ES6 are important because they are explicit and help promote structured code. Many JS libraries have implemented their own version of classes, such as Dojo, TypeScript, and CoffeeScript, so it will be interesting to see if those get scaled back in the future as ES6 gets closer to fruition.

Chrome is behind on implementing classes in its spec, but you can try this out on the latest FireFox today. Enjoy!

ES6 Features: Arrow Functions

ES6 introduces a concept borrowed from other programming languages, like C#, Java, and CoffeeScript, called arrow functions. An arrow function is a way to write shorthand syntax for anonymous functions, all the while keeping the same binding of “this” as the current object .

Let’s start with an example. Say you have an array that you want to iterate through and print the number to the console if x % 2 == 0. Otherwise, you’ll print the title of your widget. This is how you might do it with ES5 or below:

In ES6, you can write this with arrow functions, without the need to bind to the current object.

Advantages of arrow functions:

  1. No need to write function() as the arrow acts as a shorthand
  2. No need to bind the arrow function to the current context of “this.” It does it automatically.TL;DR: Less code = win!

Want to try it out today? The latest Firefox implements most of the arrow functions spec, as does BabelJS, which I will cover separately in another blog post. Go ahead, give it a shot in the FF developer console! And as always, check the compatibility of ES6 features here: