Refrescando los apuntes de testing automático en SAPUI5 (Parte 3) – OPA5

En la entrada anterior preparamos los datos locales de nuestra aplicación y añadimos los test unitarios para verificar que la estructura de los datos de backend y nuestro servidor local están alineados.

En esta entrada vamos a preparar los test integrados, los que nos aseguraran que nuestra aplicación tal y como la va a usar el usuario funciona correctamente.

Esta entrada es una actualización de la entrada de OPA5 que ya prepare en su día, en ella encontraras detalles para hacer test con botones y otras cosas.

QUnit/OPA/Karma – Vol 3 – Test integrados usando OPA

Vamos a preparar los test integrados.

Preparando el test

Una cosa positiva de las nuevas plantillas es que ya nos viene un primer test integrado preparado, este test realizará un checkeo de la vista inicial de la APP para verificar que se carga correctamente.

Los test los crearemos en la vista concreta, en este caso utilizaremos el fichero «App.js» en la ruta webapp/test/integration/pages:

Como vemos, hay un primer test llamado iShouldSeeTheApp, que como su nombre indica, verifica si dentro del contenedor app tenemos la vista con el nombre App.

Vamos a añadir una nueva prueba que verifique si existe una entrada concreta en la tabla. Acordaros que utilizaremos los datos locales de la App con lo que si tenéis activada la generación automática de datos, quizás el test pueda fallar algunas veces.

Añadiremos la siguiente rutina:

theTableShoulExistEntry: function (){
	return new Opa5().waitFor({
		controlType : "sap.m.StandardListItem",
			matchers : new sap.ui.test.matchers.Properties({
				description: "Data",
				title: "Local"
			}),

			success : function (aItems) {
				Opa5.assert.ok(aItems.length, "Item is selected" + aItems.length + aItems[0])
			},
			errorMessage: "No selected item found"
	})
}

Lo que vamos a hacer con esta rutina es buscar dentro de todos los componentes tipo lista elementos que tengan las propiedades de titulo y descripción que indiquemos. Esta no es la manera mas eficiente de hacer este test, pero es el mas ilustrativo.

Si la prueba ha ido bien, mostraremos el Item seleccionado y la longitud de la tabla, pero si no encontramos un elemento que cumpla con las condiciones indicadas el test fallará y mostraremos el error » No selected item found «.

En este punto añadiremos a la vista de nuestra App el tag App, ya que sino el primer test por defecto fallará:

Ahora hay que añadir el test dentro del «diario» de test, para ello, vamos al fichero NavigationJourney.js en la ruta /webapp/test/ y añadimos la nueva rutina:

Añadiremos la llamada en el fichero «NavigationJourney.js»:

	Then.onTheAppPage.theTableShoulExistEntry();

Añadiendo llamadas locales

Ahora vamos a preparar el entorno para que utilize los datos locales. Para ello, vamos a seguir esta sencilla receta.

Primero crearemos un fichero llamado mockserver.js en la carpeta localService:

El fichero llevara el siguiente código para simular nuestro backend, esta parte es copiar pegar, la unica cosa que deberéis tener en cuenta es modificar la ruta en _sAppPath con la ruta de vuestro proyecto :

sap.ui.define([
	"sap/ui/core/util/MockServer",
	"sap/ui/model/json/JSONModel",
	"sap/base/util/UriParameters",
	"sap/base/Log"
], function (MockServer, JSONModel, UriParameters, Log) {
	"use strict";

	var oMockServer,
		_sAppPath = "ecastella/testing2/", ---> Aquí tu ruta
		_sJsonFilesPath = _sAppPath + "localService/data";

	var oMockServerInterface = {

		/**
		 * Initializes the mock server asynchronously.
		 * You can configure the delay with the URL parameter "serverDelay".
		 * The local mock data in this folder is returned instead of the real data for testing.
		 * @protected
		 * @param {object} [oOptionsParameter] init parameters for the mockserver
		 * @returns{Promise} a promise that is resolved when the mock server has been started
		 */
		init : function (oOptionsParameter) {
			var oOptions = oOptionsParameter || {};

			return new Promise(function(fnResolve, fnReject) {
				var sManifestUrl = sap.ui.require.toUrl(_sAppPath + "manifest.json"),
					oManifestModel = new JSONModel(sManifestUrl);

				oManifestModel.attachRequestCompleted(function ()  {
					var oUriParameters = UriParameters.fromQuery(window.location.search),
						// parse manifest for local metadata URI
						sJsonFilesUrl = sap.ui.require.toUrl(_sJsonFilesPath),
						oMainDataSource = oManifestModel.getProperty("/sap.app/dataSources/mainService"),
						sMetadataUrl = sap.ui.require.toUrl(_sAppPath + oMainDataSource.settings.localUri),
						// ensure there is a trailing slash
						sMockServerUrl = /.*\/$/.test(oMainDataSource.uri) ? oMainDataSource.uri : oMainDataSource.uri + "/";

					// create a mock server instance or stop the existing one to reinitialize
					if (!oMockServer) {
						oMockServer = new MockServer({
							rootUri: sMockServerUrl
						});
					} else {
						oMockServer.stop();
					}

					// configure mock server with the given options or a default delay of 0.5s
					MockServer.config({
						autoRespond : true,
						autoRespondAfter : (oOptions.delay || oUriParameters.get("serverDelay") || 500)
					});

					// simulate all requests using mock data
					oMockServer.simulate(sMetadataUrl, {
						sMockdataBaseUrl : sJsonFilesUrl,
						bGenerateMissingMockData : true
					});

					var aRequests = oMockServer.getRequests();

					// compose an error response for requesti
					var fnResponse = function (iErrCode, sMessage, aRequest) {
						aRequest.response = function(oXhr){
							oXhr.respond(iErrCode, {"Content-Type": "text/plain;charset=utf-8"}, sMessage);
						};
					};

					// simulate metadata errors
					if (oOptions.metadataError || oUriParameters.get("metadataError")) {
						aRequests.forEach(function (aEntry) {
							if (aEntry.path.toString().indexOf("$metadata") > -1) {
								fnResponse(500, "metadata Error", aEntry);
							}
						});
					}

					// simulate request errors
					var sErrorParam = oOptions.errorType || oUriParameters.get("errorType"),
						iErrorCode = sErrorParam === "badRequest" ? 400 : 500;
					if (sErrorParam) {
						aRequests.forEach(function (aEntry) {
							fnResponse(iErrorCode, sErrorParam, aEntry);
						});
					}

					// custom mock behaviour may be added here

					// set requests and start the server
					oMockServer.setRequests(aRequests);
					oMockServer.start();

					Log.info("Running the app with mock data");
					fnResolve();
				});

				oManifestModel.attachRequestFailed(function () {
					var sError = "Failed to load application manifest";

					Log.error(sError);
					fnReject(new Error(sError));
				});
			});
		},

		/**
		 * @public returns the mockserver of the app, should be used in integration tests
		 * @returns {sap.ui.core.util.MockServer} the mockserver instance
		 */
		getMockServer : function () {
			return oMockServer;
		}
	};

	return oMockServerInterface;
});

Una vez añadido el servidor local, vamos a añadir la configuración para que utilize este servidor:

A continuación os paso los bloques para que podáis copiar:

"ecastella/testing2/localService/mockserver",
"sap/ui/model/odata/v2/ODataModel"

this._clearSharedData();

var oMockserverInitialized = mockserver.init(oOptions);
this.iWaitForPromise(oMockserverInitialized);

_clearSharedData: function () {
	// clear shared metadata in ODataModel to allow tests for loading the metadata
	ODataModel.mSharedData = { server: {}, service: {}, meta: {} };
}

Ya tenemos todo apunto, ya solo nos queda ejecutar el test.

Lanzando los test

Para ejecutar el test y ver su comportamiento vamos a ejecutar el siguiente comando:

npm run int-tests

Y este será el resultado:

Como vemos, la carga de datos se realiza con datos locales.

---

En este punto ya podemos ejecutar test automáticos usando datos locales o datos del servidor según nuestro interés.

Si os soy sincero, esta parte de testing la tenia bastante abandonada ya que creía que requería un gran coste su preparación, pero me he dado cuenta de que no es así. Acordaros que tenemos ayudas para preparar estos test:

Otros plugins para SAPUI5 en Chrome

Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes ayudarme a llegar a mas personas.