Question

我在测试Angular2中的组件时遇到问题并继续收到错误：

Error: This test module uses the component RegisterComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test.

我已经为测试模块包含了所有必需的提供程序，导入等，并且在测试模块实例化之后我也调用了'compileComponents（）'，因此我不确定为什么会发生此错误。

这是我的代码：

待测组件：

import { Component, OnInit, ViewChild } from "@angular/core";
import { AuthenticationService } from "../../services/authentication.service";
import { UserService } from "../../services/users/user.service";
import { formHelper } from "../../helpers/formHelper";
import { AccountService } from "../../services/accounts/account.service";
import { AlertService } from "../../services/alert/alert.service";
import { messages, titles } from "../../helpers/messages";
import { ShowHideInputDirective } from "../../directive/show-hide-input.directive";

@Component({
    moduleId: module.id,
    selector: 'register',
    templateUrl: '/app/views/users/register.component.html'
})

export class RegisterComponent implements OnInit {
    isSuper:Boolean = false;

    formDefaults = {
        userGroups: [],
        accounts: []
    };

    model: any = {
        name: '',
        email: '',
        password: '',
        confirm_password: '',
        userGroup: null,
        account: null
    };
    loading:boolean = false;
    error = '';
    private showPass = false;

    @ViewChild(ShowHideInputDirective) input: ShowHideInputDirective;

    constructor(
        private _authenticationService: AuthenticationService,
        private _userService: UserService,
        private _accountService: AccountService,
        private _alertService: AlertService
    ) {
        if(this._authenticationService.authLevel === 0 || this._authenticationService.authLevel === 1) {
            this.isSuper = true;
        }
    }

    ngOnInit() {
        // Get the super users
        this._userService.getUserLevels({})
            .subscribe((response) => {
                this.formDefaults.userGroups = formHelper.addSelectOption(response.extras.groups);
            });

        this._accountService.getAccounts({})
            .subscribe((response) => {
                this.formDefaults.accounts = formHelper.addSelectOption(response.extras.accounts);
            });
    }

    register() {
        this._accountService.registerNewAccount(this.model)
            .subscribe((response) => {
                if(response.success === false) {
                    this._alertService.error(titles.error, response.extras.error.message);
                } else {
                    this._alertService.success(titles.success, messages.register.success);
                }
            });
    }

    toggleShowPassword() {
        this.showPass = !this.showPass;
        if (this.showPass){
            this.input.changeType("text");
        }
        else {
            this.input.changeType("password");
        }
    }

}

测试规范：

import {async, ComponentFixture, fakeAsync, inject, TestBed} from "@angular/core/testing";
import { RegisterComponent } from "../../../components/users/RegisterComponent";
import { AuthenticationService } from "../../../services/authentication.service";
import { HttpModule } from "@angular/http";
import { AlertService } from "../../../services/alert/alert.service";
import { UserService } from "../../../services/users/user.service";
import { AccountService } from "../../../services/accounts/account.service";
import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
import {User} from "../../../classes/User.class";

let comp:    RegisterComponent;
let fixture: ComponentFixture<RegisterComponent>;
let userService: UserService;


const AuthenticationServiceStub = {
    logout() {}
};

const AlertServiceStub = {
    getAlert() {},
    success() {},
    error() {},
    info() {},
    warn() {},
    alert() {},
    clear() {}
};

const AccountServiceStub = {
    getAccounts() {},
    registerNewAccount() {}
};

const UserServiceStub = {
    getUserLevels() {},
    getUsers() {}
};


describe('Component: RegisterComponent', () => {

    beforeEach((async() => {
        TestBed.configureTestingModule({
            declarations: [RegisterComponent],
            providers: [
                { provide: AuthenticationService, useClass: AuthenticationServiceStub },
                { provide: AlertService, useValue: AlertServiceStub },
                { provide: UserService, useValue: UserServiceStub },
                { provide: AccountService, useValue: AccountServiceStub }
            ],

            imports: [
                HttpModule
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]

        }).compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(RegisterComponent);
                comp = fixture.componentInstance;
                fixture.detectChanges();
            });

    }));


    describe('ngOnInit', (async() => {
        it('should subscribe to the user service Observable on init', () => {
            expect(comp).toBeDefined();
            userService = TestBed.get(UserService);
            expect(comp).toBeDefined();
        });
    });
});

任何人都可以看到为什么我仍然收到此错误？感谢

使用外部templateUrl测试组件时出错

0 个答案: