Workflow

Testing

Unit testing JavaScript with Jasmine

Daniel Verner -

Hmm, JavaScript…it is that messy code that runs in the browser and contains a lot of $() function calls, right? NO. At least it shouldn’t be. JavaScript is a full-featured language and all good development practices can be and should be used in JavaScript development including but not limited to object-oriented architecture, design patterns, and automated tests (unit tests, integration tests).

In this article, I’m going to show how to set up Jasmine for unit testing in JavaScript. To be more precise Jasmine is a behavior-driven development framework, not test-driven development, but the essentials and the goal are the same: the more tests you have for your code the better.

Installation
Let’s see how to install and configure Jasmine:
Install with npm:
npm install --save-dev jasmine
Initialize:
node node_modules/jasmine/bin/jasmine init
Set jasmine as your test script in your package.json:
"scripts": { "test": "jasmine" }
Use npm to run the tests:
npm test
If you’d prefer to see the test results in the browser you can install the standalone version of the Jasmine, find the releases page here: https://github.com/jasmine/jasmine/releases.
Download the package, unzip, and add the following to the specs.html:
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-{#.#.#}/jasmine_favicon.png"
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-{#.#.#}/jasmine.css"> 
<script type="text/javascript" src="jasmine/lib/jasmine-{#.#.#}/jasmine.js"></script> 
<script type="text/javascript" src="jasmine/lib/jasmine-{#.#.#}/jasmine-html.js"></script> 
<script type="text/javascript" src="jasmine/lib/jasmine-{#.#.#}/boot.js"></script>
Writing the first test
Our first example test looks like this:
describe("Basic suite", function() {
   it("ensures jasmine is working", function() {
       expect(true).toBe(true);
   });
});
It seems like it doesn’t test anything, but if it runs successfully, it means you’ve configured Jasmine correctly. We can see three main parts of the above test:

  • The describe function groups related test cases into test suites.
  • The it function represents a test case. The description should describe the desired behavior of the functionality to be tested.
  • The expected function contains the assertions for the test.
You can find more examples and detailed explanation on the Jasmine tutorials page here: https://jasmine.github.io/tutorials/your_first_suite

Quite easy, isn’t it? You might think writing tests is boring, time-consuming, and even not necessary. The deadlines are always tight, who has time to write tests? Yes, that is true, but having tests allows you to confidently make changes/refactor your code without breaking the existing functionality, and this can save you a lot of debugging time later.

In the upcoming blog posts, I’ll show some tips and tricks about mocking input data for unit tests (especially for a built-in objects like DateTime or geolocation).

Agree? Disagree? Please let me know in the comments section below.

Tags: bdd · jasmin · testing

Want products news and updates?

Sign up for our newsletter to stay up to date.

We care about the protection of your data. Read our Privacy Policy.

Internship

Junior Developer Internship at 42coders

Update: Thank you all for taking the time to apply for the position. The position is now closed. For other jobs, updates visit our Jobs page. Starting

Dara Žižić

Laravel · Internship · Coding

Laravel

Laravel fire obeserver on pivot relations

While I was working on cleanup of the backend controller, and moving some of the logic from controller to observer, I found myself in a situation where

Max Hutschenreiter

Laravel · firing event · Observer · Pivot

Testing

How to use reflection to test private and protected methods

Developing application with TDD methodology we tend to achieve the highest possible code coverage, including private and protected methods as well. But writing unit test

Daniel Verner

testing · PHP · phpUnit · reflection

Impressions from our Team

  • Happy birthday 🎁🎈🎂 Filip - #

  • Another day another #mandarinacakeshop 🎂 😀 - #

  • Happy Birthday Ognjen! And marry Christmas to all other 🎄#notacakeshop - #

  • #Office #Garden - #

  • #workhard - #

  • #belgrade #skyline - #

  • #happybirthday Phil :) - #

  • #happybirthday Stefan 🥂 - #

  • #happybirthday Lidija 🍾 - #

  • Say hi 👋 to our newest team member ☕️ - #

  • #bithday #cake 😻 - #

  • #stayathome #homeoffice #42coders - #

  • #stayathome #homeoffice #42coders #starwars :) - #

  • #stayathome #homeoffice #42coders - #

  • We had a really nice time with #laracononline #laravel - #

  • Happy Birthday 🎂 Miloš - #

  • Happy Birthday 🎂Nikola - #

  • #42coders #christmas #dinner what a nice evening :) - #

  • Happy Birthday 🎂 Ognjen - #

  • Wish you all a merry Christmas 🎄🎁 - #

See more!
Company name

Schopenhauerstr. 71
80807 München
max@42coders.com
+49 (0)176 / 724 306 82

Facebook Instagram Twitter GitHub Joberty

Navigation

Our Products

Open Source

© 2024 42coders All rights reserved.