$29
For today’s lab we will be working with Jasmine, a JavaScript framework for testing your code. The scope of today’s lab is fairly small and the code we will be testing rather simple, but this will hopefully provide you with a basic understanding for how you can test your own JavaScript code in future web projects. If you want to learn more, head over to the Jasmine Documentation.
Starter Files
You have been provided a zip folder (Jasmine Setup.zip) which contains:
Jasmine Setup/
-lib/ (Jasmine Source Code – Don’t Modify)
-spec/
-CalculatorSpec.js (Contains our Test Cases)
-src/
-calculator.html (Website)
-Calculator.js
-SpecRunner.html (Used to view & run test cases)
Quick Instructions
For this lab you will need to complete the JavaScript code to handle the math operations in Calculator.js and test the methods you created in CalculatorSpec.js.
1. Modify the Calculator object in Calculator.js to include a sub(), multiply(), and divide() method.
2. Create two test cases for sub(), multiply(), and divide() in CalculatorSpec.js.
Prototyping Methods in Javascript
function Calculator() {//Calculator Object
}
Calculator.prototype.add = function(value1, value2) {//Attach a function to our Calculator return value1 + value2;
};
In order for Jasmine to test our code, we need to work with Javascript Objects. In the above example, we are using the prototype property to add additional methods to our Calculator Class. In this way we can add methods for each of our math operations.
To access/use the method we created, we’ll need to create a Calculator object:
var calc = new Calculator();//Line 14
With the calc object, we can now access the add method:
total = calc.add(total,value2);//Line 22
From this example, you’ll now need to attach a method for subtraction, sub(), multiplication, multiply(), and division, divide().
For more information on Javascript Objects :
https://www.w3schools.com/js/js_object_definition.asp
For more information on Javascript Prototype Property:
https://www.w3schools.com/js/js_object_prototypes.asp
Creating Test Cases in Jasmine
In order to test our add method, we need to create a spec file (a javascript file within our spec folder). The spec file we will be working with is called CalculatorSpec.js which is located inside the spec folder.
Inside CalculatorSpec.js you will find a completed Test Suite and a Test Case for testing the add() function.
describe("Test add() method", function() {
The describe key word
var calc;
defines a test suite. In
//This will be called before running each spec
Jasmine a test suite is a way to
organize a series of test cases
beforeEach(function() {
together. The String we pass
will name the Test Suite.
calc = new Calculator(); //Create a calculator object
});
beforeEach() will run before
/*
each of our test cases. We will
* Example Test Case for Addition Operation
use it to create a new/fresh
Calculator object to test in
*/
each test case.
it("Check addition, two positive values", function() {
expect( calc.add(1,2) ).toEqual(3);
});
The it key word defines a test
it("Check addition, two negative values", function() {
case. The String passed will
name the Test Case.
expect( calc.add(-7,-5) ).toEqual(-12);
Inside the test case, we have
});
an assertion created with the
});
expect keyword. Here we
have the simplest assertion we
can with work which simply
verifies that two values are
From this example, you’ll need to create a new Test Suite for
equal. He we test to ensure
that 1 + 2 = 3, using the add()
each of the remaining math functions. Inside each Test Suite
function.
you’ll need to create two test cases to test the math function.
Run Test Cases
To run your test cases, all you need to do is open the SpecRunner.html file. SpecRunner will run your test cases and inform you which ones have passed or failed.
Submission
For this lab you will need to submit a Zipped folder of your completed Jasmine Setup. When viewed, your SpecRunner.html file should show 8 test cases in total, that all pass!