Skip to main content

Module 26: Testing in SAPUI5

Testing ensures that SAPUI5 applications are stable, maintainable, and upgrade-safe.
In enterprise projects, testing is not optional—it is critical for quality and CI/CD readiness.

This module covers:

  • Unit testing with QUnit
  • Integration testing with OPA5
  • Mock servers
  • Test-driven development (TDD)
  • Code coverage

1. Why Testing Matters in UI5​

Benefits of Testing​

  • Prevent regressions
  • Validate business logic
  • Enable safe refactoring
  • Support CI/CD pipelines
SAP Reality

Most production UI5 bugs are caused by missing tests, not framework issues.

2. Unit Testing with QUnit​

What is QUnit?​

QUnit is the default unit testing framework for SAPUI5:

  • Lightweight
  • JavaScript-based
  • Integrated with UI5

What to Unit Test​

  • Formatter functions
  • Utility methods
  • Controller helper logic
  • Model logic (JSONModel)
Rule

Unit tests should not depend on backend services.

QUnit Test Structure​

QUnit.module("Formatter Tests");

QUnit.test("Amount formatter", function (assert) {
  var sResult = formatter.formatAmount(100);
  assert.equal(sResult, "100.00", "Formatted correctly");
});

Running QUnit Tests​

/webap/test/unit/unitTests.qunit.html
Tip

Unit tests run fast and are executed frequently.

3. OPA5 Integration Tests​

What is OPA5?​

OPA5 is used for:

  • End-to-end UI testing
  • Simulating user interactions
  • Validating navigation and flows

What to Test with OPA5​

  • App startup
  • Navigation between views
  • Button clicks
  • Form submission
  • Table interactions

OPA5 Test Example​

opaTest("Should see the main page", function (Given, When, Then) {
  Given.iStartMyApp();
  Then.onTheMainPage.iSeeThePage();
});
Key Difference

QUnit tests logic, OPA5 tests behavior.

4. Mock Servers​

Why Mock Servers?​

Mock servers:

  • Simulate OData services
  • Remove backend dependency
  • Enable offline testing

UI5 MockServer​

var oMockServer = new sap.ui.core.util.MockServer({
  rootUri: "/sap/opu/odata/sap/Z_SALES_SRV/"
});
oMockServer.simulate("metadata.xml", "mockdata/");
oMockServer.start();

Benefits of Mock Servers​

  • Faster tests
  • Stable test data
  • Independent frontend development
Best Practice

Always use mock servers for unit and integration tests.

5. Test-Driven UI5 Development (TDD)​

What is TDD?​

TDD follows:

  • Write Test → Write Code → Refactor

TDD in UI5​

  • Write QUnit tests first
  • Implement controller/formatter logic
  • Refactor safely
Enterprise Advantage

TDD drastically reduces regression bugs.

6. Code Coverage​

What is Code Coverage?​

Code coverage measures:

  • How much code is tested
  • Which parts are untested

Coverage Tools​

  • Istanbul (nyc)
  • Karma (with UI5)
  • CI pipeline tools

Coverage Goals​

TypeTarget
Unit Tests70–80%
Critical Logic100%
Reality

High coverage ≠ high quality, but low coverage = risk.

7. Testing in CI/CD Pipelines​

Typical Pipeline Flow​

Commit
 ↓
Lint
 ↓
QUnit Tests
 ↓
OPA5 Tests
 ↓
Build
 ↓
Deploy
Modern Practice

Fail the pipeline if tests fail.

8. Common Testing Mistakes​

Avoid These
  • Skipping tests due to deadlines
  • Testing against real backend
  • UI-only testing without unit tests
  • Ignoring flaky tests

9. Interview-Grade Explanation​

Q: How do you test SAPUI5 applications?

Answer:

I use QUnit for unit testing controller logic and formatters, OPA5 for end-to-end integration testing, mock servers to decouple from backend services, and integrate tests into CI/CD pipelines to ensure quality and regression safety.

10. Summary​

  • QUnit handles unit testing
  • OPA5 handles integration testing
  • Mock servers decouple backend
  • TDD improves reliability
  • Code coverage highlights risk
  • Testing enables safe CI/CD

11. What’s Next?​

➡️ Module 27: Logging, Monitoring & Troubleshooting in UI5

Learning Tip

Untested UI5 code is technical debt waiting to explode.