Refrescando los apuntes de testing automático en SAPUI5 (Parte 1) – servidor local

Hace tiempo escribir una serie de entradas que hablaban sobre como preparar nuestras aplicaciones para realizar testing de manera automática en SAPUI5. Una parte de estas entradas han quedado obsoletas, por lo que en esta nueva serie vamos a preparar nuestra aplicación para realizar los test unitarios e integrados de manera automatica.

Por si no visteis la otra serie, os hago un refresco:

QUnit/OPA/Karma – Vol 1 – Test unitarios de UI5

Esta nueva serie a diferencia de la anterior seguirá este esquema:

• Preparar aplicación
  • Preparar datos en local de nuestra aplicación
• Testing
  • QUnit – Validar que el metadato local es igual al metadato del servidor i otras comprobaciones
  • OPA5 – Validar si un listado tiene datos y si estos son coherentes con lo que indiquemos
• Automatización y GIT
  • Validación del formato del message «Commit» en git
  • Ejecutar los test de manera automática antes de realizar un commit.

Esta primera entrada es una versión extendida de un anterior articulo:

SAPUI5 mock server en 5 minutos – Business Application Studio

Vamos sin más a preparar nuestra aplicación.

Preparando la aplicación

Para este ejemplo utilizaremos el servicio OData de northwind: https://services.odata.org/V2/northwind/northwind.svc/

También anunciar que los ejemplos que os mostraré están hechos con VS Code sobre windows 11. Esto tendrá su importancia en la automatización, aunque solo será relevante en un punto

Creando la aplicación

Utilizamos el wizard para generar una aplicación SAPUI5 free style siguiendo los passos estandar.

En Data Source añadiremos el servicio:

Este punto es importante porque generará una copia del metadata a nuestro proyecto local.

La vista inicial la llamaré app, pero en esta aplicación al no tener navegación este punto no sera relevante.

Tampoco haremos nada relevante a nivel de tributos, os dejo un ejemplo del proyecto:

Sin hacer nada especial, ya tendremos parte del mock server preparado para poder trabajar en local (sin necesidad de un backend). Vamos a analizar que ha pasado.

Datos en local > Por defecto al crear la aplicación

A diferencia de versiones anteriores, crear un mockserver es mucho más fácil.. ya casi lo tenemos a punto.

Lo primero que nos fijaremos es que dentro del proyecto tenemos la carpeta localService, en ella añadiremos los datos mock de nuestra aplicación. El punto interesante es que si hems añadido el servicio en el wizard, se nos descarga el metadata de manera automática.

El segundo punto importante es el archivo package.json donde tendremos 2 comandos preparados para la ejecución de nuestra aplicación en local.

A grandes rasgos si no modificamos nada estas son las diferencias entre start-local i start-mock:

• En start-local: la aplicación sera 100% local, esto significa que las librerías ui5 también usaremos las que tengamos instaladas en nuestro PC. Esta opción es útil cuando nuestra aplicación no sea dependiente de otros servicios o librerías externas
• Con start-mock: solo los datos son locales, el resto de librerías y componentes los descargaremos de la nube.

Las dos opciones utilizan los datos locales, pero… ¿como informamos estos datos?

Datos en local > Añadiendo datos

Si nos fijamos en el script que ejecuta el servidor local, vemos que ya un fichero .yaml. Si lo analizamos vemos lo siguiente:

Como podemos pensar, con metadataXmlPath definimos la ruta de nuestro metadata del servidor local. Por lo que la ruta mockdataRootPath sera donde tenemos que añadir nuestras entidades locales.

Un punto importante es el flag generateMockData, esto es lo que pasa según su valor:

• True: Si no añadimos datos, el servidor local los generará de manera aleatoria. Esto tiene un inconveniente, las relaciones entre entidades pueden no definirse correctamente.
• False: En este caso, si al hacer la petición no hemos definido los datos, el servidor local devolverá un 200 sin datos. Como si hacemos un filtro que no tiene datos en el servidor real.

Solo nos queda añadir los ficheros. Para esta prueba utilizaremos dos entidades de servicio OData, Employees y Producs. En una usaremos el generador de datos mock en la otra utilizaremos datos reales del servicio.

Para ello, primero vamos a leer del servidor los datos de Employees con la siguiente llamada:

https://services.odata.org/V2/northwind/northwind.svc/Employees?$top=5&$format=json

Nos quedamos en formato JSON los 5 primeros resultados, para esta prueba sera suficiente.

Ahora crearemos una carpeta data dentro de la carpeta localService.

En esta carpeta añadiremos un fichero json con el contenido descargado, quitando los primeros valores del OData, es decir, así nos quedará:

Y este es el resultado de las carpetas:

Para ver el resultado, añadiremos a la vista principal (App) una lista:

<mvc:View controllerName="ecastella.testing.controller.App"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Shell>
		<App>
			<pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <List id="list"
                        headerText="Employees"
                        items="{
                            path: '/Employees'
                        }" >
                        <items>
                        <StandardListItem
                                title="{LastName}"
                                description="{FirstName}"/>
                        </items>
                            </List>
                    </content>
                </Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Probando la aplicación en sus distintos modos

Ahora que ya tenemos montado el mock server, vamos a ver las distintas opciones. Para ello, ejecutaremos la aplicación en modo normal, en modo local y en modo mock. Para ver los resultados, vamos a añadir una entidad llamada productos en la vista general para ver el comportamiento.

Tambien cambiaremos el flag del fichero ui5-mock.yaml para que no genere datos si la entidad no existe:

Tambien añadiremos en el fichero Employees.json una marca para verificar que el dato viene de nuestro servidor local:

• Servidor con datos del backend: npm run start

Como vemos, obtenemos los datos de manera correcta del servidor Backend, esta seria la ejecución normal que siempre hemos realizado.

• Servidor Local, si no hay entidad los datos se generan de manera aleatoria:

Como vemos en este caso, la lista de productos se rellena de manera aleatoria con datos. Tambien vemos que la marca que hemos puesto en la entidad Employees aparece con lo que podemos asegurar que los datos son locales.

• Servidor Mock, si el dato no existe, la entidad no tendrá registros:

En este caso, al desactivar la opción el listado esta vacío.

Simulando un expand en mock

Una parte positiva del mock server es que el expand lo hace de manera automática, la única cosa que necesitamos es añadir tanto la entidad padre como la hija con los ficheros Json. El propio servidor se encarga de hacer la relación.

Vamos con un ejemplo practico donde queremos ver el detalle de ordenes de un empleado. A nivel de servidor, obtenemos los datos de la siguiente manera:

https://services.odata.org/V2/northwind/northwind.svc/Orders(10248)?$expand=Customer&$format=json

Esto nos devuelve la orden 10248 y los datos del cliente.

Si realizamos la llamada contra nuestro mock server no tendremos datos ya que no tenemos ninguna de las dos entidades. En el caso que nuestro mock server tenga el generador de datos aleatorios podemos obtener datos de la orden pero probablemente no obtengamos detalle del cliente.

La solución es tan fácil como añadir las entidades Products y Orders respetando las claves de unión, así pues, añadimos los siguientes ficheros:

• Fichero Orders.json, realizando la llamada https://services.odata.org/V2/northwind/northwind.svc/Orders?$filter=OrderID%20eq%2010248&$format=json y copiando solo la parte de los datos (parte gris) exceto los expands:

Es decir, este sera el resultado:

[
    {
 "OrderID": 10248, "CustomerID": "VINET", "EmployeeID": 5, "OrderDate": "\/Date(836438400000)\/", "RequiredDate": "\/Date(838857600000)\/", "ShippedDate": "\/Date(837475200000)\/", "ShipVia": 3, "Freight": "32.3800", "ShipName": "Transportes Mock Server", "ShipAddress": "Local", "ShipCity": "Reims", "ShipRegion": null, "ShipPostalCode": "51100", "ShipCountry": "France"
    }
]

• Fichero Customers.json, realizando la llamada https://services.odata.org/V2/northwind/northwind.svc/Customers?$filter=CustomerID%20eq%20%27VINET%27&$format=json y como antes solo copiando los datos:

Es decir:

[
    {
 "OrderID": 10248, "CustomerID": "VINET", "EmployeeID": 5, "OrderDate": "\/Date(836438400000)\/", "RequiredDate": "\/Date(838857600000)\/", "ShippedDate": "\/Date(837475200000)\/", "ShipVia": 3, "Freight": "32.3800", "ShipName": "Transportes Mock Server", "ShipAddress": "Local", "ShipCity": "Reims", "ShipRegion": null, "ShipPostalCode": "51100", "ShipCountry": "France"
    }
]

Ahora alteraremos algún dato para verificar que el mock server funciona, y este será el resultado.

Ahora llamamos a su asociación: http://localhost:8080/V2/Northwind/Northwind.svc/Orders(10248)/Customer

---

Como veis, el proceso de crear un mock server en local se ha simplificado mucho, básicamente resumiéndolo en un copiar – pegar de los datos.

En la próxima entrega crearemos un test simple para validar si los datos locales y los del servidor son coherentes entre si.

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