JavaScript unit testing with Jasmine – LibreScript

For this tutorial, we first need to install the latest version of Jasmine. We will use Jasmine 3.4 as a standalone version

Download the latest version of Jasmine from https://jasmine.github.io and unpack the file in your workspace

Alternatively, you can install Jasmine from the command line:

#Global installation
npm install -g jasmine

#Local installation:
npm install –save-dev jasmine

After installation, you have the following file structure in your workspace:

/lib
/spec
/src
SpecRunner.html

The /spec directory will host all your tests and /src will host your JavaScript code. Open SpecRunner.html to see which tests passed and which failed

In Jasmine tests are summarized to suites. A Jasmine suite consists of several tests or specifications and is included in the describe() function. The describe () function has the following signature: describe (‘name or title’, function callback ())

describe(“Test Suite”, () => {

})

Specs are tests that are implemented in the it () function. The it () function has the following signature: it (‘name or title’, function callback ())

In the next section, we will implement some of the most commonly used tests during unit testing with Jasmine. Keep in mind that tests, also known as specs, are executed in the it () function

In our first Jasmine suite, we want to test whether a function named “orderTotal” meets the following requirements:

a. If orderTotal is of type function
b. Returns the aggregate of the prices of all products in the order
c. If productDescriptions is of type function
d. All products have a string product which is not empty

//ShoppingCart.js
const shoppingCart = {
	items: [
		{product: 'Lego Set Classic', price: 9.99},
		{product: 'Barbie Doll', price: 5.50},
		{product: 'Stuffed Panda Bear', price: 7.90},
		{product: 'Fidget Spinner', price: 4.30}
	]
}

const orderTotal = order => order.items
 .reduce((prev,cur) => prev + cur.price, 0)
 
const productDescriptions = order => order.items
.map(order => order.product)

//ShoppingCart.js

const shoppingCart = {

items: [

{product: 'Lego Set Classic', price: 9.99},

{product: 'Barbie Doll', price: 5.50},

{product: 'Stuffed Panda Bear', price: 7.90},

{product: 'Fidget Spinner', price: 4.30}

]

}

const orderTotal = order => order.items

.reduce((prev,cur) => prev + cur.price, 0)

const productDescriptions = order => order.items

.map(order => order.product)

//ShoppingCartSpec.js
describe('shoppingCart Suite', () => {

    it('orderTotal must be a function', () => {
        expect(typeof orderTotal).toEqual('function')
    });

    it('productDescriptions must be a function', () => {
        expect(typeof productDescriptions).toEqual('function')
    });

    it('Total is calculated by adding up all items prices', () => {
        expect(orderTotal(shoppingCart)).toBe(27.69)
    })

    it('Every products should have a description', () => {

        let arr = productDescriptions(shoppingCart)

        for (var i = 0; i < arr.length; i++) {
            expect(arr[i]).not.toBe('')
        }

    })

})

//ShoppingCartSpec.js

describe('shoppingCart Suite', () => {

it('orderTotal must be a function', () => {

expect(typeof orderTotal).toEqual('function')

});

it('productDescriptions must be a function', () => {

expect(typeof productDescriptions).toEqual('function')

});

it('Total is calculated by adding up all items prices', () => {

expect(orderTotal(shoppingCart)).toBe(27.69)

})

it('Every products should have a description', () => {

let arr = productDescriptions(shoppingCart)

for (var i = 0; i < arr.length; i++) {

expect(arr[i]).not.toBe('')

}

})

SpecRunner.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v3.4.0</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-3.4.0/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-3.4.0/jasmine.css">

  <script src="lib/jasmine-3.4.0/jasmine.js"></script>
  <script src="lib/jasmine-3.4.0/jasmine-html.js"></script>
  <script src="lib/jasmine-3.4.0/boot.js"></script>

  <!-- include source files here... -->
  <script src="src/ShoppingCart.js"></script>
  
  <!-- include spec files here... -->
  <script src="spec/ShoppingCartSpec.js"></script>

</head>

<body>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Jasmine Spec Runner v3.4.0</title>

</head>

<body>

</body>

</html>

Leave a Reply Cancel Reply