Intive Blog

Introduction to unit testing with Jasmine in Frontend

As a member of the Frontend Team, Sebastián Bogado –also Team Leader– created a repository that helps us give our first steps in the testing world. The interesting thing about what Sebastián has done is that when you investigate the different tags, you can go taking in the foundations for Frontend unit testing.

In this regard, I decided to put together a series of articles – starting with this post – related to Frontend unitary testing.

 

Why unitary testing

Tomás Boccardo, on his article about testing in nodejs, tells us the What and the Why of unitary testing. In addition to what is there, we can affirm that developments that have unitary testing are more robust, since, provided it is performed correctly, it guarantees that our code will do what it is supposed to do and not what is not supposed to do.

We will then go in-depth about Frontend unitary testing. Let’s start with the basics, the Jasmine framework, to look into other tools that allow us to test our own code as far as we can.

 

Jasmine

According to its own authors, Jasmine is a BDD framework (Behavior Driven Development), that is to say a development orientated to behavior for JavaScript. It does not depend on any other library and does not require a DOM (HTML).

Briefly, Jasmine provides us with the most basic tools we need to test our code. Among these we highlight:

  • describe (a, b), where “a” is the description of a set of tests and “b” an anonymous function, where all tests will be included (or a reduced set).
  • it(a, b), where “a” is a description of what we are testing and “b” an anonymous function, which include the expectations to be met by the application.
  • expect (a), where “a” is the value to be evaluated by arguments in chain (method chaining). For example: expect (a) .not.toBe (false).

 

Upload the environment

Before we start, we need to have git and npm. Git to clone the repository: https://github.com/Ferticidio/unitTestingFrontend and npm as our dependency manager. With this installed and the cloned repository, we can start checking the tag 0.0.1: git checkout 0.0.1

Besides, we must have added the path ./node_modules/.bin, , to make sure that the different invoked NPM components are from the version installed on the project and not from the ones installed globally. To prevent this, we can replace the calling by its equivalent ./node_modules/.bin/componente.

We run the tests with npm test o jasmine. If we run them, we can see the following:

 

Code to be tested

The only thing we have, so far, is a calculator, a javascript object that defines four functions:

  1. Add.
  2. Substract.
  3. Multiply.
  4. Divide.

What we intend to test is that our calculator performs as it should.

 

The tests

After the calculator, we have the tests:

We have some global functions to be understood. Although they are not complex, I consider it wise to go briefly through each to get what it is about:

  • describe: It is our entry point to the tests. As it was indicated early on, it is used to group tests and to nest them. Thus, for example, in our tests we have a first describe that groups all the tests, the one that begins with: describe describe(“Calc test suite:”,… and then we have another internal describe that groups the tests related to the multiplication , the one that reads: describe(“Mulitply: “, …).
  • it: It helps us enumerate the different tests we perform. It is logical that in the most basic tests for our calculator we have 4 “its”, one for each operation. Something like it(“Must add 2 numbers”… it(“Must deduce 2 numbers”… it(“Must multiply 2 numbers”… it(“Must divide 2 numbers”… they are the ones saying what we are testing should do.
  • expect: It is useful to get the result achieved and apply different matchers to it to verify what we are expecting.

Matchers are not complex at all:

    • expect(x).toEqual(y);
    • expect(x).toBeDefined();
    • expect(x).toBeUndefined();
    • expect(x).toBeNull();
    • expect(x).toBeTruthy();
    • expect(x).toBeFalsy();
    • expect(x).toContain(y);
    • expect(x).toBeLessThan(y);
    • expect(x).toBeGreaterThan(y);
    • expect(x).toMatch(pattern);
    • expect(x).toBe(y);

 

Conclusion

By means of this introduction to unitary testing with Jasmine we have a new tool to test our functions and javascript objects.

Very soon, we will be getting into something closer to reality: we will separate the codes of tests and we will add HTML. Plus, even more interesting … we will be adding testing to a browser with karma. Stay tuned!

Fernando Lescano

He is one of our Tech Leaders and has been a developer at intive – FDV since March 2015. In the company, he works with technologies like Javascript ( NodeJS, AngularJS, MongoDB, Jquery, etc.), Python (Django), Java and PHP. He also takes part in the Frontend Team. He defines himself as “passionate about software development, but with many other interests”. Since December 2015 he has managed the development and maintenance of Java and of new JavaScript components (AngularJS). He is received a degree as a University Technician with a focus on software development and information technology from the Universidad Provincial de Ezeiza.

Add comment