Search code examples
angularjasminekarma-jasmineangular-test

importScript and worker-html.js are failing jasmine/karma test cases


Several of my test cases fail if I run them together. Individually they all pass. After adding some debug code in jasmine.js which otherwise was throwing object thrown error, I found that all the errors related to code similar to

The list of errors is similar to Uncaught error prop: isTrusted, value: trueerror prop: message, value: Uncaught error prop: filename, value: blob:http://localhost:9882/7098c1f5-dfab-4a9e-8259-654164f3306d

The part prop: filename, value: blob:http://localhost:9882/7098c1f5-dfab-4a9e-8259-654164f3306d maps to importScripts('http://localhost:9882/ace-builds/worker-html.js');

I am not sure what to do here and how to pass the test cases when executed together.

The path is correct as I can see the file at http://localhost:9882/ace-builds/worker-html.js


Solution

  • I can't pin-point the exact issue. It might have been due to use of blob: which was added to solve The issue was around content security policy issue. However, as pointed here (do I need to set content-security policy when running jasmine/karma test cases), if it was csp then the problem should happen all the time and not randomly

    " What messages is the browser logging in the devtools console? If it’s failing because of CSP, then the browser would be logging specific error messages in the devtools console, explicitly saying what it’s blocking and why. So if you don’t see any messages in the devtools console, then you can safely rule out CSP as the cause of the failures you’re seeing. And if it were due to CSP, the failures wouldn’t be random; instead they’d be consistent. Also, adding a CSP policy to a document that doesn’t already have one isn’t going to fix anything; instead it can only cause further blocking to happen. " I did quite a few things to solve the issue 1) I changed jasmine.js to add a debug print which could give me some hint about what was going on.

    getJasmineRequireObj().ExceptionFormatter = function() {
    ...
        if(error){
               // message+=error;
                for(var propName in error) {
                  propValue = error[propName]
                  message+='\nError object: Property name: '+propName+', value: '+propValue;
                }
              }
    return message;
    };
    

    The above started printing detailed message for me. One of the prints gave me the clue that the issue is probably around worker.js files in ace.js as that was the only code I knew of which was using workers

    enter image description here

    Then in ace.js forum, I was found that I can stop using workers completely.

    " ace is trying to load webworker for syntax checking https://github.com/ajaxorg/ace/blob/master/lib/ace/worker/worker_client.js#L53, you can use session.setOption("useWorker", false) to disable it " I tried this but it didn't work. I digged further in the code and found this piece in ace.js

    function createWorker(workerUrl) {
    if (config.get("loadWorkerFromBlob")) {...}
    }
    

    So I tried to set loadWorkerFromBlob to false by calling editor.session.setOption(...) of ace but that didn't either.

    this.editor.setOptions({
      readOnly: this.readonlyFormStatus,
      loadWorkerFromBlob:false
    });
    

    I get error misspelled option loadWorkerFromBlob

    I am still figuring out why. Just to test things, I changed option object in ace.js and then my test cases started working.

    var options = {
    ....
        loadWorkerFromBlob: false,
    
    };
    

    Update-

    loadWorkerFromBlob is a global option, it can be configured with ace.config.set("loadWorkerFromBlob", false) . Maybe useWorker did not work because it was called after worker creation was attempted.