Super App API mocking is a technique used to simulate the structure and behavior of the real Super App API during the development process of a Mini App.
This technique, which uses the GeneXus Project Navigator (GPN), allows you to work independently on the Mini App without relying on the actual implementation of the Super App API.
The key feature of a Super App is its ability to load and execute Mini Apps (smaller, independent applications) within a unified user experience. To achieve this, Super Apps expose an API that allows Mini Apps to interact with their services and screens.
Mocking a Super App API involves creating a simulated version of the API that replicates its structure, behavior, and responses.
This provides a simulated environment where you can work on your Mini Apps efficiently, reduce costs, and ensure thorough testing during the development stage. However, it is crucial to conduct final tests against the real Super App API before deployment to production, as mocks are not a substitute for validating the actual integration.
- Independent development: Work independently of the Super App, reducing dependencies and saving time.
- Avoid altering Mini App code: This solution requires creating additional objects, as you will see in the sample below. However, the goal is to avoid altering Mini App code to work against the Mock or the real Super App API.
- Controlled testing environment: Mocking provides a consistent and controlled environment for testing, ensuring that tests are reliable and repeatable. Relying on a live API can lead to inconsistencies due to changes or data variations in the API. Mocking ensures a stable environment, facilitating more reliable and consistent testing.
- Early testing: Allows for early testing of Mini Apps, even if the Super App API is still under development.
Below is described how to implement a Mock of the Super App API in a Native Mobile Mini App.
For Web Mini Apps, mocking the calls using JavaScript is enough.
Consider the Verdant Bank Super App Sample that emulates a wallet.
This Super App exposes in its API the following method:
Payment {
NewPayment(in:&ExternalReference, in:&Amount, out:&Success, out:&PaymentId)
=> PaymentPanel(&ExternalReference, &Amount, &Success, &PaymentId);
}
SampleVerdantBankAPI module will be used in Native Mobile Mini App to interact with the Super App API as follows:
SampleVerdantBankAPI.SuperAppVerdantBank.NewPayment(&Reference,&Amount,&Success,&PaymentId)
You can check all these Mini Apps KBs available for download with Mock Super App API samples:
- The Movies: This Mini App facilitates the purchase of movie tickets.
- Frosty Delights: Users can order a variety of ice cream flavors through this Mini App.
- Coffee & Muffins: This Mini App allows users to order coffee and sandwiches from a coffee store.
Read more at: HowTo: Call a Super App API from a Native Mobile Mini App.
1) Create objects that serve as Mocks for the methods exposed in the Super App API. They must respect the same parameters as the object they are mocking. Since they are mocks, the implementation can be simple.
1.1) To emulate the call of an object with an interface, create a Panel called MockNewPayment, for example, that simply adds 2 buttons to its layout with the following events:
parm(in:&ExternalReference,in:&Amount,out:&Success,out:&PaymentId);
Event 'Pay'
Composite
&Success = true
&PaymentId = Random()
return
EndComposite
Endevent
Event 'Reject'
Composite
&Success = false
&PaymentId.SetEmpty()
return
EndComposite
Endevent
2) Create a Main Object called SuperAppDummy. There is no need to configure any other properties or add code. The generator will use it for its correct operation and metadata generation.
3) Create a Super App object named SuperAppVerdantBankMock, which will serve as a mock of the Super App API.
3.1) In the Source section, define the API while respecting the structure, but calling the mock objects created in step 1.
Payment {
NewPayment(in:&ExternalReference,in:&Amount,out:&Success,out:&PaymentId)
=> MockNewPayment(&ExternalReference,&Amount,&Success,&PaymentId);
}
3.2) In the Main Object property, set the SuperAppDummy object created in step 2.
4) Create a Mini App object named MiniAppCoffeeMuffins.
4.1) Set the Main Object property to CoffeeHome: this should be the Main Object of the Mini App.
4.2) Configure the Super App API Mock property to SuperAppVerdantBankMock: this should be the Super App object created in step 3.
Consider the following non-GeneXus Super App examples: Android Super App Example and iOS Super App Example.
Both Super Apps expose in their APIs the following methods:
PayWithUI(int amount, string reference)
PayWithoutUI(int amount, string reference)
Payments External Object will be used in Mini App to interact with the Super App API as follows:
&Reference = Payments.PayWithUI(&Amount)
&Reference = Payments.PayWithoutUI(&Amount)
You can check this Mini App KB available for download with Mock Super App API examples: Mini App Payments - This Mini App implements a Super App API call.
For more information, read: HowTo: Call a Super App API from a Native Mobile Mini App.
1) Create objects that serve as Mocks for the methods exposed in the Super App API. They must respect the same parameters as the object they are mocking. Since they are mocks, the implementation can be simple.
1.1) Create a Panel called MockNewPayment that simply adds 2 buttons to its Layout with the following events:
parm(in:&Amount,out:&Reference);
Event 'Pay'
&Reference = !'Mock: '+GUID.NewGuid().ToString()
Return
Endevent
Event 'Reject'
&Reference = !'Mock: Rejected error #0001'
Return
Endevent
1.2) Define a Procedure called MockPayProc as follows:
parm(in:&Amount,out:&Reference);
If &Amount = 0
&Reference = !'Mock: Invalid amount'
Else
&Reference = !'Mock: '+Guid.NewGuid().ToString().Trim()
Endif
2) Create a Main Object called SuperAppDummy. There is no need to configure any other properties or add code. It will be used by the generator for its correct operation and metadata generation.
3) Create a Super App object named SuperAppApiMock, which will serve as a mock of the Super App API.
3.1) In Source section, define the API while respecting the structure, but calling the mock objects created in step 1.
Payment {
PayWithUI(in:&Amount,out:&Reference)
=> MockPayPanel(&Amount,&Reference);
PayWithoutUI(in:&Amount,out:&Reference)
=> MockPayProc(&Amount,&Reference);
}
3.2) In Main Object property, set the SuperAppDummy object created in step 2.
4) Create a Mini App object named MiniAppTestMock.
4.1) Set the Main Object property to Payments: this should be the Main Object of the Mini App.
4.2) Configure the Super App API Mock property to SuperAppApiMock: this should be the Super App object created in step 3.
4.3) Set the Super App API External Object property to Payments: this should be the External Object created to call the Super App API.
After performing the above configurations, your Native Mini App is ready to run the Mocks when running in GeneXus Project Navigator.
To use the Mocks, the following is required:
- Apple: GeneXus Project Navigator version 18.10 or higher (Upgrade 10).
- Android: GeneXus Project Navigator version 2.2.0 or higher (Upgrade 9).
When executing code at the event level that calls the Super App API, calling GeneXus Super App through the module:
SampleVerdantBankAPI.SuperAppVerdantBank.NewPayment(&Reference,&Amount,&Success,&PaymentId)
...or by calling the non-GeneXus Super App through the External Object:
&PaymentId = Payments.PayWithUI(&Amount)
&PaymentId = Payments.PayWithoutUI(&Amount)
Since it is running on GeneXus Project Navigator, the configured mocks will be executed, allowing the entire Mini App to be tested.
This feature is available since GeneXus 18 Upgrade 10.