Implementing OPA Tests

Log into your SAP Business Application Studio.

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

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

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

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

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   123
   <headerContent>
   
   </headerContent>

3. Add an sap.m.Button element to the headerContent aggregation with the listed attribute-value combinations. Use the following code:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1
   <Button id="headerButton" text="Header Button"/>

4. Save your changes

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

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234
   <Label id="firstNameLabel" text="Firstname"/>
   <Input id="firstNameInput" value="John"/>
   <Label id="lastNameLabel" text="Lastname"/>
   <Input id="lastNameInput" value="Johnson"/>

3. Save your changes.

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

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1
   <Button id="helloButton" text="Press me" press="onPress"/>

3. Your code should now look like the following :

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   123456789101112131415
   
   <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>
   
   

4. Save your changes and close the Main.view.xml file.

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345678
   
   sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox"
   ],
    function (Controller, MessageBox) {
    "use strict";
   

3. Add an onPress function with a parameter, oEvent, to the controller implementation. Use the following code:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   123456789
   
   return Controller.extend("student##.com.sap.training.ux402.opa.ux402opa.controller.Main", {
    onInit: function () {
   
    },
    onPress: function (oEvent) {
   
    }
   });

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1
   MessageBox.show("Button pressed");

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.

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.

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   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:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   123456789101112131415
   
   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" 
    });
   }
   
   

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1
   Then.onTheViewPage.iShouldFindAButton();

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

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   123456789101112131415
   
   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();
   });
   
   

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.