UI5-Testing

This repository is meant to serve as example for how testing works within UI5. It is basically what happens when you work through the entire "Testing"-Section within the official UI5 documentation.

Preview

Testing Pyramid

Getting Started

You can just clone this repository, run npm install and use the UI5 tooling to locally serve the application in order to debug/learn from it.

Hint: it already uses the livereload-middleware for the UI5 tooling, so changes while serving will trigger an immediate update in the browser.

1. Clone the repository

   $> git clone <repository-url>

2. Navigate into the cloned repository

   $> cd <repository>

3. Install all dependencies

   $> npm install

4. Start the application

   $> npm start

Namespace & Projectname

The paths within this project are - as usual - prefixed by the projectId ( which is declared within the manifest.json file). The prefix is made up by a given namespace and the name of the project. I must admit that the project name is quite verbose.

• Namespace: com.mrb
• Projectname: UI5-Testing

Tutorial Steps

• Step 1: Overview and Testing Strategy ✅ 0ebd475
• Step 2: A First Unit Test ✅ 3420350
• Step 3: Adding the Price Formatter ✅ ea435e8
• Step 4: Testing a New Module ✅ 486aba7
• Step 5: Adding a Flag Button ✅ 2d014a4
• Step 6: A First OPA Test ✅ 27b0b20
• Step 7: Changing the Table to a Growing Table ✅ 020e35f
• Step 8: Testing Navigation ✅ 2b69492
• Step 9: Adding the Post Page ✅ e82e3a1
• Step 10: Test Suite and Automated Testing ✅ 5836e74
• Step 11: Testing User Input ✅ ff36d79
• Step 12: Adding a Search ✅ 240f562
• Step 13: Testing User Interaction ✅ 6d158b9
• Step 14: Adding Tabs ✅ e790fd2
• Step 15: Writing a Short Date Formatter Using TDD ✅ 5cccb62
• Step 16: Adding the Date Formatter ✅ c41978e

Implemented = ✅

Additional Information

OData-Service 'settings'

When declaring the OData-Service as our model, we have added the parameter metadataUrlParams like so:

"sap.app": {
    "dataSources": {
      "mainService": {
        "uri": "/here/goes/your/serviceUrl/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0",
          "localUri": "localService/metadata.xml"
        }
      }
    }
  },
"models": {
      "": {
        "dataSource": "mainService",
        "settings": {
          "metadataUrlParams": {
            "sap-documentation": "heading"
          }
        }
      }
    }

This results in a GET-Request that looks like the following:

http://localhost:8080/here/goes/your/serviceUrl/$metadata?sap-documentation=heading&sap-language=EN 

Standard $metadata:

<Property Name="PostingDate" Type="Edm.DateTime" Precision="7" 
   sap:label="Posting Date" /> 

Extended $metadata?sap-documentation=heading:

<Property Name="PostingDate" Type="Edm.DateTime" Precision="7" 
   sap:label="Posting Date" sap:heading="Pstng Date"/> 

You can find additional information to the use of this parameter here.

Credits

For more information check:

• UI5 Documentation
• Cookbook for OPA5
• Getting Started
• Each Step as Download
• Test Automation
• Mock Server
• Test Recorder
• OPA5
• QUNIT
• SAP Gateway Developer Guide