Step 28: Unit Test with QUnit
Step 28: Unit Test with QUnit
https://ui5.sap.com/#/topic/e1ce1de315994a02bf162f4b3b5a9f09
单体测试
webapp/test/unit/model/formatter.js
/*global QUnit*/
sap.ui.define([
"sap/ui/demo/walkthrough/model/formatter",
"sap/ui/model/resource/ResourceModel"
], function (formatter, ResourceModel) {
"use strict";
QUnit.module("Formatting functions", {
beforeEach: function () {
this._oResourceModel = new ResourceModel({
bundleUrl: sap.ui.require.toUrl("sap/ui/demo/walkthrough") + "/i18n/i18n.properties"
});
},
afterEach: function () {
this._oResourceModel.destroy();
}
});
QUnit.test("Should return the translated texts", function (assert) {
// Arrange
// this.stub() does not support chaining and always returns the right data
// even if a wrong or empty parameter is passed.
var oModel = this.stub();
oModel.withArgs("i18n").returns(this._oResourceModel);
var oViewStub = {
getModel: oModel
};
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");
});
});
1，要测试的是model文件夹下的formatter.js文件的statusText函数
2，beforeEach：每个测试用例执行前调用；afterEach：每个测试用例执行完后调用。
3，因为formatter.js的代码里有var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
但是单体测试不需要实际的view和controller，所以必须模拟它们。
模拟的方法就是调用this.stub()，this.stub()可以模拟任意对象。
this.stub()是立即返回的，所以不需要promise
4，把模拟好的controller，bind到要测试的函数上。fnIsolatedFormatter就是最后模拟好的函数。
webapp/test/unit/unitTests.qunit.html (New)
<!DOCTYPE html>
<html>
<head>
<title>Unit tests for SAPUI5 Walkthrough</title>
<meta charset="utf-8">
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "../../"
}'
data-sap-ui-async="true">
</script>
<link rel="stylesheet" type="text/css" href="https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/qunit-2.css">
<script src="https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/qunit-2.js"></script>
<script src="https://openui5.hana.ondemand.com/resources/sap/ui/qunit/qunit-junit.js"></script>
<script src="https://openui5.hana.ondemand.com/resources/sap/ui/qunit/qunit-coverage.js"></script>
<script src="https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/sinon.js"></script>
<script src="https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/sinon-qunit.js"></script>
<script src="unitTests.qunit.js"></script>
</head>
<body>
<div id="qunit"/>
<div id="qunit-fixture"/>
</body>
</html>
使用启动测试。
如果有多个测试，则多个
webapp/test/unit/unitTests.qunit.js (New)
/* global QUnit */
QUnit.config.autostart = false;
sap.ui.getCore().attachInit(function () {
"use strict";
sap.ui.require([
"sap/ui/demo/walkthrough/test/unit/model/formatter"
], function () {
QUnit.start();
});
});
使用http://localhost:8080/test/unit/unitTests.qunit.html，执行测试。
约定：
1，所以的单体测试代码都放在webapp/test/unit
2，测试文件以*.qunit.html结尾。
3，unitTests.qunit.html文件里包含所有的测试
4，All dependencies are replaced by stubs to test only the functionality in scope
vx:xiaoshitou5854
