SAPUI5: Automated tests with Karma

If you develop SAPUI5 Apps locally, you will need to set up a local test runner like Selenium or Karma that automatically executes all tests. This blog post explains how you can configure automated tests with Karma and its plugin Coverage, for example when you are struggling with the tutorial step “Test Suite and Automated Testing“.

Install and configure Karma with Coverage plugin

First, follow the Karma and Coverage installation instructions of those pages:

• Test Automation (SAPUI5)
• Karma-UI5 (GitHub)
• Karma-Coverage (GitHub)

Then, create a configuration file in the working directory (outside of the webapp folder) like karma.config.js:

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

    // Used framework
    frameworks: ["ui5"],

    // URL of the local running UI5 server
    // HTML mode is recommended
    ui5: {
      url: "http://localhost:3000/[your path]",
      // define the test page when you use more than one test suite
      testpage: "webapp/test/testsuite.qunit.html",
      mode: "html",

      },

    // coverage reporter generates the coverage
    reporters: ['progress', 'coverage'],

    preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      // results will be be stored in coverage
      'webapp/*.js': ['coverage'],
      // sub folders test and localService will be ignored
      'webapp/!(test|localService)/**/*.js': ['coverage']
    },

    // optionally, configure the reporter
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    },
    
    // Browsers which should execute the tests
    browsers: ["Chrome", "Firefox"], // ChromeHeadless (no browser will open)

    logLevel: config.LOG_ERROR,   
    
    });
  };

Automated tests with Karma

You can run Karma with the command “karma start” or a test command that is configured in the package.json like “npm test“. Once Karma is running it will automatically execute all tests whenever something has been changed.

Details of the Karma configuration file

Before continuing, let us have a closer look at the Karma configuration file. At first, the used framework is defined (here: UI5), and after that, the UI5 details are configured.

If you only use one test suite ,then you do not need to configure a test page. The UI5 framework will scan the project for an available test suite and execute it.

Ensure that the SAPUI5 app is running before you start the Karma tests. If you use the UI5 tooling, then it is enough to start the UI5 server and add the appropriate URL to the configuration file.

Code coverage in automated tests with Karma

After the UI5 details, the coverage plugin is configured (see details on GitHub). For instance, all JavaScript files of the “webapp” folder and its sub folders will be analysed except the folders “test” and “localService“.

The folder “coverage” contains the results of the code coverage and a file index.html. You will find a screenshot of this coverage index page above. For example, the controller folder is highlighted yellow because the code coverage of some controller files are bad.

You can navigate to all files of the controller folder and than to a certain file, for example to the BaseController.js. The Karma Coverage plugin highlights not covered parts of the code red. Furthermore, you will see how often your tests will execute each method.

The combination of automated tests with Karma and the analysis of the code coverage is extremely helpful to find bugs immediately and identify untested code. Both Karma and the coverage plugin will improve the quality of the SAPUI5 development.

Further information at a glance
[1] Test Automation (SAPUI5)
[2] Karma-UI5 (GitHub)
[3] Karma-Coverage (GitHub)