Unable to get monaco instance loading in test framework - Karma

[parky128]

Hello again @GeoAstronaute!

I am having trouble getting the monaco global to be recognised during unit test runs with Karma+Jasmine.

Here is a replicable demo - https://stackblitz.com/edit/materia-ngx-monaco-editor-ng9-testing-fun?file=src/main.ts

Please note that I am trying to get this to work via loading in the monaco-editor using the assets entry in the angular.json file and not via a MONACO_PATH provider to a CDN in the app module - e.g.

{
   "glob": "**/*",
   "input": "node_modules/monaco-editor",
   "output": "assets/monaco-editor/"
}

In the demo app, you can switch between running the app or the tests by commenting\un-commenting the relevant sections in the main.ts file.

The app itself does not actually load the editor, I think its something to do with stackblitz not able to resolve the node_modules path in the asset glob pattern in the angular.json file as when im running this for real in my actual application locally it works fine.

Changing the stackblitz to use the MONACO_PATH provider approach via CDN, does as expected load up the editor fine when running the app. BUT, the tests still fails where it cannot find the monaco instance.

See here - https://stackblitz.com/edit/materia-ngx-monaco-editor-ng9-tests-cdn?file=src/app/app.component.ts

Have you got any suggestions about how I can get this library (or monaco-editor more specifically) to play nicely with the testing framework?

[jmarc-roy]

Hi @parky128! You are correct I never manage to make it worked on Stackblitz without loading monaco-editor through MONACO_PATH pointing to the CDN. I'm able to test my components that uses this library on my side, I just make sure that the monaco is loaded in the beforeEach hook. I created a small repository showing how to achieve it (unfortunately I was not able to make it work on Stackblitz): example repo. Hope it helps you!