Skip to Content

Getting Started with testing SAPUI5/Fiori Applications


qUnits are written to test the functionality.

For UI5/Fiori applications, mainly we write qUnits for formatter.js,controller.js etc files in this context.


Step1: Once a SAPUI5/Fiori Application is developed. Now add a test folder to the project structure as below.

folder structure.JPG

Create a subfolder “unit” to write the test cases .

Step2: Now I want start with formatter file to include qUnits. create a folder “model” and add new file “formatter.js”

sap.ui.require(

  [

  “com/sap/<project-name>/util/Formatter”, // add the file path for which qUnit’s you are intending to write.

  “sap/ui/model/resource/ResourceModel”,

  “sap/ui/thirdparty/sinon”,

  “sap/ui/thirdparty/sinon-qunit”

  ],

  function (formatter, ResourceModel) {

  “use strict”;

}

);

Before adding  test cases to formatter.js. lets create “unitTests.qunit.html” file to run and display test results.


Step3:

Create a new “unitTests.qunit.html” file to run the Unit tests.



<!DOCTYPE html>

<html>

<head>

  <title>Unit tests for “Application Name”</title>

  <meta http-equiv=’X-UA-Compatible’ content=’IE=edge’>

  <meta charset=”utf-8″>

  <script id=”sap-ui-bootstrap”

  src=”/resources/sap-ui-core.js”

  data-sap-ui-resourceroots='{

  “com.sap.edaas”: “../../”,

  “test.unit”: “./”

  }’>

  </script>

  <script>

  jQuery.sap.require(“sap.ui.qunit.qunit-css”);

  jQuery.sap.require(“sap.ui.thirdparty.qunit”);

  jQuery.sap.require(“sap.ui.qunit.qunit-junit”);

  jQuery.sap.require(“sap.ui.qunit.qunit-coverage”);

  // model tests

  jQuery.sap.require(“test.unit.model.formatter”);

  </script>

</head>

<body>

<div id=”content”></div>

<h1 id=”qunit-header”>Unit tests for “Application Name”</h1>

<h2 id=”qunit-banner”></h2>

<h2 id=”qunit-userAgent”></h2>

<div id=”qunit-testrunner-toolbar”></div>

<ol id=”qunit-tests”></ol>

<div id=”qunit-fixture”></div>

</body>

</html>

Step 4:

  In your project, if you have defined a Formatter function as below

sap.ui.define([], function () {
“use strict”;
return {
statusText
: function (sStatus) {
var resourceBundle = this.getView().getModel(“i18n”).getResourceBundle();
switch (sStatus) {
case “A”:
return resourceBundle.getText(“invoiceStatusA”);
case “B”:
return resourceBundle.getText(“invoiceStatusB”);
case “C”:
return resourceBundle.getText(“invoiceStatusC”);
default:
return sStatus;
}
}
};
});


webapp/i18n/i18.properties file

invoiceStatusA=New

invoiceStatusB=In Progress

invoiceStatusC=Done


Then  you would have to write test cases in  step2 as below

sap.ui.require(
[
“sap/ui/demo/wt/model/formatter”,
“sap/ui/model/resource/ResourceModel”,
“sap/ui/thirdparty/sinon”,
“sap/ui/thirdparty/sinon-qunit”
],
function (formatter, ResourceModel) {
“use strict”;
QUnit.module(“Formatting functions”, {
setup
: function () {
this._oResourceModel = new ResourceModel({
bundleUrl
: jQuery.sap.getModulePath(“sap.ui.demo.wt”, “/i18n/i18n.properties”)
});
},
teardown
: function () {
this._oResourceModel.destroy();
}
});
QUnit.test(“Should return the translated texts”, function (assert) {
// Arrange
var oViewStub = {
getModel
: this.stub().withArgs(“i18n”).returns(this._oResourceModel)
};
var oControllerStub = {
getView
: this.stub().returns(oViewStub)
};
// System under test
var fnIsolatedFormatter = formatter.statusText.bind(oControllerStub);
// Assert
assert.strictEqual(fnIsolatedFormatter(“A”), “New”, “The long text for status A is correct”);
assert.strictEqual(fnIsolatedFormatter(“B”), “In Progress”, “The long text for status B is correct”);
assert.strictEqual(fnIsolatedFormatter(“C”), “Done”, “The long text for status C is correct”);
assert.strictEqual(fnIsolatedFormatter(“Foo”), “Foo”, “The long text for status Foo is correct”);
});
}
);

Step 5:

Similarly, i’m now adding test cases for another module “Number Unit”. each function within formatter can be termed as module.

sap.ui.require(

  [

  “sap/ui/demo/bulletinboard/model/formatter”,

“sap/ui/thirdparty/sinon”,

  “sap/ui/thirdparty/sinon-qunit”

  ],

  function (formatter) {

  “use strict”;

  QUnit.module(“Number unit”);

  function numberUnitValueTestCase(assert, sValue, fExpectedNumber) {

  // Act

  var fNumber = formatter.numberUnit(sValue);

  // Assert

  assert.strictEqual(fNumber, fExpectedNumber, “The rounding was correct”);

  }

  QUnit.test(“Should round down a 3 digit number”, function (assert) {

  numberUnitValueTestCase.call(this, assert, “3.123”, “3.12”);

  });

  QUnit.test(“Should round up a 3 digit number”, function (assert) {

  numberUnitValueTestCase.call(this, assert, “3.128”, “3.13”);

  });

  QUnit.test(“Should round a negative number”, function (assert) {

  numberUnitValueTestCase.call(this, assert, “-3”, “-3.00”);

  });

  QUnit.test(“Should round an empty string”, function (assert) {

  numberUnitValueTestCase.call(this, assert, “”, “”);

  });

  QUnit.test(“Should round a zero”, function (assert) {

  numberUnitValueTestCase.call(this, assert, “0”, “0.00”);

  });

  QUnit.module(“Price State”);

  function priceStateTestCase(oOptions) {

  // Act

  var sState = formatter.priceState(oOptions.price);

  // Assert

  oOptions.assert.strictEqual(sState, oOptions.expected, “The price state was correct”);

  }

  QUnit.test(“Should format the products with a price lower than 50 to Success”, function (assert) {

  priceStateTestCase.call(this, {

  assert: assert,

  price: 42,

  expected: “Success”

  });

  });

  QUnit.test(“Should format the products with a price of 50 to Normal”, function (assert) {

  priceStateTestCase.call(this, {

  assert: assert,

  price: 50,

  expected: “None”

  });

  });

  QUnit.test(“Should format the products with a price between 50 and 250 to Normal”, function (assert) {

  priceStateTestCase.call(this, {

  assert: assert,

  price: 112,

  expected: “None”

  });

  });

  QUnit.test(“Should format the products with a price between 250 and 2000 to Warning”, function (assert) {

  priceStateTestCase.call(this, {

  assert: assert,

  price: 798,

  expected: “Warning”

  });

  });

  QUnit.test(“Should format the products with a price higher than 2000 to Error”, function (assert) {

  priceStateTestCase.call(this, {

  assert: assert,

  price: 2001,

  expected: “Error”

  });

  });

  }

);

Step 6:  Now run the UnitTests.qunit.html file .  Right click and select Run as Unit Test in WebIDE.

Successfully qUnits are now executed.

output.JPG

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply