在 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有我试图排除的依赖

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，显示了此运行情况。我还添加了另一个测试来显示无错误的初始化。

我希望这有帮助！