如何对SAPUI5控件的onBendering进行单元测试？

Question

Let's assume that I have the following code:

var title = new sap.m.Title();
title.addEventDelegate({
    onBeforeRendering: jQuery.proxy(function () {
        title.setText(this._createTitleText());
    }, this)
});

which sets the text to the title only on before rendering.

The question is how to unit test this ?

As I understand SAPUI5 framework will fire this event and then I should be able to attach to it and verify that the text of the title is correct, but how to do it and is it a right way?

This is what I was trying, but at least I don't get any text from my control plus for me it is not clear which data I should pass to this method.

title.attachBeforeRendering("data", function (oEvent) {
    var text = title.getText();
});

Answer 1

I found the following way:

title.addEventDelegate({
    onBeforeRendering: jQuery.proxy(function () {
        assert.equal(title.getText(), expectedTitle, "Title has correct text");
    }, this)
});

However, this is not enough because onBeforeRendering will happen after the test which means that it depends on the time thus it is not sure if it is going to happen. But there is a way to make it for sure:

In the end of the test we should call:

return new Promise(function (resolve, reject) {
    setTimeout(function () {
        QUnit.start();
    }, 100);
});

which will cover our case plus continue executing to another unit test.

Answer 2

You can try to call onAfterRendering manually or just invalidate or rerender the control.

Try to do something like

// act
oTitle.onAfterRendering();

// assert
assert.strictEqual(oTitle.getTitle(), "__expected_title__", "Title is correct!");

In case you are just testing if the title is changed. I would prefer to stub the setTitle method and check if it is called with a correct parameter.

You can see that usually events are tested in this way eg https://github.com/SAP/openui5/blob/master/src/sap.m/test/sap/m/qunit/MultiComboBox.qunit.html#L4479

In your case you don't need a fake event, but it is quite similar.