SAP/karma-ui5

Preloading libraries when using HTML5 mode

brunohaller opened this issue · 5 comments

For performance reasons in our opaTests.qunit.html file I have defined

data-sap-ui-libs="sap.m, sap.ui.core, sap.ui.layout, sap.f, sap.ui.unified ,sap.ushell"

This speeds up initial startup time of our tests dramatically when I open the HTML page directly.

But once the tests are executed via karma-ui5 in HTML mode

        ui5: {
            type: "application",
            mode: "html",
            paths: {
                webapp: "webapps/appname"
            },
	    testpage: "webapps/appname/test/testsuite.qunit.html"
	}

the performance is daramatically worse and I see a lot of such requests in the console.

19 01 2023 12:13:38.758:DEBUG [middleware:source-files]: Requesting /resources/sap/ushell/Ui5NativeServiceFactory.js.map
19 01 2023 12:13:38.759:DEBUG [middleware:source-files]: Fetching /resources/sap/ushell/Ui5NativeServiceFactory.js.map
19 01 2023 12:13:38.759:DEBUG [middleware:source-files]: Requesting /resources/sap/ui/core/service/ServiceFactoryRegistry.js.map
19 01 2023 12:13:38.759:DEBUG [middleware:source-files]: Fetching /resources/sap/ui/core/service/ServiceFactoryRegistry.js.map
19 01 2023 12:13:38.760:DEBUG [middleware:source-files]: Requesting /resources/sap/ui/core/Control.js.map
19 01 2023 12:13:38.760:DEBUG [middleware:source-files]: Fetching /resources/sap/ui/core/Control.js.map
19 01 2023 12:13:38.761:DEBUG [middleware:source-files]: Requesting /resources/sap/ui/core/CustomStyleClassSupport.js.map
19 01 2023 12:13:38.761:DEBUG [middleware:source-files]: Fetching /resources/sap/ui/core/CustomStyleClassSupport.js.map

How can I troubleshoot the reason for that? Is UI5 bootstrapped somwhere else than when calling the file directly and I need to specify the libs in a different place?

Hi @brunohaller, have you already checked webapps/appname/test/testsuite.qunit.html? Does it have the same data-sap-ui-libs configuration as opaTests.qunit.html?

Hi @RandomByte thanks for the quick reply.

I was wondering about that also, actually testsuite.quint.html is more or less a dummy wrapper containing:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>QUnit TestSuite for Demo UI5 E-Recruiting App</title>
		<script src="/resources/sap/ui/qunit/qunit-redirect.js"></script>
		<script src="testsuite.qunit.js" data-sap-ui-testsuite></script>
	</head>
	<body></body>
</html>

and the corresponding JS file contains only

/* global window, parent, location */
/* eslint-disable */
window.suite = function () {
	"use strict";

	const oSuite = new parent.jsUnitTestSuite(),
		sContextPath = location.pathname.substring(0, location.pathname.lastIndexOf("/") + 1);

	oSuite.addTestPage(sContextPath + "integration/opaTests.qunit.html");

	return oSuite;
};

Do I need to change something?

When the testsuite.qunit.html is executed without karma, it works fine. But also has a different look somehow.

Directly executed:

image

Through Karma:

image

(which is more or less the same like without the testsuite wrapper)

OK actually the preloading is working most of the times, but there are problems for example that "sap.ui.core" is not preloaded in all cases, need to check that further, but does not seem to be related to karma-ui5.

Thanks for the info. Please reach out to us if you need further support in analyzing this issue.