Question

我是单元测试Angular应用程序的新手，我正在尝试测试我的第一个组件。实际上，我正在尝试测试实际组件使用的抽象基类，因此我在规范的基础上创建了一个简单的Component，并将其用于测试它。但是有一个要处理的依赖项（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);
    }
}

此外，您需要更改测试函数中引发的错误的方式。请参阅详细讨论here。正如您在讨论中所看到的，也有很多方法可以执行此操作，这是使用匿名函数的一种简单方法：

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

这是一个有效的StackBlitz，显示了此运行情况。我还添加了另一个测试以显示无错误的初始化。

我希望这会有所帮助！

Answer 2

是的，如果您的类没有constructor() {}装饰器，则在构造函数中编写super()并调用@injectable()就可以解决该问题。

 constructor() {
    super();
}

Answer 3

您想测试GenFormInputComponentBase，为什么不使用TestFormInputComponent来测试它

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

或者与LanguageService提供程序类似：

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

在Jasmine单元测试中：无法解析TestFormInputComponentBase

3 个答案: