Step 29: Integration Test with OPA

介绍

If we want to test interaction patterns or more visual features of our app, we can also write an integration test.

1.练习效果

2.源码

You can view and download all files at Walkthrough – Step 29.

We add a new folder integration below the test folder, where we put our new test cases. Page objects
that help structuring such integration tests are put in the pages subfolder that we also create now.

Let’s start with the journey first. A journey consists of a series of integration tests that belong
to the same context such as navigating through the app. Similar to the QUnit test implementation, OPA5 uses QUnit, that’s why we first
set up a QUnit module Navigation that will be displayed on our result page.

In our journey, we create a very simple test that starts the app. Inside the app, we simulate a click on a button and expect that the
dialog is opened afterwards. Finally, we shut down the app again.

As you can see, the test case reads like a user story, we actually do not need the implementation of the methods yet to understand the
meaning of the test case. This approach is called “Behavior Driven Development” or simply BDD and is popular in “Agile Software
Development”.

The implementation of the page object holds the helper functions we just called in our journey. We require OPA5 from
the sap.ui.test namespace and define a page object with the helper function createPageObjects. We
pass in an object with the key of our page onTheAppPage and two sections: actions and
assertions.

In the actions section of the page object we define a function to click the “Hello” dialog button. This is done in OPA5 with a
waitFor statement, it is basically a loop that checks for the conditions defined as parameters. If the conditions
are met, the success callback is executed, if the test fails because the conditions have not been met, the text in the
errorMessage property is displayed on the result page.

We define a waitFor statement that checks for controls of type sap.m.Button. As soon as a button is
found on the app page the success handler is executed and we use jQuery to trigger a tap event on the first button
that we found. This should open the HelloDialog similar to clicking on the button manually.

In the assertions section we define another waitFor statement that checks if a sap.m.Dialog control
is existing in the DOM of the app. When the dialog has been found, the test is successful and we can immediately confirm by calling an
ok statement with a meaningful message.

This file contains our test suite for all OPA tests of the app. We use the same namespace as for our application.

Then we load the basic QUnit functionality via script tags from SAPUI5 so
that we can execute the test journey. The NavigationJourney we defined above will be loaded via a script called
opaTests.qunit.js:

This script loads the NavigationJourney, and the test functions inside are immediately executed. When you call the
webapp/test/integration/opaTests.qunit.html page of your project on the server, you should see the QUnit layout
and a test “Should see the Hello dialog” is executed immediately. It will load the app component on the right side of the page. There
you can see what operations the test is performing on the app, if everything works correctly the button click is triggered, then a
dialog is shown and the test case is green.