2

我在我的应用程序中使用了@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： 在此处输入图像描述

我正在努力让摩纳哥被 Karma 正确接收，至少我相信这是我的问题。

安装包时也安装@materia-ui/ngx-monaco-editor了monaco-editor，所以我也尝试将 monaco-editor 脚本添加到我的 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 路径，而是在 angular.json 的assets应用程序和测试项目配置部分的属性中添加一个条目，以确保 monaco-editor 库是提供

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

所以，虽然我试图在 angular.json 文件的测试部分提供这个，但它似乎在实际测试运行中没有被以某种方式使用？

4

1 回答 1

3

我设法让一个例子为你工作，但它是丑陋的 IMO，但它完成了工作。

丑陋的部分是我找不到在 stackblitz 中全局导入 monaco 的方法，但是我通过 CDN 让它工作：

providers: [
    {
      provide: MONACO_PATH,
      useValue: "https://unpkg.com/monaco-editor@0.19.3/min/vs"
    }
  ]

注意：如果您使用下面的 Angular 8，您必须考虑到我发现这张票会强制您使用低于 0.18.1 的版本。

最后是实际测试，因为我通过 CDN 进行了测试，不幸的是，您必须考虑获取资源的时间，因此您必须引入一些超时并让 jasmine 知道事情何时完成：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule],
      providers: [],
      declarations: []
    }).compileComponents();

    setTimeout(() => {
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    }, 1000);
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
  }));

  it("Should create component", async(done: DoneFn) => {
    setTimeout(() => {
      expect(component).toBeTruthy();
      done();
    }, 2000);
  });

  it("Check if code in editor is populated", async(done: DoneFn) => {
    setTimeout(() => {
      let code = component.monacoComponent.editor.getValue();
      expect(code).toEqual(expectedCode);
      done();
    }, 2000);
  });

这是一个带有测试的工作堆栈闪电战，享受吧！

于 2020-12-16T22:56:39.810 回答