En este tutorial usaremos Jazmín y Karma para implementar pruebas unitarias del código de interfaz de JavaScript escrito en SAP UI5.
El ejemplo que descargó como requisito previo para este tutorial contiene una clase de servicio que los socios comerciales cargan desde el fin de semana. Está localizado en webapp/service/businesspartners.js:
sap.ui.define([], function () {
"use strict";
...
getBusinessPartner: function (businessPartnerId) {
return jQuery.get(this.getBusinessPartnerUrl(businessPartnerId));
},
...
});
El código usa jQuery para enviar una solicitud GET al servicio posventa de su aplicación. Promete volver a la lista de socios comerciales.
La siguiente es una prueba para esta clase de servicio:
"use strict";
sap.ui.define(["sdk-tutorial-frontend/service/businessPartner"], function (
BusinessPartnersService
) {
//Create test data used for mocking and in the assertion
var testBusinessPartners = [
{
BusinessPartner: "1",
LastName: "Doe",
},
];
function getBusinessPartnersPromise() {
var jQueryPromise = new $.Deferred();
return jQueryPromise.resolve(testBusinessPartners);
}
describe("Business Partner Service", function () {
it("gets a business partner", function (done) {
spyOn(jQuery, "get").and.returnValue(getBusinessPartnersPromise());
BusinessPartnersService.getBusinessPartner('1').then(function (
businessPartners
) {
expect(businessPartners).toEqual(testBusinessPartners);
expect(jQuery.get).toHaveBeenCalled();
done();
});
});
});
});
En Jasmine, todas las pruebas están envueltas en un bloque. En este caso se trata de una prueba asincrónica. Primero bromeamos sobre la llamada del fin de semana en el spyOn método sobrescribiendo el método jQuery.ajax. Entonces llamamos al BusinessPartnerService implementado en el archivo anterior. En la devolución de llamada, evaluamos las declaraciones y marcamos la finalización de la prueba asincrónica. Enviamos la prueba frontend-unit-tests/tests/service/businesspartners.jasmine.js.
Para realizar esta prueba puedes crear una nueva página html que realizará las pruebas o puedes usar Karma. Usaremos Karma para poder pasar la prueba desde la línea de comandos. Para ejecutar Karma necesitas instalar e instalar Node.js package.json en la raíz de tus proyectos.
El es package.json puede parecer:
{
"name": "businesspartner-manager-cf",
"version": "1.0.0",
"description": "Frontend Tests",
"scripts": {
"ci-frontend-unit-test": "karma start frontend-unit-tests/karma.conf.js --watch=false --single-run=true"
},
"author": "SAP",
"private": true,
"devDependencies": {
"yargs": "^6.6.0",
"jasmine": "^2.99.0",
"karma": "^3.1.4",
"karma-chrome-launcher": "^2.1.1",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.2",
"karma-junit-reporter": "^1.2.0",
"karma-openui5": "^0.2.3"
}
}
En la sección de scripts, define el comando ci-frontend-unit-test utilizado para ejecutar las pruebas unitarias con Karma. En parte devDependencies usted especifica las dependencias necesarias para realizar las pruebas. Los instalaste para ejecutar npm install en una ventana de terminal.
La única pieza que falta es la configuración de Karma. Para configurar Karma, crea un archivo llamado karma.conf.js en la carpeta frontend-unit-tests. Este archivo es el siguiente:
const argv = require("yargs").argv;
module.exports = function (config) {
config.set({
basePath: "../",
frameworks: ["openui5", "jasmine"],
openui5: {
path:
"https://sapui5.hana.ondemand.com/1.42.9/resources/sap-ui-cachebuster/sap-ui-core.js",
useMockServer: false,
},
client: {
openui5: {
config: {
theme: "sap_bluecrystal",
resourceroots: {
"sdk-tutorial-frontend":
"./base/application/src/main/webapp/address-manager/",
},
},
},
},
files: [
{
pattern: "./application/src/main/webapp/address-manager/**",
served: true,
included: false,
},
"./frontend-unit-tests/tests/**/*.jasmine.js",
],
browsers: [argv.headless ? "ChromeHeadless" : "Chrome"],
reporters: ["junit", "progress", "coverage"],
preprocessors: {
"webapp/**/*.js": ["coverage"],
},
junitReporter: {
outputDir: "s4hana_pipeline/reports/frontend-unit", // results will be saved as $outputDir/$browserName.xml
outputFile: "Test.frontend.unit.xml", // if included, results will be saved as $outputDir/$browserName/$outputFile
suite: "", // suite will become the package name attribute in xml testsuite element
useBrowserName: true, // add browser name to report and classes names
nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
},
coverageReporter: {
// specify a common output directory
dir: "s4hana_pipeline/reports/frontend-unit/coverage",
includeAllSources: true,
reporters: [
{
type: "html",
subdir: "report-html/ut",
},
{
type: "lcov",
subdir: "report-lcov/ut",
},
{
type: "cobertura",
subdir: ".",
file: "cobertura.frontend.unit.xml",
},
],
instrumenterOptions: {
istanbul: {
noCompact: true,
},
},
},
});
};
Primero, definimos la ruta raíz, que en nuestro caso es la carpeta raíz del proyecto. Sa openUi5 bloque, podemos definir dónde se encuentran los recursos para SAP UI5 y desde dónde se pueden descargar. En el bloque de cliente puede definir las raíces de recursos de los componentes de su aplicación, como lo hace en su index.html de su aplicación SAP UI5.
El camino debe ser
./base/hacia adelante y luego apunta a la carpeta que contiene sufrontendcódigo de posicionamiento. No se encuentra en la ruta real del sistema de archivos. En la sección de archivos, especifica la ubicación de los archivos que necesita para probar. De forma predeterminada, todos los archivos se cargan para realizar las pruebas. Por lo tanto, especificamos al código de la aplicación que no está incluido pero que se sirve cuando se requiere en una prueba.
En algunos descriptores, indicamos que también queremos que los resultados se almacenen en el junit formato y también queremos almacenar los datos de la cubierta del código. Estos descriptores se definen en las otras secciones. En preprocesadores definimos todo eso js Los archivos deben procesarse previamente para calcular la cobertura del código. Formato y ubicación del junit y los descriptores de cobertura de código se especifican en las secciones coverageReporter y junitReporter.
La estructura de carpetas final debería ser la siguiente:
Ahora puede ejecutar los siguientes comandos en la carpeta raíz del proyecto para realizar sus pruebas. Iniciará un caso de Chrome y realizará las pruebas.
npm install
npm run ci-frontend-unit-test
Debería ejecutar las pruebas y mostrar los resultados en la terminal:
Por lo general, todo se ejecuta sin una interfaz de usuario en un proceso de entrega. Así que abrir un navegador normal no funcionaría. Sin embargo, la mayoría de los navegadores ofrecen un modo sin cabeza. El navegador se inicia sin una interfaz de usuario.
También puede ejecutar el script con un navegador sin cabeza:
npm run ci-frontend-unit-test -- --headless.