在测试中使用实际的ActivatedRoute

时间:2018-09-15 16:41:05

标签: angular

我想使用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);
  }));
});

0 个答案:

没有答案