Reference Library and Karma config

[AdrDen]

Hi,

I have a project where I use a custom UI5 library with some custom types.

VSC Workspace:

- zui5lib (com.ui5.zui5lib),

- zui5mainproject (com.ui5.zui5mainproject)

I added a library to the main project using a Fiori Tools task. I see some servestatic path have been added to the yaml files. In the manifest I also can see the library is referenced.

I load some custom types in my controller by resolving a dependency:

"com/ui5/zui5lib/types/CustomDateFormat".

Everything seems to work when I preview the app locally. The same when I launch my unit tests, integration test or test suite.

The problem occurs when I try to configure a karma test suite.

I started with a simple config:

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

    frameworks: ["ui5"],

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

    browsers: ["Chrome"]

  });
};

but looks like my library types cannot be loaded:

Uncaught ModuleError: Failed to resolve dependencies of 'com/ui5/zui5mainproject/test/unit/AllTests.js'

...

'com/ui5/zui5lib/types/CustomDateFormat.js': failed to load 'com/ui5/zui5lib/types/CustomDateFormat.js' from ../../resources/com/ui5/zui5lib/types/CustomDateFormat.js: 404

- Not Found

at webapp/resources/sap-ui-core.js:69:764

The request URL, which ends up with 404 is:

http://localhost:9876/base/webapp/resources/com/ui5/zui5lib/types/CustomDateFormat.js

which doesn't look correct. I thought it can be resolved with yaml file, which routes the static resources, but it doesn't work.

I tried to align the resource roots in the karma.config.js, also tried to play with the base path, but nothings works.

It would be nice if you can share your experiences with using custom libraries with karma and provide me some hints how I can load them correctly.

BR,

Adrian

[gargswati20]

@dengi7 - Did it work for you? I am facing a similar issue in my project where I need to give a reference of the custom library in my app. Both exist at some workspace. I gave a reference of the library into unitTests.qunit.html file but in the console, it says failed to load the file from the custom library. It would be great if could get any help. Thanks

[jakubhajek]

I think this will help all others bumping into this question looking for an answer.

The working solution when using a custom UI5 library, and UI5 tooling, was to remove url entry from 'ui5' property defined in karma.conf.js, as written in karma-ui5 documentation.

https://github.com/SAP/karma-ui5#url

[former_member283911]

Hi Adrian,

In your example the path the to reuse library is being loaded from should match the path in the ui5.yaml for fiori-tools-servestatic

Since the requested url is http://localhost:9876/base/zui5mainproject/webapp/resources/com/ui5/zui5lib/types/CustomDateFormat.j...

I expect the ui5.yaml should look like this.

  - name: fiori-tools-servestatic
          afterMiddleware: compression
          configuration:
              paths:
                  - path: /base/zui5mainproject/webapp/resources/com/ui5/zui5lib                    src: c:\Users\***\Desktop\***\VSC Workspace\Common SAPUI5 Library\zui5lib\src\com\ui5\zui5lib
                    fallthrough: false

If you could share the a minimal example in github it maybe a bit easier to diagnose as the folder structure is a little different to the norm it seeemsor log a support ticket at https://launchpad.support.sap.com/#incident/create for the component CA-UX-IDE and attach the project.
Regards,Austin

[AdrDen]

Hi Austin,

Thank you for your response.

Unfortunately it does not work. I tried to play with the paths in my yaml file, but without success.

I'll try to prepare some example and share it via github.

BR,

Adrian

[david_oconnor]

Hi Adrian,

I'd like to get a bit more information to help us determine what is causing the issue here. First, I'd like to double check what other setup or config you did for Karma? For example, there are some steps documented here https://ui5.sap.com/#/topic/ae448243822448d8ba04b4784f4b09a0%23loioa182676ed3714bd5b4f011eb29076f6c for using Karma to test ui5 applications.

Also, I'd like to narrow down that this issue is directly related to the reference library. Have you tried running tests in Karma without the reference library added? If not could you please try this? I just want to be sure that its not a wider problem with your Karma tests.

Kind regards,

David

The Fiori tools team

[AdrDen]

Hi David,

Thanks for your response.

I fulfilled all the prerequisites to use Karma. Here are the packages I have installed:

        "karma": "^6.3.9",
        "karma-chrome-launcher": "^3.1.0",
        "karma-coverage": "^2.0.3",
        "karma-qunit": "^4.1.2",
        "karma-sinon": "^1.0.5",
        "karma-ui5": "^2.3.4",

I created a karma.conf.js file and added the basic config as mentioned in the documentation.

When I remove the library dependency from my controller:

sap.ui.define(
    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/UIComponent",
        "sap/ui/core/routing/History",
        "sap/m/Table",
        "../model/formatter",
        "../utils/constants"
        //"com/ui5/zui5lib/types/CustomDateFormat",
        //"com/ui5/zui5lib/types/CustomDateTimeFormat"
    ],

the tests are launched and Karma seems to work fine.

I also aligned my config file to launch the testsuite:

module.exports = function (config) {
    config.set({
        frameworks: ["ui5"],
        basePath: "../",
        ui5: {
            // eslint-disable-next-line sap-no-hardcoded-url
            url: "https://sapui5.hana.ondemand.com/1.71.21",
            type: "application",
            mode: "html",
            configPath: "ui5.yaml",
            paths: {
                webapp: "zui5mainproject/webapp"
            },
            testpage: "zui5mainproject/webapp/test/testsuite.qunit.html"
        },

When the library is turned on, I get a 404 Error:

failed to load 'com/ui5/zui5lib/types/CustomDateFormat.js' from ../../resources/com/ui5/zui5lib/types/CustomDateFormat.js: 404 - Not Found

The request URL is:

http://localhost:9876/base/zui5mainproject/webapp/resources/com/ui5/zui5lib/types/CustomDateFormat.j...

which seems to be incorrect.

I tried to route this request with fiori-tools-servestatic, but without success. I feel like the middleware mentioned in my ui5.yaml file is ignored when using karma.

        - name: fiori-tools-servestatic
          afterMiddleware: compression
          configuration:
              paths:
                  - path: /resources/com/ui5/zui5lib
                    src: c:\Users\***\Desktop\***\VSC Workspace\Common SAPUI5 Library\zui5lib\src\com\ui5\zui5lib
                    fallthrough: false

The console says:

Chrome 95.0.4638.69 (Windows 10) INFO: '2021-11-18 16:19:58 [unitTests.qunit.html] Device API logging initialized - DEVICE'

Chrome 95.0.4638.69 (Windows 10) INFO: '2021-11-18 16:19:58.405800 URL prefixes set to: -  sap.ui.ModuleSystem'

Chrome 95.0.4638.69 (Windows 10) INFO: '2021-11-18 16:19:58.406000   (default) : ../../resources/ -  sap.ui.ModuleSystem'

Chrome 95.0.4638.69 (Windows 10) INFO: '2021-11-18 16:19:58.406100   'com/ui5/zui5mainproject' : ../../ -  sap.ui.ModuleSystem'

Chrome 95.0.4638.69 (Windows 10) INFO: '2021-11-18 16:19:58.406199   'test/unit' : ./ -  sap.ui.ModuleSystem'

Chrome 95.0.4638.69 (Windows 10) ERROR
  Uncaught Error: failed to load 'com/ui5/zui5lib/types/CustomDateFormat.js' from ../../resources/com/ui5/zui5lib/types/CustomDateFormat.js: 404 - Not Found
  at zui5mainproject/webapp/resources/sap-ui-core.js:107:907

  Error: failed to load 'com/ui5/zui5lib/types/CustomDateFormat.js' from ../../resources/com/ui5/zui5lib/types/CustomDateFormat.js: 404 - Not Found
      at makeNestedError (zui5mainproject/webapp/resources/sap-ui-core.js:92:37)

The info messages here point to the unitTests.qunit.html resources:

        <script
            id="sap-ui-bootstrap"
            src="../../resources/sap-ui-core.js"
            data-sap-ui-resourceroots='{
                "com.ui5.zui5mainproject": "../../", 
                "test.unit": "./"
            }'
        ></script>
...

When I run my testsuite directly, without using a karma plugin, everything seems to work fine locally and the library is routed correctly. The same in case I launch my unitTests page outside of the testsuite.

I don't know if it's could be a problem with:

a) Fiori Tools

b) UI5 Karma

c) Karma config and missing resource roots.

I tried to specify the resource roots in different ways, but without success.

Best regards,

Adrian