DEV Community

Cover image for Introduction to Zombie.JS
Vincent Tong
Vincent Tong

Posted on

Introduction to Zombie.JS

Before we talk about zombies, let's talk about skeletons. In particular, the skeleton we will discuss is named DOM.

skeleton dance

What is the DOM?
DOM stands for Document Object Model. It is the basis for how a browser represents a webpage. The DOM is technically a type of API (application programming interface) that is inside of your browser.

An easy way to break it down is as so:

  • Document = file
    Can be any type of file. In most cases, when we refer to the DOM we are referring to our html file.

  • Object = tags/elements
    Consists of anything you put inside of the file.
    In the context of an html file, this would be the body, html, head, body tags.

DOM model

  • Model = layout structure Now that we have all of our elements and tags added to the html, the way we organize those pieces will define our the skeleton of our page!

zombie coder
Enough about skeletons, I know you're only here for the zombies.

Firstly, I would like to introduce you to Assaf Arkin, the developer for zombie.js

Assaf profile pic
https://github.com/assaf/zombie
http://twitter.com/@assaf

If I had to breakdown what zombie.js does in a single sentence I would say that it is a lightweight simulated browser environment typically geared towards efficiently running tests.

What do I mean when I say simulated? Unfortunately, I don't mean to say that Assaf created his own version of the Matrix. However, the functionality of this tool is quite interesting due to the fact that it allows you to test components of your application without ever actually having to open a web browser. Instead, it will let you know if you have any errors in the comfort of your own console.

"If you're going to write an insanely fast, headless browser, how can you not call it Zombie" -Assaf Arkin

In-depth description:

Automated tests can be split into two types: Unit Tests and Integration Tests

Unit tests are tests in which you are only looking at a specific component of your application, like a specific object for example. These are typically used to ensure that they react the way you wanted them to as to not interfere with the functionality of other subsets of your application. Because these tests are on smaller components, their load times are usually not a cause for concern.

Integration Tests are used when you collectively want to see if all your individual components are operating as expected. Because of the complexity of testing these components can scale quite largely, this is where zombie.js comes in handy.

zombie.js allows you to run tests without actually having to open a web browser. Rather, it creates it's own simulated browser and because the HTML pages no longer need to be displayed, it cuts and saves you time from having to render those pages.

zombie.js snippet

The image above is just a small list of actual browser features that zombie.js can imitate. It can simulate anything from new tabs to looking up/deleting cookies.

To SUMMARIZE:
In the software development industry, testing is an integral part in creating any application. The user can utilize zombie.js to create any set of tests that run in a browser-like object and because that browser-object never has to actually render any HTML, the tests will run much faster than they would use any other browser out there. Any changes to your code, whether large or small, will benefit you greatly by running the tests for it through zombie.js.

Top comments (0)