UI5 QUnit automation via headless PhantomJS browser/grunt-contrib-qunit does not work

[Former Member]

Hi, I'm having trouble with QUnit testing automation of UI5 apps via CI/CD commandline interfaces.

When one takes best-practices example code from the Documentation SDK ("Explored App") eg #/sample...testing.16/preview

Download the source code zip and extract to a local folder eg c:\test.

Configure a simple package.json at the root (above /webapp)

{
  "name": "projectName",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-qunit": ">=0.2.1"
  }
}

A grunt file (mygruntfile.js)

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        qunit: {
            all: ['webapp/test/unit/unitTests.qunit.html']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-qunit');
    grunt.registerTask('default', ['qunit']);
};

Then in the command prompt at the root, install node dependencies

npm install

And run the grunt build

grunt --gruntfile mygruntfile.js --verbose --debug

You will see PhantomJS headless browser running into several errors.

I tried to make a proof with the same tech but on a stand-alone QUnit bootstrap page and test libary (ie no SAP/UI5 code whatsoever). Interestingly, I also found errors, which could be resolved if QUnit script tag was removed from the QUnit bootstrap html page.

I think this is due to grunt-contrib-qunit injecting its own version of QUnit, and it conflicts with the instance defined in the bootstrap page.

Below is one notable error that is common to both the SAP test script scenario, and my minimal-qunit test scenario (on about line 65 of error output):

[D] ["phantomjs","error.onError","ReferenceError: Can't find variable: QUnit",[{"file":"phantomjs://code/bridge.js","line":14,"function":""}]]

With my stand-alone test, I could easily remove the bootstrap reference to qunit.js; tests would run in headless phantomJS, but would fail in Chrome. Leave it in, it works in Chrome, fails in headless phantomJS.

In the UI5 best-practices QUnit test page, QUnit is wrapped up in SAP require libraries, I don't know how to remove it.

My question to the community is
1) Is there a successful commandline automated example of running UI5 QUnit and OPA5 tests? Either directly or via the testsuite.qunit.html page. or;

2) Could anyone suggest how to possibly remove or change the QUnit reference within the unitTests.qunit.html bootstrap page and UI5?

[former_member293421]

Hi,
Even i am trying to run qunit with same gruntfile but i see that the qunit is running but not reading the test cases.

PFB the error below.

Running "qunit:all" (qunit) task

[D] Task source: D:\QUnit\SAPUI5-master\SAPUI5-master\node_modules\grunt-contrib-qunit\tasks\qunit.js

>> 0 tests completed with 0 failed, 0 skipped, and 0 todo.

>> 0 assertions (in 0ms), passed: 0, failed: 0

(node:80444) UnhandledPromiseRejectionWarning: Error: Protocol error (Page.addScriptToEvaluateOnNewDocument): Target closed.

at D:\QUnit\SAPUI5-master\SAPUI5-master\node_modules\grunt-contrib-qunit\node_modules\puppeteer\lib\Connection.js:183:56

at new Promise (<anonymous>:null:null) at CDPSession.send (D:\QUnit\SAPUI5-master\SAPUI5-master\node_modules\grunt-contrib-qunit\node_modules\puppeteer\lib\Connection.js:182:12)

at Page.evaluateOnNewDocument (D:\QUnit\SAPUI5-master\SAPUI5-master\node_modules\grunt-contrib-qunit\node_modules\puppeteer\lib\Page.js:842:24)

at Page.<anonymous> (D:\QUnit\SAPUI5-master\SAPUI5-master\node_modules\grunt-contrib-qunit\node_modules\puppeteer\lib\helper.js:112:23)

at D:\QUnit\SAPUI5-master\SAPUI5-master\node_modules\grunt-contrib-qunit\tasks\qunit.js:405:14

at processTicksAndRejections (internal/process/task_queues.js:85:5)

(node:80444) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

(node:80444) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Done.

Please help

[Former Member]

Hi, I'm happy to report answers to my own questions. A colleague jmattfeld solved the issue I originally posted about.

The answer to my question 1) is https://github.com/SAP/openui5-sample-app. However it's worth noting that this example uses OPA5 tests defined for Component-based execution rather than iFrames - this requires a code change to unit tests and not just build config. This is because the example uses Karma + Istanbul code coverage reports, and Istanbul does not support iFrames for code coverage.

The answer to my question 2) is to dynamically write the QUnit js reference for non-PhantomJS browsers:

<script>
    if (!(/PhantomJS/.test(window.navigator.userAgent))) {
      console.log('Running standalone, non-headless!');
      document.write('<script src="lib/qunit-2.4.1.js"><\/script>');
    }
</script>