Блог

При обновлении с Angular 9.x до Angular 10.x все спецификации компонентов, использующих компонент quill-editor , ngx-quill не загружаются.

Это производится стандартным тестом angular:

     it('should create', () => {
        expect(component).toBeTruthy();
    });
 

Это сообщение об ошибке, которое они выдают:

  FAIL   my-project  src/(...)/my-component.spec.ts
  ● Test suite failed to run

    Call retries were exceeded

      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)
 

Это происходит, когда в наших представлениях используется простой редактор quill:

 <quill-editor formControlName="myControlName"></quill-editor>
 

(комментирование или удаление этой строки позволяет тестам пройти)

Ранее было достаточно издеваться над модулем quill с jest.mock помощью вызова:

 jest.mock('quill');
 

но теперь тесты просто завершаются неудачей…

мы загружаем QuillModule в общий компонент и импортируем этот общий компонент по мере необходимости:

 @NgModule({
    declarations: [],
    imports: [
        QuillModule.forRoot({
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                ],
            },
        }),
    ],
    exports: [QuillModule],
})
export class QuillEditorModule {}
 

В итоге мы издевались над модулем QuillEditorModule с помощью jest во всех файлах спецификаций, используя наш модуль-оболочку:

Убедившись, что это находится в верхней части ..spec.ts файла, мы смогли отключить модуль ngx-quill и его используемый селектор компонентов «quill-editor», и все тесты снова прошли:

 import { QuillEditorModuleStub } from 'src/(my-app-paths)/quill-editor.module.stub';

jest.mock(`src/(my-app-paths)/quill-editor.module`, () => ({
    __esModule: true,
    QuillEditorModule: QuillEditorModuleStub,
}));
 

Компонент-заглушка

 import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'quill-editor',
    template: '',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => QuillEditorComponentStub),
            multi: true,
        },
    ],
})
export class QuillEditorComponentStub implements ControlValueAccessor {
    registerOnChange(fn: any): void {}

    registerOnTouched(fn: any): void {}

    writeValue(obj: any): void {}
}
 

Модуль заглушки:

 import { NgModule } from '@angular/core';
import { QuillEditorComponentStub } from './quill-editor-component.stub';

@NgModule({
    declarations: [QuillEditorComponentStub],
    exports: [QuillEditorComponentStub],
})
export class QuillEditorModuleStub {}