Running SAPUI5 Unit Tests Headlessly in SAP Business Application Studio

Die Herausforderung

Das Ziel ist klar:

SAPUI5 Unit- und Integrationstests sollen automatisch vor dem Deployment ausgeführt werden.

Das SAP Business Application Studio läuft in einem containerisierten Setup. Standardmäßig steht der CLI keine Headless-Browser-Runtime (z. B. Chromium) zur Verfügung.

Das bedeutet: Es gibt keinen Browser, der sich einfach per Kommandozeile steuern lässt.

Klassische Headless-Ansätze werden dadurch schnell unpraktisch.

Was BAS jedoch zuverlässig bereitstellt:

• Node.js
• Den UI5 Development Server

Die Lösung liegt also darin, diese Stärken gezielt zu nutzen.

Der Ansatz

Die Idee:

1. QUnit-Tests über ui5 serve im Browser ausführen
2. QUnit die Ergebnisse an einen Node.js-Prozess zurückmelden lassen
3. Den Prozess beenden mit:
   • 0, wenn alle Tests erfolgreich sind
   • 1, wenn mindestens ein Test fehlschlägt
4. Den Build – und damit das Deployment – automatisch abbrechen

Der zentrale Baustein: Custom UI5 Server Middleware

Custom Middleware zum Abfangen der QUnit-Ergebnisse

Eine schlanke Node.js-Middleware wartet auf einen POST-Request aus dem Browser, sobald QUnit fertig ist.

module.exports = ({ log }) => { 

  return (req, res, next) => { 

    if (req.method === "POST" && req.url === "/__qunit_done__") { 

      let body = ""; 

      req.on("data", (chunk) => { 
        body += chunk.toString(); 
      }); 

      req.on("end", () => { 
        try { 
          const details = JSON.parse(body); 

          log.info(
            `QUnit finished: ${details.passed}/${details.total} passed, failed=${details.failed}`
          );

          if (details.failed > 0) {
            log.info("Aborting deployment because of failed tests.");
          }

          res.statusCode = 200;
          res.end("OK");

          setTimeout(() => process.exit(details.failed === 0 ? 0 : 1), 50);

        } catch (e) {

          log.error("Failed to parse QUnit payload");
          res.statusCode = 400;
          res.end("Bad Request");
          setTimeout(() => process.exit(1), 50);

        }
      });

      return;
    }

    next();
  };
};
  

Was passiert hier?

• Lauscht auf POST /__qunit_done__
• Empfängt die QUnit-Zusammenfassung als JSON
• Loggt das Ergebnis im Terminal
• Beendet den Node.js-Prozess mit:
  • exit(0) → Tests erfolgreich
  • exit(1) → Tests fehlgeschlagen

Der Exit-Code ist entscheidend, damit npm-Skripte und CI/CD-Pipelines korrekt reagieren können.

Testergebnisse aus QUnit senden

QUnit wird über QUnit.done erweitert.

function isBackground(): string | null {
  return new URLSearchParams(window.location.search).get("background");
}

QUnit.done((details) => {
  void fetch(`/__qunit_done__`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(details)
  }).then((res) => {
    if (res.ok && isBackground()) {
      window.close();
    }
  });
});
  

Was macht dieser Code?

• Nutzt QUnit.done, das nach Abschluss aller Tests ausgelöst wird
• Sendet die Testergebnisse (passed, failed, total) an die Middleware
• Schließt optional das Browserfenster im Background-Modus

Der Query-Parameter background unterscheidet zwischen:

• Interaktiven Testläufen
• Automatisierten, CI-ähnlichen Ausführungen

Middleware in UI5 registrieren

specVersion: "4.0"
kind: extension
type: server-middleware
metadata:
  name: qunit-done
middleware:
  path: ./script/qunitDone.js
  

Sobald Tests über den UI5 Development Server ausgeführt werden, wird die Middleware automatisch geladen.

Orchestrierung über npm-Skripte

{
  "scripts": {
    "unit-test:background": "echo 'Running unit tests ...' && ui5 serve --port 8081 -o test/unit/unitTests.qunit.html?background=true --config ui5-test.yaml",
    "build": "npm run lint && npm run unit-test:background && ui5 build --clean-dest",
    "deploy": "npm run build && fiori deploy --config ui5-deploy.yaml && rimraf archive.zip"
  }
}