Table of Contents

• About
• Quickstart
  • Installation
  • Configuration
  • Execution
• Karma configuration requirements
• Options
  • url
  • type
  • paths
  • mode
    • html
    • script
  • testpage
  • config
  • tests
• License

About

This Karma plugin helps testing your UI5 projects.

Note: This project has been renamed from karma-openui5 to karma-ui5 with the v1.0.0 release.
Checkout the Migration Guide to see how to upgrade.
The karma-openui5 documentation can be found on the 0.x branch.

Quickstart

Installation

First you need to install the Karma CLI globally

npm install -g karma-cli

You can find more information on installing Karma here.

Next you need to add karma and karma-ui5 as devDependencies:

npm install --save-dev karma karma-ui5

To start a browser you also need to install a launcher, e.g. for Chrome

npm install --save-dev karma-chrome-launcher

Configuration

To configure this plugin you need to add two things to your karma.conf.js:

1. Specify "ui5" in the list of frameworks
2. Set a URL for serving the UI5 resources
   • Note: This can be omitted when using the UI5 Tooling

This is an example karma.conf.js file that is sufficient for most projects:

module.exports = function(config) {
  config.set({

    frameworks: ["ui5"],

    ui5: {
      url: "https://openui5.hana.ondemand.com"
    },

    browsers: ["Chrome"]

  });
};

Execution

With the above configuration karma will by default run all tests in Chrome and listen for changed files to execute them again (watch mode)

karma start

For CI testing you can run Chrome in headless mode and execute the tests only once using the singleRun option:

module.exports = function(config) {
  config.set({

    // ...

    browsers: ["ChromeHeadless"],
    singleRun: true

  });
};

The options can also be set via CLI arguments

karma start --browsers=ChromeHeadless --singleRun=true

For more information, see the "Configuration File" documentation from Karma.

Karma configuration requirements

There is an important requirement for this plugin that needs to be respected in order to use this plugin

• basePath must point to your project root. This is the default, when your karma.conf.js is in the project root.
  It is required for the type detection and automatic inclusion of your project files.

Options

All configuration options need to be defined in an ui5 object in your Karma configuration:

module.exports = function(config) {
  config.set({

    ui5: {

    }

  });
};

url

Type: string
CLI: --ui5.url

The URL where UI5 should be loaded from.

When omitted and the project contains a ui5.yaml file, the UI5 Tooling will be used as server middleware.

Example:

ui5: {
  url: "https://openui5.hana.ondemand.com"
}

type

Type: enum ("application" / "library")

Defines the project type.
If not set, it is automatically detected based on

• type defined in ui5.yaml or
• existing folders
  • "webapp" => application
  • "src" / "test" => library

Example:

ui5: {
  type: "application"
}

paths

Type: object

Custom path mappings for project folders based on the type.
Option is only to be used when the automatic type detection does not work as the project uses a different folder structure.

Example application:

ui5: {
  type: "application",
  paths: {
    webapp: "src/main/webapp"
  }
}

Example library:

ui5: {
  type: "library",
  paths: {
    src: "src/main/js",
    test: "src/test/js"
  }
}

mode

Type: enum ("html" / "script")
Default: "html"

Configures the mode how tests should be executed.

html

The HTML mode runs QUnit testsuites and testpages in a separate context.
It has built-in support for QUnit. The QUnit adapter must not be used in combination with this mode. Other framework plugins must also not be used and instead required libraries such as sinon should be loaded within the test.

ui5: {
  mode: "html"
}

Specific config options

• testpage

script

The script mode includes the UI5 bootstrap script, allows to pass UI5 config and loads your test modules.
You need to also install and configure an adapter for your test framework such as QUnit, to enable test execution and reporting.

ui5: {
  mode: "script"
}

Specific config options

• config
• tests

testpage

Type: string
CLI: --ui5.testpage
Specific to "html" mode

A file path pointing to a testpage or testsuite that should be executed.
The path needs to be relative to the project root.

If not set, the project is scanned for available testsuites (testsuite.qunit.html).
When exactly one is found, it will be used as testpage. Otherwise all found pages are printed out and one needs to be configured manually.

Example:

ui5: {
  mode: "html",
  testpage: "webapp/test/myTestPage.qunit.html"
}

config

Type: object
Specific to "script" mode

Configuration for the UI5 bootstrap.

Example:

ui5: {
  mode: "script",
  config: {
    bindingSyntax: "complex",
    compatVersion: "edge",
    async: true,
    resourceRoots: {
      "sap.ui.demo.todo": "./base/webapp"
    }
  }
}

tests

Type: Array
Specific to "script" mode

List of test modules that should be loaded (via sap.ui.require).
If not provided, the test files must be included in the karma files config to load them with <script> tags.

Example:

ui5: {
  mode: "script",
  tests: [
    "sap/ui/demo/todo/test/unit/AllTests",
    "sap/ui/demo/todo/test/integration/AllJourneys"
  ]
}

License

(c) Copyright 2019 SAP SE or an SAP affiliate company

Licensed under the Apache License, Version 2.0 - see LICENSE.