In part one of this series of blogs you set up the configurations needed to start testing your Oracle JET application.
Grab the project you made, now it is time to actually do the testing.
Have something to test.
Our application is not really doing anything now, so let’s add a calculator to the dashboard page that does some operation on two numbers.
For the dashboard.html we will add to inputTexts and an outputText which will be the answer box.
<div>
<p>First number <input id="inputnumber-id"
data-bind="ojComponent: {component: 'ojInputText',
value:firstNumber}"/>
</input>
</p>
<p>Second number <input id="inputnumber-id"
data-bind="ojComponent: {component: 'ojInputText',
value:secondNumber}"/>
</input>
</p>
<p>Answer <span data-bind="text: answer"></span> </p>
</div>
We add the logic to the dashboard.js
Don’t forget to import the ojinputtext in the define block. Also, since we are using inputtext and not inputnumber (I don’t like the buttons) the input will be in stringformat. Therefore we need to parse the input to floats.
self.firstNumber = ko.observable();
self.secondNumber = ko.observable();
self.answer = ko.pureComputed(function(){
return this.addNumbers(this.firstNumber(),this.secondNumber()) * 100;
},this)
self.addNumbers= function(paramOne, paramTwo){
//parse the string numbers to floats.
return parseFloat(paramOne) + parseFloat(paramTwo);
}
You should now see something like the following when you serve your application:
If you now run karma, you can see that the code added is not covered.
Make the tests
Make a new file in your testfolder named dashboardSpec.js. (In the main-test.js there is a regular expression stating all files ending with Spec.js are testfiles).
Here we create a define block where we import the DashboardViewModel and we describe and make the tests.
define(['viewModels/dashboard'], function (DashBoardViewModel) {
describe('The dashboard page', function () {
describe('The addNumbers function', function () {
it('should add two numbers', function () {
});
});
describe('The answer function', function () {
it('should return the correct answer', function () {
});
});
});
Plain function
The first test is not that hard. We need to test the addNumbers function. Since we are using the textinput component of Oracle JET I would also like to test if two stringnumbers added up are added up properly. Of course more tests could be added like what happens if we input a character instead of a number. But I will leave this as an exercise to the reader ;).
it('should add two numbers', function () {
expect(DashBoardViewModel.addNumbers(1, 2)).toBe(3);
expect(DashBoardViewModel.addNumbers(1.5, 1.1)).toBe(2.6);
expect(DashBoardViewModel.addNumbers('1', '2')).toBe(3);
});
The computed function
The computed function is done almost the same expect this one relies on the two observables in the viewModel. We can test this by simply calling the observables with a number, which then triggers the pureComputed function.
describe('The answer function', function () {
it('should return the correct answer', function () {
DashBoardViewModel.firstNumber(1);
DashBoardViewModel.secondNumber(2);
expect(DashBoardViewModel.answer()).toBe(300);
//trigger with new firstNumber
DashBoardViewModel.firstNumber('10');
expect(DashBoardViewModel.answer()).toBe(1200);
//trigger
DashBoardViewModel.secondNumber('20');
expect(DashBoardViewModel.answer()).toBe(3000);
});
});
And that’s it, if you run karma you should have passing tests and a higher coverage. As you may notice, karma testing Oracle JET is similar to karma testing knockout code.
The code mentioned in this blog can be found on my Github Account, which also includes te code from Part 1
Resources:
https://kylehodgson.com/2012/11/29/knockoutjs-and-testing/
http://www.breck-mckye.com/blog/2015/02/testing-knockout-dot-js-web-applications/
