Getting Started with OPA5

First, we create a very simple view with an invisible button with Press me as button text:

<mvc:View controllerName="view.Main"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <App>
    <Page>
      <headerContent>
        <Button id="pressMeButton" text="Press me" press="onPress" visible="false"/>
      </headerContent>
    </Page>
  </App>
</mvc:View>

We display the button in the controller after 0 to 10 seconds. On press, we change the text.

sap.ui.controller("view.Main", {

    onInit : function () {
          
            var that = this;
            window.setTimeout(function () {
              that.byId("pressMeButton").setVisible(true);
            },Math.random()*10000);
          },


      onPress : function () {
            this.byId("pressMeButton").setText("I got pressed");
      }

});

Now how can we test this app without having to do a lot of mocking or writing of cryptic code?

When we write tests, we try to write it in a way that everyone can immediately understand what is done and tested with this test:

sap.ui.require([
  "sap/ui/test/Opa5",
  "sap/ui/test/opaQUnit",
  "sap/ui/test/actions/Press",
  "sap/ui/test/matchers/PropertyStrictEquals"
], function (Opa5, opaTest, Press, PropertyStrictEquals) {

  opaTest("Should press a Button", function (Given, When, Then) {
      // Arrangements
      Given.iStartMyApp();

      //Actions
      When.iPressOnTheButton();

      // Assertions
      Then.theButtonShouldHaveADifferentText();
  });
});

If you use opaQunit, OPA gives you the following three objects in your QUnit:

• Given = arrangements
• When = actions
• Then = assertions

You have to define these functions, so that OPA knows what they are.

Let's start by defining arrangements. In the following example, we assume that the app runs in a page called index.html. Our OPA test is located in the test/opa5.html folder.

We define a relative path pointing to the index.html of our application under test ../index.html - ../. This means that you go one directory up relative to the current directory:

var arrangements = new Opa5({
    iStartMyApp : function () {
        return this.iStartMyAppInAFrame("../index.html");
    }
});

This is simple because we already have programmed our app and just need to start it. The return this is needed for chaining the statements.

We now give OPA the ID and the viewName of the control we are looking for. OPA waits until the element is present in the respective view. OPA checks whether it is visible. After OPA has found the button, it invokes the Press action. If no button is found, we specify an error message so we know which waitFor went wrong.

var actions = new Opa5({
    iPressOnTheButton : function () {
        return this.waitFor({
            viewName : "Main",
            id : "pressMeButton",
            actions : new Press(),
            errorMessage : "did not find the Button"
        });
    }
});

After clicking the button, we want to check if the text has changed. For this, we can use matchers to check if the button we are searching for matches our conditions. We want to be sure that the text property of the button is equal to "I got pressed".

var assertions = new Opa5({
    theButtonShouldHaveADifferentText : function () {
        return this.waitFor({
            viewName : "Main",
            id : "pressMeButton",
            matchers : new PropertyStrictEquals({
                name : "text",
                value : "I got pressed"
            }),
            success : function (oButton) {
                Opa5.assert.ok(true, "The button's text changed to: " + oButton.getText());
            },
            errorMessage : "did not change the Button's text"
        });
    }
});

We have now defined all statements and must now add them to the OpaConfig as follows:

Opa5.extendConfig({
    arrangements : arrangements,
    actions : actions,
    assertions : assertions,
    viewNamespace : "view."
});

The viewNamespace is very important for finding the correct view. As you probably do not want to set this in every single waitFor, a default is provided. You can now launch the testpage and the OPA test should run. If everything worked, you get the following result:

For corresponding API documentation and samples, see the sap.ui.test API Reference documentation and the sap.ui.test.Opa5 Explored samples in the Demo Kit.