How to setup test cases for SAPUI5/OPENUI5 applications?

Question

I try to atomize my tests for a given UI5 application. Therefore I created a folder under WebContent called test-resources. In that folder I placed two files for first tests.

First file: experimental.qunit.html that contains some first working unit test code.

Second file: experimental.opa.html which contains an example code from the documentation.

The testing part looks like this:

opaTest("Should find a Button with a matching property", function(Given, When, Then) {
    // Act
    Given.iStartMyAppInAFrame("index.html");

    When.waitFor({
        viewName : "view.master.Master",
        controlType : "sap.m.Button",
        matchers : new sap.ui.test.matchers.PropertyStrictEquals({
            name : "icon",
            value : "sap-icon://show"
        }),
        success : function (aButtons) {
            debugger;
            ok(true, "Found the button: " + aButtons[0]);
        },
        errorMessage : "No button with property icon equal to sap-icon://show"
    });
    Then.waitFor({
        // not implemented
    });
    Then.iTeardownMyAppFrame();
});

First of all I assume that I can search a button also with icon property. Second assumption is, that viewName is the name and folder of the view file? In the app, the view is the master view of a split app.

I start the test like this: * In Eclipse mark the project and choose run as "Web App Preview" * Than of course I see my normal app * I replace the index.html part with test-resoruces/experimental.opa.html * Now I can see the test and my app is shown in an iframe

But: 1. The button selection is not working, anyone an idea what's wrong? 2. If I change the html code I have to restart the "Web App Preview" all the time, a reload seems not working. Is there a "better" way to run the tests after updating test code?

The app itself is defined as a component, and the main view is a SplitApp xml file that contains nothing than:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m">
    <SplitApp id="idAppControl" />
</mvc:View>

Meanwhile I detect the problem and fixed it. My syntax of PropertyStrictEquals was wrong.

The restart problem (of Web App Preview) still exists.

I also detected a helpful example: https://openui5beta.hana.ondemand.com/test-resources/sap/m/demokit/cart/test/BuyProductJourney.qunit.html

It is mentioned here: http://scn.sap.com/community/developer-center/front-end/blog/2014/10/16/javascript-based-integration-tests-for-sapui5-apps-with-opa

inetphantom inetphantom · Accepted Answer · 2016-08-04T11:38:09

(Have a look at the testing Tutorial in the developper guide)

First of all, in your example you are mixing the levels of abstraction. Directly in your jurney (the order of steps for your tests) there should not be any code like waitFor(), because that is page specific code. So you should create pages, on where your actual arrangements, actions and assertions take place. In the jurney you only call them. like this (source):

        opaTest("Should see the post page when a user clicks on an entry of the list", function (Given, When, Then) {
        // Arrangements
        Given.iStartMyApp();

        //Actions
        When.onTheWorklistPage.iPressOnTheItemWithTheID("PostID_15");

        // Assertions
        Then.onThePostPage.theTitleShouldDisplayTheName("Jeans");
    });

Those objects onTheWorklistPage and onThePostPage are your actual test steps, wher you search for objects and trigger a click or check the displayed text you create them like that:

    Opa5.createPageObjects({
        onTheWorklistPage: {
            baseClass: Common,
            actions: {...},
            assertions: {...}
        }
    })

Now in those actions and assertions you put your waitFor() to get elements and do something with them. This function is described in the API

PS: Your question is very unstructured and I am not shure if I answered your question, if not, please comment.

How to setup test cases for SAPUI5/OPENUI5 applications?

1 Answers