Implementing Full-screen Application
Implementing List-Detail Application
Working with UI5-Controls
Using metadata to implement UI5 controls
Ensuring Software quality in UI5
Version Control - Working in Teams

Performing Integration Tests with One-Page Acceptance (OPA5) Tests

Objective

After completing this lesson, you will be able to perform integration tests with OPA5.

Integration Tests with OPA5

Watch this short video to learn about OPA5, its advantages, and limitations.

OPA5 and Bootstrapping

As we have already seen in the QUnit-lesson, the start of the OPA-tests is also implemented using a different html-file. The file is called the opaTests.qunit.html file and contains the bootstrapping code for the execution of OPA-tests. The bootstrapping file is generated by the SAP Business Applicaton Studio during project generation.

Let us now look at bootstrapping, library loading, and test initiation.

Note

You usually have various tests in a UI5 project. Tests are usually separated by their context - for example, tests like make sure that when a list item is selected, the details of the selected item are shown and tested (when the status of the item has a specific value, a specific icon is shown). These different tests are usually connected to a journey. 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 is why we first set up a QUnit module Navigation that will be displayed on our result page. The journey is implemented in the file, NavigationJourney. Of course you may have also files with different names containing a journey implementation.

OPA5: Anatomy of a Test Case

Each test case scenario is implemented in a different JavaScript file.

The following two figures describe the anatomy of an OPA5 test case.

Sample TestCase.js file.
opaTest definition with Given, When and Then objects.

The above figure shows a test implementation. The test case is set to check whether or not the component with the namespace sap.training.optest.integration.button can be loaded or not.

The function opaTest is the main aspect for defining integration tests with OPA. Its parameters define a test name and a callback function that gets executed with the following OPA5 helper objects to write meaningful tests that read like a user story.

  • Given: On the given object, we can call arrangement functions like iStartMyUIComponent to load our app in a separate iFrame for integration testing.
  • When: Contains custom actions that we can execute to get the application into a state that allows us to test the expected behavior.
  • Then: Contains custom assertions that check a specific constellation in the application and the teardown function that removes our iFrame again.

OPA5 Control Retrieval by ID

The OPA5 framework provides us different possibilities to get a reference to a UI control on the view. One option is to get a reference by the id of the control. The following figure shows the key aspects involved in the retrieval of a control by ID.

Sample When code with viewName and id of UI control, event trigger in case of success and errormessage.

Note

Ensure that each control inside the view implementation has a stable id. Inter alia using stable id's will ensure that your tests will work. To learn more about stable id, refer to the SAPUI5 documentation, https://ui5.sap.com/#/topic/79e910e6a0d949c7acb051b33170bebc.

OPA5 Control Retrieval without ID

Besides the retrieval of a UI control by id, it is also possible to use so called matchers. The following figure shows matchers retrieving a control without an ID but using a matcher. In this case, a sap.ui.test.matchers.PropertyStrictEquals is used. We want to get all controls of type sap.m.Button, where the property text contains the value Press me. You can find more matcher implementations in the namespace sap.ui.test.matchers of the SAPUI5-API-documentation (https://ui5.sap.com/#/api/sap.ui.test.matchers).

Sample When code retrieving control with matchers.

Write OPA Tests

In this demonstration, you will write OPA tests.

Caution

Please be aware that depending on the environment you use for the demonstration, you might get some errors. This needs to be performed directly on a PC. It might not work in a virtual environment such as the training landscape.

Steps

  1. Import the opa.tar project into your Business Application Studio.

    1. Locate the CHECKopa.tar file in your training files.

    2. Select the menu File→Open Folder....

    3. Select or Enter the /home/user/projects/ folder and choose OK.

    4. Select the menu File→Import Project...

    5. Select the CHECKopa.tar file and choose OK.

  2. Run your application. Choose the Press me button. A dialog appears with the message Button pressed.

    Screenshot of the resulting application. A message box displays.

    1. Open the context menu on your project folder (CHECKopa).

    2. Select Preview Application.

    3. Choose start fiori run –open ".." on the opened dialog.

    4. If prompt, select Open on the dialog in the bottom right corner.

  3. Implement a test function with the name iShouldFindAButton in the webapp/test/integration/pages/Main.js file and check if the Main-view implemented in the previous task contains a control with the id helloButton.

    Attribute-value Pairs for this.waitFor

    AttributeValue
    viewNamesViewName
    idhelloButton
    successCallback function with one parameter named oButton
    errorMessageDid not find the hello­button
    timeout3

    1. Open the webapp/test/integration/pages/Main.js file.

    2. Implement the iShouldFindAButton function after the iShouldSeeThePageView function, using the following code:

      Code Snippet
      123456789101112
      
iShouldFindAButton: function () {
  return this.waitFor({
    viewName: sViewName,
    id: "helloButton",
    success: function (oButton) {
    
    },
    errorMessage: "Did not find the hello-Button",
    timeout: "3" 
  });
}

    3. Implement the success function. Trigger the press event on the passed oButton object and print out an assertion of type ok. Use the following code:

      Code Snippet
      123
      
oButton.$().trigger("press");
Opa5.assert.ok(oButton.getId(), "Button with the given ID found");

    4. Save your work. Your implementation should now look like the following:

      Screenshot of the resulting iShouldFindAButton function code.

  4. Add the assertion iShouldFindAButton to the webapp/test/integration/NavigationJourney.js file.

    1. Open the NavigationJourney.js file and add theiShouldFindAButton as a new assertion. Add the following code after the iShouldSeeThePageView() assertion:

      Code Snippet
      1
      Then.onTheViewPage.iShouldFindAButton();

    2. Save your changes. Your code should look like the following:

      Screenshot of the resulting opaTest function code.

  5. Start your application in int-tests mode. A new browser tab opens and the test case starts. When the test is complete, you can expand the test result to get more details. The results screen should look like the one shown in the following figure.

    Resulting screen of the OPA test. All three tests have succeeded.

    1. Open the context menu on our project folder (CHECKopa).

    2. Select Preview Application.

    3. Choose int-tests fiori run –open ".." on the opened dialog.

    4. If prompted, choose Open on the dialog in the bottom right corner.

    5. A new browser tab opens, and the test case starts. When the test is complete, you can expand the test result to get more details.

Learning

SAP FacebookSAP YoutubeSAP LinkedIn