✒️SAP Fiori La configuración del test unitario y las herramientas de debugging

1 | Execution of Unit Testing from BAS

Accessing SAP Business Application Studio (BAS) marks the initial step towards conducting comprehensive unit testing. BAS serves as an integrated development environment tailored specifically for SAP applications. Developers log into BAS to leverage its suite of tools and functionalities designed to streamline the development, testing, and deployment processes of SAP applications.

• Access to SAP BAS:
  • Access SAP BAS to perform unit tests in the development environment.
• Execution Configuration:
  • Create an execution configuration by clicking the "Run Configuration" button.
  • Select the HTML5 executable file and the SAPUI5 version.
• Dependencies:
  
  • Display available dependencies, including service dependencies and data sources.
• Application Binding:
  • If connection to a backend system is needed, bind the application to the corresponding destination.
• Running the Test:
  • Once dependencies are correctly linked, execute the application test by clicking the run button.
• Execution Script:
  • Find the execution script in the "launch.json" file, accessed by right-clicking on the folder.
• Test Result:
  • When running the project, the result is displayed, which in this case could be a list of sales orders.
• Application Startup Steps:
  • Describes the steps executed when starting the application, including loading resources, creating models and controllers, and evaluating view bindings.
• Stopping Execution:
  • If you want to stop execution, go to debug mode and click the stop button.

2 | Google Chrome DevTools

Google Chrome's development tools, known as DevTools. These tools are useful for web development and debugging within the browser. The panels included in DevTools are:

• Elements
• Connectivity
• Sources
• Timeline
• Profiles
• Resources
• Audits
• Console

Accessing DevTools:

• Open DevTools: Use F12 or Ctrl+Shift+I to open the tools.
• Inspect and Edit: Modify HTML and CSS directly in the browser to see changes in real-time.

K ey Panels in DevTools:

• Elements: Examine and edit the HTML structure.
• Console: View messages and run JavaScript code for debugging.
• Sources: Debug JavaScript by setting breakpoints and stepping through code.
• Network: Monitor network requests to understand how resources are loaded.

3 | Activation of Application Analysis System for SAPUI5

Activation of the application analysis system for SAPUI5 is a specific and useful tool that facilitates analysis of a running application. It provides information on the version of SAPUI5 libraries and determines which components can be used. Other tools accessible include:

• SAPUI5 Diagnostics
• Support Assistant

SAPUI5 Diagnostics:

• Displays technical information and allows enabling debug mode to view original code and application comments.

Manifest.json:

• Contains the global configuration of the application.

Support Assistant:

• Provides validation rules and tips for fixing errors, displaying analysis in panels that include the object tree, detected errors, and explanations of the problem.

4 | Google Chrome Extensions

UI5 Inspector:

• A free, open-source extension installed in Chrome's DevTools panel. It allows analyzing and examining UI5 code.

JSONView:

• This extension displays JSON content in a structured format and allows expanding and collapsing hierarchy elements.

XML Tree:

• Similar to JSONView, this extension formats XML content in a structured way and offers the ability to expand and collapse hierarchical elements.

5 | Analysis of Views and Controllers

When reviewing an application's code, most of the time is spent examining views and controllers. Views are usually in XML format, while controllers are written in JavaScript.

Chrome DevTools Sources Panel:

• Allows viewing source code of views and controllers.
• To view XML view definitions, filter by "view.xml" in the panel.

Additional Functionality of the Source Panel:

• Offers features like setting breakpoints, examining application state, and making temporary changes to source code.
• Mentions the use of the console panel, which displays entered messages and obtained responses.

6 | Placing a Breakpoint

There are various options for setting breakpoints in the browser debugger, such as clicking on the line number or right-clicking to disable or edit existing breakpoints.

Setting Breakpoints:

• Click Line Number: Click on the line number in the source code to set a breakpoint.
• Use "debugger" Statement: Insert this statement in your code to pause execution.

Debug Mode:

• Access Debug Mode: Use F12 or Ctrl+Shift+I and go to the Sources tab.
• Skip Breakpoints: Press F8 to continue execution past a breakpoint.

Search and Verify Code:

• Find Functions: Use Ctrl+P to search for functions and set breakpoints to examine their parameters and behavior.

7 | OData Models

Following concepts related to OData models:

• OData Model: Refers to a runtime instance of an OData model that retrieves a metadata document and provides a mechanism to access related resources.
• $metadata Resource: A specific resource in OData containing information about the structure and metadata of the service. It can be viewed in the network panel.
• Service Call: Refers to the request made to the OData service with selected data on the screen.
• Code Debugging: writing debugging code in the console, such as using the "oEvent.getParameter("listItem")" method to get the selected item and "oEvent.getParameter("listItem").getBindingContext().getProperty("SalesOrderID")" to get a specific value.
• Debug Level Logs: View and filter debug logs to find information, warnings, and errors.

8 | Emulating UI5 and Fiori Applications on Mobile Devices

UI5 and Fiori applications can be emulated to appear as if they are running on mobile devices using the "Mobile emulation in device mode" tool in Google Chrome DevTools.

Preparation for Mobile Devices:

• It's important to consider mobile devices when building SAPUI5 applications or extending existing Fiori applications.
• Google Chrome offers functionality to check how a website or application works on a mobile device through simple steps.

Emulation Tool Features:

• The emulation tool allows simulating the response of Fiori extensions and SAPUI5 applications on a variety of smartphones and tablets.
• It allows changes in device orientation, touch emulation, and limited network conditions such as 3G, LTE, 4G, wireless, and offline mode.