Implementing OPA Tests

Objectives

After completing this lesson, you will be able to:

  • Implement an OPA test

Write OPA Tests

Business Example

In this exercise, you will write OPA tests.

Note

SAP Business Technology Platform and its tools are cloud services. Due to the nature of cloud software, step procedures and the naming of fields and buttons may differ from the exercise solution.

Note
In the following exercises, replace <L> with the course group and ## with your user group.
Caution
Be aware that in some cases the initial code or code of previous implementation steps is not shown. In the following steps, do not delete any existing code or code that you have added in previous steps if not explicitly asked. In addition, be aware that the screenshots show the solutions from student00 namespace; you should replace this with your own student## one.

Task 1: Create the SAP Fiori Freestyle Application to Test

Steps

  1. Log into your SAP Business Application Studio.

    1. Perform this step as shown in a previous exercise.

  2. Create a new SAP Fiori Freestyle project using the following information:

    SAP Fiori Freestyle Project Information

    FieldValue
    TemplateSAP Fiori application
    Template TypeSAP Fiori
    TemplateBasic
    Data sourcesNone
    View nameMain
    Module nameux402_opa
    Application titleOPA Tests
    Application namespacestudent##.com.sap.training.ux402.opa
    DescriptionAn OPA-test Application.
    Project folder path/home/user/projects

    Leave the rest of the fields and radio buttons set to their default values.

    1. Perform this step as shown in a previous exercise.

  3. In the Main.view.xml file, add a sap.m.Button element in the header of the page, with the following attributes:

    Attribute-value Pairs for the sap.m.Button Element 

    AttributeValue
    idheaderButton
    textHeader Button  
    1. Open the Main.view.xml file with the Code Editor of your SAP Business Application Studio.

    2. Add the headerContent aggregation to the Page element. Use the following code:

      Code snippet
      <headerContent>
      
      </headerContent>
      Expand
    3. Add an sap.m.Button element to the headerContent aggregation with the listed attribute-value combinations. Use the following code:

      Code snippet
      <Button id="headerButton" text="Header Button"/>
      Expand
    4. Save your changes

  4. Add the following elements with the listed attribute-value combinations to the content aggregation of the sap.m.Page element.

    Attribute-value Pairs for the Elements

    ElementsAttributesValue
    sap.m.LabeltextFirstname
    sap.m.LabelidfirstNameLabel
    sap.m.InputvalueJohn
    sap.m.InputidfirstNameInput
    sap.m.LabeltextLastname
    sap.m.LabelidlastNameLabel
    sap.m.InputvalueJohnson
    sap.m.InputidlastNameInput
    1. If it is not already open, open the Main.view.xml file.

    2. Add the elements with the listed attribute-value combinations to the contentaggregation of the sap.m.Page element. Use the following code:

      Code snippet
      <Label id="firstNameLabel" text="Firstname"/>
      <Input id="firstNameInput" value="John"/>
      <Label id="lastNameLabel" text="Lastname"/>
      <Input id="lastNameInput" value="Johnson"/>
      Expand
    3. Save your changes.

  5. Add an sap.m.Button element after the last sap.m.Input element to the content aggregation with the following attribute-value combinations.

    Attribute-value Pairs for the sap.m.Button Element

    AttributeValue
    idhelloButton
    textPress me
    pressonPress
    1. If not already open, open the Main.view.xml file in the Code Editor.

    2. Add the sap.m.Button element with the attribute-value combinations in the table provided to the content aggregation. Use the following code:

      Code snippet
      <Button id="helloButton" text="Press me" press="onPress"/>
      Expand
    3. Your code should now look like the following :

      Code snippet
      
      <Page id="page" title="{i18n>title}">
       <headerContent>
       <Button id="headerButton" text="Header Button"/>
       </headerContent>
       <content>
       <Label id="firstNameLabel" text="Firstname"/>
       <Input id="firstNameInput" value="John"/>
       <Label id="lastNameLabel" text="Lastname"/>
       <Input id="lastNameInput" value="Johnson"/>
       <Button id="helloButton" text="Press me" press="onPress"/>
       </content>
      </Page>
      
      
      Expand
    4. Save your changes and close the Main.view.xml file.

  6. Implement the onPress event handler function in the Main.controller.js file for the press event of the sap.m.Button element of the Main.view.xml file. Add an oEvent parameter to the function. The event handler function should show an sap.m.MessageBox with the text Button pressed. Use the show function of the sap.m.MessageBox to display the message.

    1. Open the Main.controller.js file, which is located in the controller folder of your project.

    2. Add a reference to the sap.m.MessageBox in the module definition. Use the following code:

      Code snippet
      
      sap.ui.define([
       "sap/ui/core/mvc/Controller",
       "sap/m/MessageBox"
      ],
       function (Controller, MessageBox) {
       "use strict";
      
      Expand
    3. Add an onPress function with a parameter, oEvent, to the controller implementation. Use the following code:

      Code snippet
      
      return Controller.extend("student##.com.sap.training.ux402.opa.ux402opa.controller.Main", {
       onInit: function () {
      
       },
       onPress: function (oEvent) {
      
       }
      });
      Expand
    4. Implement the onPress function. On the MessageBox reference, invoke the show function and pass the string literal Button pressed to the show function, as in the following code:

      Code snippet
      MessageBox.show("Button pressed");
      Expand
  7. Run your application. Choose the Press me button. A dialog appears with the message Button pressed.

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

    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.

Task 2: Implement OPA Tests

Steps

  1. 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
      
      iShouldFindAButton: function () {
       return this.waitFor({
       viewName: sViewName,
       id: "helloButton",
       success: function (oButton) {
       
       },
       errorMessage: "Did not find the hello-Button",
       timeout: "3" 
       });
      }
      Expand
    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
      
      oButton.$().trigger("press");
      Opa5.assert.ok(oButton.getId(), "Button with the given ID found");
      Expand
    4. Save your work. Your implementation should now look like the following:

      Code snippet
      
      iShouldFindAButton: function () {
       return this.waitFor({
       viewName: sViewName,
       id: "helloButton",
       success: function (oButton) {
       oButton.$().trigger("press");
       Opa5.assert.ok(oButton.getId(), "Button with the given ID found");
       },
       errorMessage: "Did not find the hello-Button",
       timeout: "3" 
       });
      }
      
      
      Expand
  2. 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
      Then.onTheViewPage.iShouldFindAButton();
      Expand
    2. Save your changes. Your code should look like the following:

      Code snippet
      
      opaTest("Should see the initial page of the app", function (Given, When, Then) {
       // Arrangements
       Given.iStartMyApp();
      
       // Assertions
       Then.onTheAppPage.iShouldSeeTheApp();
       Then.onTheViewPage.iShouldSeeThePageView();
       Then.onTheViewPage.iShouldFindAButton(); 
      
       //Cleanup
       Then.iTeardownMyApp();
      });
      
      
      Expand
  3. 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.

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

    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.

Log in to track your progress & complete quizzes