我想使用RouterTestingModule在Angular 6中运行测试。 我遇到的问题是,我总是需要为每个测试提供ActivatedRoute实例。我使用的是data,params和queryParams,实际上它们有很多重复项(例如,数据值是从路由器路径映射中获取的)。 我不是在测试导航,而是在测试使用ActivatedRoute值的业务逻辑。
我要使用真正的ActivatedRoute实现,这要归功于路由器路径和使用NavigationTo方法时将使用的url。 有这种可能性吗,还是我需要为每个测试手动设置ActivetedRoute?
我的组件:
@Component ({ selector: 'question', templateUrl: './question.component.html', styleUrls: [ './question.component.scss' ] }) export class QuestionComponent implements OnInit { isNew: boolean = true; withAnswer: boolean = false; questionId: string; questionnaireId: string; model: Question | CandidateQuestion = new Question ("", "", "", Dificulty.JUNIOR, Category.JAVA_BASICS); difficulties: string[]; categories: string[];
constructor (private activeRoute: ActivatedRoute, private router: Router,
private questionService: QuestionService, private questionnaireService: QuestionnaireService) { }
ngOnInit () {
this.difficulties = Object.keys (Dificulty).map (key => Dificulty[ key ]);
this.categories = Object.keys (Category).map (key => Category[ key ]);
this.activeRoute.data.subscribe ((routeData: Data) => {
this.isNew = !!routeData.isNew;
this.withAnswer = routeData.questionType === 'CandidateQuestion';
zip (
this.activeRoute.params.pipe (map (value => value[ "id" ])),
this.activeRoute.queryParams.pipe (map (value => value.hasOwnProperty("questionnaireId") ? value[ "questionnaireId" ]: null))
).subscribe (params => {
this.questionId = params[ 0 ];
this.questionnaireId = params[ 1 ];
if (this.withAnswer && this.questionnaireId != null) {
this.questionnaireService.findById (this.questionnaireId)
.subscribe ((questionnaire: Questionnaire) => this.model = questionnaire
.candidateQuestions
.find ((canQuestion: CandidateQuestion) => canQuestion.id === this.questionId)
);
}
if (this.questionId != null) {
this.questionService.findQuestionById (this.questionId)
.subscribe ((question: Question) => this.model = question);
}
});
});
this.questionnaireId = this.activeRoute.snapshot.queryParams[ "questionnaireId" ];
}
我的测试
describe('QuestionComponent', () => {
let component: QuestionComponent;
let fixture: ComponentFixture<QuestionComponent>;
let routes: Routes = [ {
path: 'questions', children: [
{path: 'by-id/:id', data: {questionType: "Question"}, component: QuestionComponent},
{path: 'new', data: {questionType: "Question", isNew: true}, component: QuestionComponent},
{path: 'with-answer/:id', data: {questionType: "CandidateQuestion"}, component: QuestionComponent},
]
} ];
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes(routes),
NgbModule.forRoot(),
QuestionsModule,
MaterialModule
],
providers: [
QuestionService,
QuestionnaireService,
{
provide: ActivatedRoute,
useValue: {
data: new Observable<Data>(observable => observable.next({"isNew": false, "questionType": "Question"})),
params: new Observable<Data>(observable => observable.next({"id": "1"})),
queryParams: new Observable<Data>(observable => observable.next({})),
}
}
]
});
});
it('should create', fakeAsync(() => {
fixture = TestBed.createComponent(QuestionComponent);
TestBed.get(Router).navigate([ '/questions/by-id/1' ]);
fixture.detectChanges();
component = fixture.componentInstance;
tick();
expect(component.isNew).toBeFalsy();
expect(component.withAnswer).toBeFalsy();
// expect(component.questionId).toBe(1);
}));
});