Я использую @ materia-ui / ngx-monaco-editor в своем приложении, и мне не удается распознать monaco
глобально установленную библиотеку во время выполнения модульных тестов с Karma + Jasmine.
Составная часть
import {
Component,
OnInit } from '@angular/core';
import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
import { filter, take } from 'rxjs/operators';
@Component({
selector: 'my-editor',
templateUrl: './my-editor.component.html',
styleUrls: ['./my-editor.component.scss']
})
export class MyEditorComponent implements OnInit {
public modelUri: monaco.Uri;
constructor(private monacoLoaderService: MonacoEditorLoaderService) {
this.monacoLoaderService.isMonacoLoaded$.pipe(
filter(isLoaded => isLoaded === true),
take(1),
).subscribe(() => {
this.monacoLoaderService.isMonacoLoaded$
.pipe(
filter(isLoaded => isLoaded),
take(1)
)
.subscribe(() => {
// This seems to be the issue during test runs - monaco is not defined
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({});
})
})
}
}
В моем файле компонента monaco
разрешается из интерфейсов, представленных в @materia-ui/ngx-monaco-editor
:
Спецификация испытаний
describe('MyEditorComponent Test Suite:', () => {
let component: MyEditorComponent;
let fixture: ComponentFixture<MyEditorComponent>;
let tagsService: TagsService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyEditorComponent],
providers: [ MonacoEditorLoaderService ],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('Should create component', () => {
expect(component).toBeTruthy();
});
});
Когда дело доходит до модульного тестирования моего компонента, я получаю сообщение об ошибке от Karma, сообщающее мне, что monaco не определено:
Я изо всех сил пытаюсь заставить Карма правильно подобрать Монако, по крайней мере, я считаю, что это моя проблема.
При установке @materia-ui/ngx-monaco-editor
также устанавливается monaco-editor
пакет, поэтому я также попытался добавить скрипт monaco-editor в свойство scripts раздела конфигурации моего тестового проекта в моем файле angular.json:
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"stylePreprocessorOptions": {
"includePaths": [
"src/styles",
"node_modules"
]
},
"scripts": [
"node_modules/monaco-editor/esm/vs/editor/editor.main.js"
],
...
}
}
Это не имеет значения, так каков же здесь правильный подход, чтобы правильно зарегистрировать monaco
и включить его в мой набор тестов?
ОБНОВЛЕНИЕ
Основываясь на предложении @ Lucho, я воспроизвел свою проблему в следующем Stackblitz - https://stackblitz.com/edit/materia-ngx-monaco-editor-ng9-zdpc2h?file=src/app/app..component.ts
Обратите внимание, что в отличие от подхода Lucho, я не предоставляю MONACO_PATH для пути к CDN, а вместо этого добавляю запись в свойство assets
моего приложения и раздел конфигурации тестового проекта файла angular.json, чтобы гарантировать наличие библиотеки monaco-editor. доступен
{
"glob": "**/*",
"input": "node_modules/monaco-editor",
"output": "assets/monaco-editor/"
}
Итак, хотя я пытаюсь предоставить это в тестовом разделе файла angular.json, кажется, что он каким-то образом не используется в реальном тестовом прогоне?