Programming

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: https://kangax.github.io/compat-table/es6/

Enjoy!

jQuery .prop(“href”) vs .attr(“href”)

jQuery .prop(“href”) is not equal to jQuery .attr(“href”)

The difference between prop and attr is that attr grabs the HTML attribute where as prop grabs the DOM property.

Example:

Be careful in your decision to use attr for referencing an href. 99% of the time, you probably want to use prop.

jQuery Plugin: Find text within selector element(s) that matches specified language and wrap it in a span[lang=langauge]

Sometimes character encoding detection in the back-end of software can be difficult. Here is a quick solution to do it in JavaScript! I’ve implemented a jQuery plugin that accepts selectors and a language, iterates through the .text() of the selectors, and wraps the text in a <span lang=””> where the lang attribute matches the language passed in. With this code, you can change fonts, apply specific actions to text (right to left or left to right), etc…

Here is an example CSS:

Currently, only hebrew and english are defined in the plugin by default, but you can pass in additional languages in the options object when you call the function. The function parameter expects an object that contains these keys

Here’s an example on how you’d call the function:

Download the code from GitHub

Things I’d like to see improve in CSS4 … Part 1

CSS3 has introduced a lot of neat and useful features, but issues still linger that make every-day development pretty difficult.

Variables/Functions

If you’ve used tools such as Sass, you might already be familiar with being able to use variables in CSS. In my mind, you can’t be considered a programming language unless you allow developers to use variables and functions. Otherwise you end up with a ton of repeated code.

Alignment!

Remember in HTML4 where it was considered correct to use <center>  to center anything horizontally and valign=”middle” to center anything vertically? It’s actually very difficult to do that with the CSS3 spec as is.

Well what about text-align: center? This works, but only on block elements. Think about that for a second…

What about vertical-align: middle? This only works on inline elements. Hmm

Right now, the *easiest* way to align anything vertically is through this set of code:

That’s no fun. And positioning something relative/absolute can have unintended consequences, especially since you’re just trying to accomplish vertical alignment.

This, in my opinion, is one of the biggest flaws in HTML/CSS development. As a developer in a fairly large team, this issue comes up on almost a daily basis.

Font Size

ems, pt, px, % and none of them are used as a standard. There are pros and cons to each of the approaches. The convention seems to be moving to percentages, but I often see unintended consequences with that as well. For instance, if I create a new class and I want it to be 110% larger than the body font size, I would define it as having a font-size:110%. The issue is, what if the parent container already has a font-size:110%? Then I am actually making the font-size 110% bigger than the parent’s 110% font-size. This gets pretty messy.

I’d like to see a hybrid approach with percentages or predefined font-px. For instance, you might be able to define these in your stylesheet:

And then in your stylesheet, you could define percentages based off of the font-size variables you define. So, for instance, if you have text underneath a header, you want it to be X % smaller than the HEADER_1_FONT_SIZE.

There are more things I will be covering in Part 2 of the blog. Stay tuned!

 

PHP Trick: fputcsv and fgetcsv

We’ve all come across the time where we’ve needed to pull data from a database and dump it to a CSV file for backup or reporting purposes. There are many challenges in doing so: escaping commas, escaping double strings, adding newlines, etc… It seems like I solve this problem many times on my own by using a different delimeter such as a semicolon or tab. However, after using Excel on a Mac for awhile, I began to realize that using an alternate delimeter for a csv file requires a few extra steps to make the data display correctly in Excel.

Then I came across two PHP functions:  fputcsv and fgetcsv.

fputcsv will store an array of strings to a file and automatically handle any additional escaping and newlines.
fgetcsv will do the opposite and GET an array of strings from one line of a csv file.

In my case, I only wanted to output a string to the browser with an attachment header so that it would prompt a download of a csv file. I actually learned a new trick as well:

I can fake a file-pointer by specifying a file location of php://output.

Here is the final output:

OOCSS in action (part 1)

Ever since being introduced to Nicole Sullivan’s OOCSS, I’ve changed the way I develop CSS code. While I do not believe in everything that OOCSS offers, the main takeaway from me is introducing more structure and reason into my code.

Today, a typical developer might develop CSS code in this way:

And the corresponding HTML code:

Strictly speaking…there’s nothing wrong with that code. But the one thing that should stand out is its lack of re-usability. It’s pretty easy to write code specifically to accomplish a task on a page or closely-match a page comp, but OOCSS forces you to think about scalability. That is its greatest strength.

Here is how I might re-write that code in OOCSS

And the HTML code:

OOCSS gives you the concept of gridding for free. A grid can consist of one or more elements that are floated and fit next to one another in defined fragments. For example, I’ve implemented a grid of .size1of2, which allows me to put two elements side-by-side in a reusable fashion site-wide. Pretty cool huh?

I’ll go into more detail about OOCSS in future blog posts and share some tips and tricks I’ve learned along the way. Stay tuned!

Text overflow on input boxes in Responsive Web Design

I came across an issue while developing a responsive website for JSTOR this past week. It appears that if you use a long text string in an input box, Mobile Safari and Blackberry will overflow the text below the input box and beyond to display the full search string. I’m not sure if this is a bug or intentional, but here’s what I did to fix it:

Now you can obviously do this with HTML/CSS by itself, but in my case I added this code conditionally only for mobile viewports/touch screen devices since that’s really where the issue was. If you’re following suit, just wrap the code inside of $(document).ready() with:

. This is just a simple way of *assuming* the users is on a non-desktop environment. There are obviously other ways of detecting it for certain, but I won’t get into that here.

Good luck!

Search for and highlight text on a page with JQuery

Recently, I developed a webpage for an internal website and was asked to come up with an inline-search solution that would help people quickly discover whether a search term existed on a particular page.

My first thought…CONTROL + F…duhhh….but the more I thought about it, the more I realized that many people don’t even know that they can search for text on a webpage via their browser.

So I did some jQuerying.

There are three main parts to this…the web form that the user will use to search for text, the function to find the text under particular elements on a page, and lastly some functionality to highlight the matched terms on the page.

Edit: 05/16/2014:
Fixed a bug in subsequent searches

EDIT: 02/17/2014
There has been a lot of activity on this page and a lot of feedback from users. Thank you so much for reaching out to me and using my script! When I originally wrote this, I broke it down into individual functions so that it could be more easily understood, but I now think that it caused more confusion than anything. Therefore, I re-wrote the script and created a jsFiddle for you to use and play around with. Let me know if you have any other questions!

The HTML Form
By far the easiest part…. here is the HTML code for the form:


The jQuery  (Updated: 02/17/2014)

Next, we have to write the function that will actually go out and highlight the terms.

Step 1: Determine what elements to search within. Do you want to search the entire page? Is there a particular container that your text is in, for efficiencies sake?

The CSS

Next we need to  add some CSS to define what the highlighted class is:

Fiddle

I created a js fiddle that should help you understand the whole picture, debug, etc…
http://jsfiddle.net/z7fjW/485/