如果'ongoingStatus'是指令输入，请确保指令由当前模块导入。单元测试错误

Question

我面临这样的问题，如果"ongoingStatus"是指令输入，请确保当前模块导入了该指令。("contact"rol="tabpanel"aria labeledby="药丸contact tab">][ongoingStatus]="projects">出于安全原因，不允许绑定到事件属性"ongoingStatus"，请使用(goingStatus(=。。。如果"ongoingStatus"是指令输入，请确保当前模块导入了该指令。("contact"rol="tabpanel"aria labeledby="药丸contact tab">

失败：模板分析错误：出于安全原因，不允许绑定到事件属性"ongoingStatus"，请使用(goingStatus(=。。。如果"ongoingStatus"是指令输入，请确保当前模块导入了该指令。("contact"rol="tabpanel"aria labeledby="药丸contact tab">][ongoingStatus]="projects">

projects.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { AllProjectsComponent } from './all-projects.component';
import { RouterTestingModule } from '@angular/router/testing';
import { ProjectsService } from './../../../../services/projects/projects.service';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
import { ProjectObject } from './../../../../models/project.model';
import { MockProjectService } from './../../../../mock/mockProject.service';

describe('AllProjectsComponent', () => {
let component: AllProjectsComponent;
let fixture: ComponentFixture<AllProjectsComponent>;
let service : ProjectsService;
let response;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AllProjectsComponent ],
imports: [  RouterTestingModule, GooglePlaceModule ],
providers: [
{
provide: ProjectsService,
useClass: MockProjectService
},],
schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AllProjectsComponent);
component = fixture.componentInstance;
service = TestBed.get(ProjectsService);
response = {
project: {
projectType : "public",
status : "open",
}    
} as ProjectObject
fixture.detectChanges();
});
it('', () => {
component.ngOnInit();
expect(service.getAllprojects()).toBe(response);
})

project.component.html

<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<app-ongoing-projects [ongoingStatus]="projects "></app-ongoing-projects>
</div>

项目组件.ts

import { ProjectObject } from './../../../../models/project.model';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ProjectsService } from './../../../../services/projects/projects.service';
import { GooglePlaceDirective } from 'ngx-google-places-autocomplete';
import { Address } from 'ngx-google-places-autocomplete/objects/address';

@Component({
selector: 'app-all-projects',
templateUrl: './all-projects.component.html',
styleUrls: ['./all-projects.component.scss']
})
export class AllProjectsComponent implements OnInit {

// public projects;
public projects: ProjectObject[];
@ViewChild('placesRef', { static: false }) placesRef: GooglePlaceDirective;
public option = {
types: ['(cities)'],
componentRestrictions: { country: 'IN' }
};
public location: string;
public licenseType: string;
public resetBtn = false;
public loading = true;
validdata: boolean;
constructor( private projectsService: ProjectsService) { }
ngOnInit(): void {
this.projectsService.getAllprojects().subscribe((data) => {
console.log(data);
this.projects = data;
this.loading = false;
if (!this.projects['0']) {
this.validdata = true;
}
});
}
public handleAddressChange(address: Address) {
this.location = address.formatted_address;
console.log(address)
}

}

Answer 1

您需要导入app-ongoing-projects组件的模块，或者将其类添加到TestBed.configureTestingModule的declarations数组中。

如果它非常复杂，并且您更喜欢模拟它——考虑一下ng-mocks库的使用，它在以下情况下会有所帮助：https://www.npmjs.com/package/ng-mocks

然后你可以做

TestBed.configureTestingModule({
declarations: [ AllProjectsComponent, MockComponent(OngoingProjectsComponent) ],
imports: [  MockModule(RouterModule), MockModule(GooglePlaceModule) ],
providers: [
{
provide: ProjectsService,
useClass: MockProjectService
},],
})
.compileComponents();