What is QUnit?
A flexible and user-friendly JavaScript unit testing framework is called QUnit. It is frequently used for testing JavaScript code and was first created by the jQuery team. JavaScript is used to develop SAP UI5 apps, where QUnit is very helpful.
Why unit test in SAP?
SAP unit testing guarantees the dependability and maintainability of your code. It facilitates the early discovery of bugs in the development process, which makes it simpler to address issues before they develop. Building unit tests enables you to:
Check to see if your code functions properly.Modify your code with security.Record the way you want your code to behave.
Configuring QUnit in SAP:
You must include QUnit in your project before you can begin using it for unit testing in SAP. You can do this by installing the QUnit library and configuring a test runner in your project. Here’s a how-to manual to get you going:
Step 1: Include QUnit Library
First, include the QUnit library in your SAP UI5 application. You can do this by adding the following script tags to your HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>My SAP UI5 Application</title>
<script src=”https://code.jquery.com/qunit/qunit-2.14.0.js”></script>
<link rel=”stylesheet” href=”https://code.jquery.com/qunit/qunit-2.14.0.css”>
</head>
<body>
<div id=”qunit”></div>
<div id=”qunit-fixture”></div>
</body>
</html>
Step 2: Create a Test File
Next, create a JavaScript file for your tests. This file will contain the unit tests for your application. Let’s create a file named tests.js and add the following code:
QUnit.module(“Example Module”);
QUnit.test(“Simple test”, function(assert) {
var result = add(2, 3);
assert.equal(result, 5, “The add function should return 5 when adding 2 and 3”);
});
In this example, we’re defining a module named “Example Module” and a test named “Simple test”. The test checks if the add function correctly adds two numbers.
Step 3: Write the Function to be Tested
Now, let’s create the add function that we want to test. Add the following code to your main JavaScript file:
function add(a, b) {
return a + b;
}
Step 4: Run the Tests
To run the tests, simply open the HTML file in your browser. You should see the QUnit test runner, and it should display the results of your tests. If everything is set up correctly, you should see that the test passes.
A More Complex Example Of SAP UI5:
Let’s create a more complex example to demonstrate the power of QUnit. We’ll write a function that checks all the functionality in the Calculator.
My Github Project Link: https://github.com/PatelKurvesh/calculator_Qunit
Step 1: Create SAP Fiori Application.
Reference link do 7 Steps:- Click here
Step 2: Edit View/View1.view.xml
<mvc:View controllerName=”calculator.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”
xmlns:form=”sap.ui.layout.form”>
<Page id=”page” title=”{i18n>title}”>
<content>
<form:SimpleForm
editable=”true”
layout=”ResponsiveGridLayout”
title=”calculator”
>
<Label text=”number 1 ” />
<Input
type=”Number”
width=”200px”
id=”num1″
/>
<Label text=”number 2 ” />
<Input
type=”Number”
width=”200px”
id=”num2″
/>
<Button
text=”Sum”
id=”sum”
press=”onSum”
/>
<Button
text=”Sub”
id=”sub”
press=”onSub”
/>
<Button
text=”Mul”
id=”mul”
press=”onMul”
/>
<Button
text=”Div”
id=”div”
press=”onDiv”
/>
<Label
text=”Ans “
id=”ans”
/>
<Input
type=”Number”
id=”ans_inp”
/>
<Button
type=”Reject”
text=”Clear”
id=”clear”
press=”onClear”
/>
</form:SimpleForm>
</content>
</Page>
</mvc:View>
Step 3: Edit Controller/View1.controller.js
sap.ui.define([
“sap/ui/core/mvc/Controller”
],
function (Controller) {
“use strict”;
var num1, num2;
return Controller.extend(“calculator.controller.View1”, {
onInit: function () {
},
getValue:function(){
num1 = parseInt(this.getView().byId(“num1”).getValue())
num2 = parseInt(this.getView().byId(“num2”).getValue())
return;
},
onSum:function(){
this.getValue();
var sum = num1 + num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onSub:function(){
this.getValue();
var sum = num1-num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onMul:function(){
this.getValue();
var sum = num1*num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onDiv:function(){
this.getValue();
var sum = num1/num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onClear: function(){
num1 = this.getView().byId(“num1”).setValue(“”)
num2 = this.getView().byId(“num2”).setValue(“”)
this.ans_inp = this.getView().byId(“ans_inp”).setValue(“”)
}
});
});
Step 4: Edit test/unit/controller/View1.controller.js
sap.ui.define([
“calculator/controller/View1.controller”,
“sap/ui/core/mvc/View”,
“sap/ui/core/mvc/XMLView”,
“sap/ui/core/ComponentContainer”,
“sap/ui/thirdparty/sinon”,
“sap/ui/thirdparty/sinon-qunit”
], function (View1Controller, View, XMLView, ComponentContainer) {
“use strict”;
QUnit.module(“View1 Controller Tests”, {
beforeEach: function (assert) {
var done = assert.async();
// Mock view creation
XMLView.create({
viewName: “calculator.view.View1”
}).then(function (oView) {
this.oView = oView;
this.oController = this.oView.getController();
this.oView.placeAt(“qunit-fixture”);
sap.ui.getCore().applyChanges();
done();
}.bind(this));
},
afterEach: function () {
this.oView.destroy();
}
});
QUnit.test(“Test onSum function”, function (assert) {
this.oView.byId(“num1”).setValue(“2”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onSum();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “5”, “Sum function works correctly”);
});
QUnit.test(“Test onSub function”, function (assert) {
this.oView.byId(“num1”).setValue(“5”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onSub();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “2”, “Subtraction function works correctly”);
});
QUnit.test(“Test onMul function”, function (assert) {
this.oView.byId(“num1”).setValue(“2”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onMul();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “6”, “Multiplication function works correctly”);
});
QUnit.test(“Test onDiv function”, function (assert) {
this.oView.byId(“num1”).setValue(“6”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onDiv();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “2”, “Division function works correctly”);
});
QUnit.test(“Test onClear function”, function (assert) {
this.oView.byId(“num1”).setValue(“2”);
this.oView.byId(“num2”).setValue(“3”);
this.oView.byId(“ans_inp”).setValue(“5”);
this.oController.onClear();
assert.strictEqual(this.oView.byId(“num1”).getValue(), “”, “Clear function works correctly on num1”);
assert.strictEqual(this.oView.byId(“num2”).getValue(), “”, “Clear function works correctly on num2”);
assert.strictEqual(this.oView.byId(“ans_inp”).getValue(), “”, “Clear function works correctly on ans_inp”);
});
});
Step 5: Create, if not available, test/unit/AllTests.js
sap.ui.define([
“calculator/test/unit/controller/View1.controller”
], function () {
“use strict”;
});
Step 6: Create, if not available, test/unit/unitTests.qunit.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Unit tests for calculator</title>
<script
id=”sap-ui-bootstrap”
src=”../../resources/sap-ui-core.js”
data-sap-ui-resourceroots='{
“calculator”: “../../”,
“unit”: “.”
}’
data-sap-ui-async=”true”
data-sap-ui-oninit=”module:unit/unitTests.qunit”>
</script>
<link rel=”stylesheet” type=”text/css” href=”../../resources/sap/ui/thirdparty/qunit-2.css”>
<script src=”../../resources/sap/ui/thirdparty/qunit-2.js”></script>
<script src=”../../resources/sap/ui/qunit/qunit-junit.js”></script>
<script src=”../../resources/sap/ui/qunit/qunit-coverage.js”></script>
<script src=”../../resources/sap/ui/thirdparty/sinon.js”></script>
<script src=”../../resources/sap/ui/thirdparty/sinon-qunit.js”></script>
</head>
<body>
<div id=”qunit”></div>
<div id=”qunit-fixture”></div>
</body>
</html>
Step 7: How to Run:
Right-click on your project and click Preview Application
For Fiori View, select Start Fiori Run.
For a unit test, select unit tests.
fiori Preview.
unit-test preview.
In summary:
Using QUnit for unit testing in SAP is quite easy and has several advantages. It facilitates the maintenance and refactoring of your program and helps guarantee that your code functions correctly. You should now be well-versed in configuring and utilizing QUnit for unit testing in your SAP UI5 applications after reading this tutorial. Cheers to your testing!
What is QUnit?A flexible and user-friendly JavaScript unit testing framework is called QUnit. It is frequently used for testing JavaScript code and was first created by the jQuery team. JavaScript is used to develop SAP UI5 apps, where QUnit is very helpful.Why unit test in SAP?SAP unit testing guarantees the dependability and maintainability of your code. It facilitates the early discovery of bugs in the development process, which makes it simpler to address issues before they develop. Building unit tests enables you to:Check to see if your code functions properly.Modify your code with security.Record the way you want your code to behave.Configuring QUnit in SAP:You must include QUnit in your project before you can begin using it for unit testing in SAP. You can do this by installing the QUnit library and configuring a test runner in your project. Here’s a how-to manual to get you going:Step 1: Include QUnit LibraryFirst, include the QUnit library in your SAP UI5 application. You can do this by adding the following script tags to your HTML file: <!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>My SAP UI5 Application</title>
<script src=”https://code.jquery.com/qunit/qunit-2.14.0.js”></script>
<link rel=”stylesheet” href=”https://code.jquery.com/qunit/qunit-2.14.0.css”>
</head>
<body>
<div id=”qunit”></div>
<div id=”qunit-fixture”></div>
</body>
</html> Step 2: Create a Test FileNext, create a JavaScript file for your tests. This file will contain the unit tests for your application. Let’s create a file named tests.js and add the following code: QUnit.module(“Example Module”);
QUnit.test(“Simple test”, function(assert) {
var result = add(2, 3);
assert.equal(result, 5, “The add function should return 5 when adding 2 and 3”);
}); In this example, we’re defining a module named “Example Module” and a test named “Simple test”. The test checks if the add function correctly adds two numbers.Step 3: Write the Function to be TestedNow, let’s create the add function that we want to test. Add the following code to your main JavaScript file: function add(a, b) {
return a + b;
} Step 4: Run the TestsTo run the tests, simply open the HTML file in your browser. You should see the QUnit test runner, and it should display the results of your tests. If everything is set up correctly, you should see that the test passes.A More Complex Example Of SAP UI5:Let’s create a more complex example to demonstrate the power of QUnit. We’ll write a function that checks all the functionality in the Calculator.My Github Project Link: https://github.com/PatelKurvesh/calculator_QunitStep 1: Create SAP Fiori Application.Reference link do 7 Steps:- Click hereStep 2: Edit View/View1.view.xml <mvc:View controllerName=”calculator.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”
xmlns:form=”sap.ui.layout.form”>
<Page id=”page” title=”{i18n>title}”>
<content>
<form:SimpleForm
editable=”true”
layout=”ResponsiveGridLayout”
title=”calculator”
>
<Label text=”number 1 ” />
<Input
type=”Number”
width=”200px”
id=”num1″
/>
<Label text=”number 2 ” />
<Input
type=”Number”
width=”200px”
id=”num2″
/>
<Button
text=”Sum”
id=”sum”
press=”onSum”
/>
<Button
text=”Sub”
id=”sub”
press=”onSub”
/>
<Button
text=”Mul”
id=”mul”
press=”onMul”
/>
<Button
text=”Div”
id=”div”
press=”onDiv”
/>
<Label
text=”Ans “
id=”ans”
/>
<Input
type=”Number”
id=”ans_inp”
/>
<Button
type=”Reject”
text=”Clear”
id=”clear”
press=”onClear”
/>
</form:SimpleForm>
</content>
</Page>
</mvc:View> Step 3: Edit Controller/View1.controller.js sap.ui.define([
“sap/ui/core/mvc/Controller”
],
function (Controller) {
“use strict”;
var num1, num2;
return Controller.extend(“calculator.controller.View1”, {
onInit: function () {
},
getValue:function(){
num1 = parseInt(this.getView().byId(“num1”).getValue())
num2 = parseInt(this.getView().byId(“num2”).getValue())
return;
},
onSum:function(){
this.getValue();
var sum = num1 + num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onSub:function(){
this.getValue();
var sum = num1-num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onMul:function(){
this.getValue();
var sum = num1*num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onDiv:function(){
this.getValue();
var sum = num1/num2
var ans = this.getView().byId(“ans_inp”).setValue(sum)
},
onClear: function(){
num1 = this.getView().byId(“num1”).setValue(“”)
num2 = this.getView().byId(“num2”).setValue(“”)
this.ans_inp = this.getView().byId(“ans_inp”).setValue(“”)
}
});
}); Step 4: Edit test/unit/controller/View1.controller.js sap.ui.define([
“calculator/controller/View1.controller”,
“sap/ui/core/mvc/View”,
“sap/ui/core/mvc/XMLView”,
“sap/ui/core/ComponentContainer”,
“sap/ui/thirdparty/sinon”,
“sap/ui/thirdparty/sinon-qunit”
], function (View1Controller, View, XMLView, ComponentContainer) {
“use strict”;
QUnit.module(“View1 Controller Tests”, {
beforeEach: function (assert) {
var done = assert.async();
// Mock view creation
XMLView.create({
viewName: “calculator.view.View1”
}).then(function (oView) {
this.oView = oView;
this.oController = this.oView.getController();
this.oView.placeAt(“qunit-fixture”);
sap.ui.getCore().applyChanges();
done();
}.bind(this));
},
afterEach: function () {
this.oView.destroy();
}
});
QUnit.test(“Test onSum function”, function (assert) {
this.oView.byId(“num1”).setValue(“2”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onSum();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “5”, “Sum function works correctly”);
});
QUnit.test(“Test onSub function”, function (assert) {
this.oView.byId(“num1”).setValue(“5”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onSub();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “2”, “Subtraction function works correctly”);
});
QUnit.test(“Test onMul function”, function (assert) {
this.oView.byId(“num1”).setValue(“2”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onMul();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “6”, “Multiplication function works correctly”);
});
QUnit.test(“Test onDiv function”, function (assert) {
this.oView.byId(“num1”).setValue(“6”);
this.oView.byId(“num2”).setValue(“3”);
this.oController.onDiv();
var result = this.oView.byId(“ans_inp”).getValue();
assert.strictEqual(result, “2”, “Division function works correctly”);
});
QUnit.test(“Test onClear function”, function (assert) {
this.oView.byId(“num1”).setValue(“2”);
this.oView.byId(“num2”).setValue(“3”);
this.oView.byId(“ans_inp”).setValue(“5”);
this.oController.onClear();
assert.strictEqual(this.oView.byId(“num1”).getValue(), “”, “Clear function works correctly on num1”);
assert.strictEqual(this.oView.byId(“num2”).getValue(), “”, “Clear function works correctly on num2”);
assert.strictEqual(this.oView.byId(“ans_inp”).getValue(), “”, “Clear function works correctly on ans_inp”);
});
}); Step 5: Create, if not available, test/unit/AllTests.js sap.ui.define([
“calculator/test/unit/controller/View1.controller”
], function () {
“use strict”;
}); Step 6: Create, if not available, test/unit/unitTests.qunit.html <!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Unit tests for calculator</title>
<script
id=”sap-ui-bootstrap”
src=”../../resources/sap-ui-core.js”
data-sap-ui-resourceroots='{
“calculator”: “../../”,
“unit”: “.”
}’
data-sap-ui-async=”true”
data-sap-ui-oninit=”module:unit/unitTests.qunit”>
</script>
<link rel=”stylesheet” type=”text/css” href=”../../resources/sap/ui/thirdparty/qunit-2.css”>
<script src=”../../resources/sap/ui/thirdparty/qunit-2.js”></script>
<script src=”../../resources/sap/ui/qunit/qunit-junit.js”></script>
<script src=”../../resources/sap/ui/qunit/qunit-coverage.js”></script>
<script src=”../../resources/sap/ui/thirdparty/sinon.js”></script>
<script src=”../../resources/sap/ui/thirdparty/sinon-qunit.js”></script>
</head>
<body>
<div id=”qunit”></div>
<div id=”qunit-fixture”></div>
</body>
</html> Step 7: How to Run:Right-click on your project and click Preview ApplicationFor Fiori View, select Start Fiori Run.For a unit test, select unit tests.fiori Preview.unit-test preview.In summary:Using QUnit for unit testing in SAP is quite easy and has several advantages. It facilitates the maintenance and refactoring of your program and helps guarantee that your code functions correctly. You should now be well-versed in configuring and utilizing QUnit for unit testing in your SAP UI5 applications after reading this tutorial. Cheers to your testing! Read More Technology Blogs by Members articles
#SAP
#SAPTechnologyblog
+ There are no comments
Add yours