在 Jasmine 單元測試中：無法解析 TestFormInputComponentBase 的所有參數

Question

我是 Angular 應用程序單元測試的新手，我正在嘗試測試我的第一個組件。 實際上，我正在嘗試測試實際組件使用的抽象基類，因此我在我的規范中基於它創建了一個簡單的組件，並使用它來測試它。 但是有一個依賴處理（ Injector ）並且我沒有正確地將它存根，因為當我嘗試運行測試時我收到這個錯誤：

Can't resolve all parameters for TestFormInputComponentBase

但我不確定我錯過了什么？ 這是規范：

import { GenFormInputComponentBase } from './gen-form-input-component-base';
import { Injector, Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

// We cannot test an abstract class directly so we test a simple derived component
@Component({
    selector: 'test-form-input-component-base'
})
class TestFormInputComponentBase extends GenFormInputComponentBase {}

let injectorStub: Partial<Injector>;

describe('GenFormInputComponentBase', () => {
    let baseClass: TestFormInputComponentBase;
    let stub: Injector;

    beforeEach(() => {
        // stub Injector for test purpose
        injectorStub = {
            get(service: any) {
                return null;
            }
        };

        TestBed.configureTestingModule({
            declarations: [TestFormInputComponentBase],
            providers: [
                {
                    provide: Injector,
                    useValue: injectorStub
                }
            ]
        });

        // Inject both the service-to-test and its stub dependency
        stub = TestBed.get(Injector);
        baseClass = TestBed.get(TestFormInputComponentBase);
    });

    it('should validate required `field` input on ngOnInit', () => {
        expect(baseClass.ngOnInit()).toThrowError(
            `Missing 'field' input in AppFormInputComponentBase`
        );
    });
});

這是我要測試的GenFormInputComponentBase類：

import { Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { GenComponentBase } from './gen-component-base';

export abstract class GenFormInputComponentBase extends GenComponentBase
    implements OnInit {
    @Input() form: FormGroup | null = null;
    @Input() field: string | null = null;

    @Input() label: string | null = null;
    @Input() required: boolean | null = null;

    @Input('no-label') isNoLabel: boolean = false;

    ngOnInit(): void {
        this.internalValidateFields();
    }

    /**
     * Validates that the required inputs are passed to the component.
     * Raises clear errors if not, so that we don't get lots of indirect, unclear errors
     * from a mistake in the template.
     */
    protected internalValidateFields(): boolean {
        if (null == this.field) {
            throw Error(`Missing 'field' input in AppFormInputComponentBase`);
        }

        if (null == this.label && !this.isNoLabel) {
            throw Error(
                `Missing 'label' input in AppFormInputComponentBase for '${
                    this.field
                }'.`
            );
        }

        if (null == this.form) {
            throw Error(
                `Missing 'form' input in AppFormInputComponentBase for '${
                    this.field
                }'.`
            );
        }

        return true;
    }
}

並且GenComponentBase具有我試圖GenComponentBase的依賴項

import { Injector } from '@angular/core';
import { LanguageService } from 'app/shared/services';

declare var $: any;

export abstract class GenComponentBase {
    protected languageService: LanguageService;

    constructor(injector: Injector) {
        this.languageService = injector.get(LanguageService);
    }

    l(key: string, ...args: any[]) {
        return this.languageService.localize(key, args);
    }
}

任何幫助，將不勝感激。 謝謝！

更新：

通過向TestFormInputComponentsBase添加一個構造函數，我可以將LanguageService存根，它可以像那樣正常工作。 但是，如果我嘗試刪除Injector ，它將被忽略，並且無論如何它都會嘗試使用真正的注入器。

@Component({})
class TestFormInputComponent extends GenesysFormInputComponentBase {
    constructor(injector: Injector) {
        super(injector);
    }
}

describe('GenesysFormInputComponentBase (class only)', () => {
    let component: TestFormInputComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                TestFormInputComponent,
                {
                    provide: Injector,
                    useObject: {}
                }
            ]
        });

        component = TestBed.get(TestFormInputComponent);
    });

    it('should validate required field inputs on ngOnInit', () => {
        expect(() => component.ngOnInit()).toThrowError(
            `Missing 'field' input in GenesysFormInputComponentBase.`
        );
    });
});

由於提供的模擬/存根注入器是一個空對象，我預計會出現一些錯誤。 但是我從真正的注射器中得到了一個錯誤。 注射器不能被嘲笑嗎？

    Error: StaticInjectorError(DynamicTestModule)[LanguageService]: 
    StaticInjectorError(Platform: core)[LanguageService]: 
    NullInjectorError: No provider for LanguageService!

Answer 1

有許多不同的方法可以解決這個問題，但是您可以在 TestFormInputComponent 中調用super()時將其存根，如下所示：

class TestFormInputComponent extends GenFormInputComponentBase {
      constructor() {
          let injectorStub: Injector = { get() { return null } };
          super(injectorStub);
    }
}

此外，您需要更改測試函數中拋出的錯誤的方式。 請參閱此處的詳細討論。 正如您在該討論中看到的，也有很多方法可以做到這一點，這里有一個使用匿名函數的簡單方法：

it('should validate required `field` input on ngOnInit', () => {
    expect(() => baseClass.ngOnInit()).toThrowError(
        `Missing 'field' input in AppFormInputComponentBase`
    );
});

這是一個顯示此運行的有效StackBlitz 。 我還添加了另一個測試來顯示無錯誤的初始化。

我希望這有幫助！

Answer 2

是的，如果您的類沒有@injectable()裝飾器，則編寫一個constructor() {}並在構造函數中調用super()可以解決該問題。

 constructor() {
    super();
}

Answer 3

您想測試GenFormInputComponentBase那么為什么不在沒有TestFormInputComponent情況下測試它

   TestBed.configureTestingModule({
        declarations: [
            GenFormInputComponentBase,
        ],
        providers: [
          {
                provide: LanguageService,
                useValue: {}
          }
        ]
    });

或者用 LanguageService 提供者看起來像：

        providers: [
          LanguageService,
          {
                provide: Injector,
                useValue: {}
          }
        ]