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″
/>

</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”);
});

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″
/>

</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)
},

});
}); 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();

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

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

This dev is NOT missing out on DevFest!

Angular v19 is here!

Full Keynote: Satya Nadella at Microsoft Ignite 2024

Keynote in 90 Seconds: Satya Nadella at Microsoft Ignite 2024

Unit Testing in SAP with QUnit

What is QUnit?

Why unit test in SAP?

Configuring QUnit in SAP:

Step 1: Include QUnit Library

Step 2: Create a Test File

Step 3: Write the Function to be Tested

Step 4: Run the Tests

A More Complex Example Of SAP UI5:

Step 1: Create SAP Fiori Application.

Step 2: Edit View/View1.view.xml

Step 3: Edit Controller/View1.controller.js

Step 4: Edit test/unit/controller/View1.controller.js

Step 5: Create, if not available, test/unit/AllTests.js

Step 6: Create, if not available, test/unit/unitTests.qunit.html

Step 7: How to Run:

fiori Preview.

unit-test preview.

More From Author

This dev is NOT missing out on DevFest!

6 Questions CIOs Should Ask About Generative AI

AI for Developers: Strategizing Your Future

+ There are no comments

Cancel reply

Switch Framework-SAP

How to Deploy a Web App – Step-by-Step Tutorial

You May Also Like:

This dev is NOT missing out on DevFest!

6 Questions CIOs Should Ask About Generative AI

AI for Developers: Strategizing Your Future

Photo Report & Full Results from Backyard Battle 2024 – Stop 5: Adolf Silva’s Loco Camp Edition

First Look: Whyte’s Full-Power Elyte EVO Boasts Lower Center of Gravity

Field Test Review: 2024 Ibis Ripmo – The Revised Classic

Review: Specialized Control Alloy 350 6B XC Wheels

Video: First Hits of Hard MTB League | Mitch’N Out Season 3 Ep. 3

Top Tagged

What is QUnit?

Why unit test in SAP?

Configuring QUnit in SAP:

Step 1: Include QUnit Library

Step 2: Create a Test File

Step 3: Write the Function to be Tested

Step 4: Run the Tests

A More Complex Example Of SAP UI5:

Step 1: Create SAP Fiori Application.

Step 2: Edit View/View1.view.xml

Step 3: Edit Controller/View1.controller.js

Step 4: Edit test/unit/controller/View1.controller.js

Step 5: Create, if not available, test/unit/AllTests.js

Step 6: Create, if not available, test/unit/unitTests.qunit.html

Step 7: How to Run:

fiori Preview.

unit-test preview.

+ There are no comments

Switch Framework-SAP

How to Deploy a Web App – Step-by-Step Tutorial