如何在自定義表單控件中模擬 ngControl - Angular 單元測試

Question

我正在尋找一些關於 Angular 9 中自定義表單控件的單元測試示例。那部分constructor(@Self() private ngControl: NgControl)導致錯誤： Error: NodeInjector: NOT_FOUND [NgControl] 。 因為我需要以某種方式設置值訪問器。

我在構造函數中注入了ngControl ，因為我稍后需要在我的組件中使用ngControl 。 這就是為什么我沒有使用provide: NG_VALUE_ACCESSOR典型實現provide: NG_VALUE_ACCESSOR 。

我試圖通過以下方式嘲笑它：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        providers: [
            { provide: NgControl, useValue: new FormControlDirective([], [], [], null) }
        ],
        imports: [FormsModule, ReactiveFormsModule]
    }).compileComponents();

但是我有一個錯誤： No valid value accessor for form control with unspecified name attribute因為我不知道函數FormControlDirective第三個參數下應該是什么： valueAccessors: ControlValueAccessor[]

有誰知道我怎么能嘲笑這個？

Answer 1

嘗試像這樣嘲笑它：

let mockNgControl: any;

beforeEach(async(() => {
    mockNgControl = jasmine.createSpyObj('ngControl', ['value', /* mock other methods required here */]);
    TestBed.configureTestingModule({
        providers: [
            { provide: NgControl, useValue: mockNgControl }
        ],
        imports: [FormsModule, ReactiveFormsModule]
    }).compileComponents();

Answer 2

問題是因為我沒有在 Imports 數組中使用 CustomFormControl 導入我的模塊。 這就是它不起作用的原因。 也許它會幫助某人。