类型错误:在运行我的角度测试时无法读取未定义的属性“paramMap”

问题描述

我在运行 angular 2 测试时遇到错误。以下是我收到的错误

CreateFlightComponent should send a request to create a flight
TypeError: Cannot read property 'paramMap' of undefined
TypeError: Cannot read property 'paramMap' of undefined

以下是测试类。

describe('CreateFlightComponent',() => {
  let component: CreateFlightComponent;
  let fixture: ComponentFixture<CreateFlightComponent>;
  let router: Router;

  let getCampaignSpy: jasmine.Spy;
  let createFlightSpy: jasmine.Spy;
  let navigateSpy: jasmine.Spy;
  let toastSpy: jasmine.Spy;
  let getUserSpy: jasmine.Spy;
  let getApprovalPeriodDateSpy: jasmine.Spy;
  let getTagOnsspy: jasmine.Spy;
  let myActivatedRouteObserver;
  
  beforeEach(() => {

    const  myActivatedRouteObservable = new Observable((observer) => {
      myActivatedRouteObserver = observer;
     });

  });

  beforeEach(() => {

    Testbed.configureTestingModule({
      declarations: [CreateFlightComponent],providers: [
        FlightsService,CampaignsService,ToastService,AuthenticationService,SettingsService,{
          provide: ActivatedRoute,useValue: myActivatedRouteObserver
        },{ provide: ConfigService,useClass: ConfigServiceMock }
      ],imports: [
        TranslateModule.forRoot(),RouterTestingModule,HttpClientTestingModule
      ],schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();

  });

  beforeEach(() => {
    const campaignsService = Testbed.get(CampaignsService);
    getCampaignSpy = spyOn(campaignsService,'get').and.returnValue(
      of({
        id: '123'
      })
    );

    const flightsService = Testbed.get(FlightsService);
    createFlightSpy = spyOn(flightsService,'create').and.returnValue(
      of({ id: 'f321' })
    );
    getTagOnsspy = spyOn(flightsService,'getTagOns').and.returnValue(of([]));
    spyOn(flightsService,'getTagOnTargetRecipients').and.returnValue(
      of([] as TagOnTargetRecipient[])
    );

    const toastService = Testbed.get(ToastService);
    toastSpy = spyOn(toastService,'toast');

    const authenticationService = Testbed.get(AuthenticationService);
    getUserSpy = spyOn(authenticationService,'getUser').and.returnValue(
      of({
        account: { features: [{ code: FeatureCode.PROFILES }] } as Account
      } as User)
    );

    const settingsService = Testbed.get(SettingsService);
    getApprovalPeriodDateSpy = spyOn(
      settingsService,'getApprovalPeriodDate'
    ).and.returnValue(of(moment(new Date()).add(7,'days')));

    router = Testbed.get(Router);
    navigateSpy = spyOn(router,'navigate');
  });

  beforeEach(() => {
    fixture = Testbed.createComponent(CreateFlightComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create',() => {
    expect(component).toBeTruthy();
  });



    it('should send a request to create a flight',() => {
      

      fixture.detectChanges();

      myActivatedRouteObserver.next(convertToParamMap({ id: '123' }));

      component.handleSave({ currentValue: { name: 'test' },stepIndex: 1 });
  
      expect(createFlightSpy).toHaveBeenCalledWith(
        jasmine.objectContaining({
          name: 'test',campaign: { id: '123' }
        })
      );
    });
});

以下是我的角度组件类。

export class CreateFlightComponent implements OnInit {
  campaign: Campaign;
  isLoading = true;
  isSaving = false;
  hasProfileFeature = false;
  hasLocationFeature = false;
  hasRecipientGatheringFeature = false;
  hasParameterisedContactListFeature = false;
  hasInteractiveSMSFeature = false;
  account: Account;
  inventories: Inventory[] = [];
  tagOns: TagOn[] = [];
  tagOnTargetRecipients: TagOnTargetRecipient[] = [];
  approvalPeriodStartDate: Moment;
  parameterisedContactList: ParameterisedContactList;
  addressprofile: Addressprofile;

  constructor(
    private router: Router,private route: ActivatedRoute,private translateService: TranslateService,private flightsService: FlightsService,private campaignsService: CampaignsService,private toastService: ToastService,private authenticationService: AuthenticationService,private settingsService: SettingsService
  ) {}

  ngOnInit() {
    this.route.paramMap
      .pipe(
        tap(() => (this.isLoading = true)),switchMap(paramMap =>
          combineLatest(
            this.authenticationService.getUser(),this.campaignsService.get(paramMap.get('id')),this.settingsService.getApprovalPeriodDate(),this.flightsService.getTagOns(),this.flightsService.getTagOnTargetRecipients(),this.flightsService.getInventories()
          )
        )
      )
      .subscribe(
        ([user,campaign,date,tagOns,tagOnTargetRecipients,allInventories]) => {
          this.isLoading = false;

          if (user.account) {
            this.account = user.account;
            this.inventories = this.account.inventories;

            if (this.account.features) {
              this.hasProfileFeature = this.account.features.some(
                feature => feature.code === FeatureCode.PROFILES
              );

              this.hasLocationFeature = this.account.features.some(
                feature => feature.code === FeatureCode.LOCATIONS
              );

              this.hasRecipientGatheringFeature = this.account.features.some(
                feature => feature.code === FeatureCode.RECIPIENT_GATHERING
              );

              this.hasParameterisedContactListFeature = this.account.features.some(
                feature =>
                  feature.code === FeatureCode.ParaMETERISED_CONTACT_LIST
              );

              this.hasInteractiveSMSFeature = this.account.features.some(
                feature =>
                  feature.code === FeatureCode.INteraCTIVE_SMS
              );

              this.addInteractiveSMS(this.hasInteractiveSMSFeature,allInventories,this.inventories )
            }

            if (this.account.addressprofile) {
              this.addressprofile = this.account.addressprofile;
            }
          }

          this.tagOns = tagOns;
          this.tagOnTargetRecipients = tagOnTargetRecipients;
          this.campaign = campaign;
          console.log(JSON.stringify(this.campaign));
          this.approvalPeriodStartDate = date;
        },() => {
          this.isLoading = false;
        }
      );
  }



  handleSave({
    currentValue,stepIndex
  }: {
    currentValue: Partial<Flight>;
    stepIndex: number;
  }) {
    const request: Partial<Flight> = {
      ...currentValue,campaign: this.campaign
    };
    const titleKey = 'headingS.FLIGHT_CREATED';
    let bodyKey = '';

    this.isSaving = true;

    this.flightsService
      .create(request)
      .pipe(
        switchMap(flight => {
          this.router.navigate(['/flights',flight.id,'edit'],{
            queryParams: { startStepIndex: stepIndex }
          });

          request.impressionLimit !== flight.impressionLimit
            ? (bodyKey = 'MESSAGES.IMPRESSIONS_CHANGED')
            : (bodyKey = 'MESSAGES.FLIGHT_SAVED_DRAFT');

          return request.impressionLimit !== flight.impressionLimit
            ? this.translateService.get([titleKey,bodyKey],{
                name: request.name,impressions: flight.impressionLimit
              })
            : this.translateService.get([titleKey,{
                name: request.name
              });
        })
      )
      .subscribe(
        translations => {
          this.isSaving = false;

          this.toastService.toast({
            type: 'success',title: translations[titleKey],body: translations[bodyKey],icon: 'paper-plane',timeout: 10000
          });
        },() => {
          this.isSaving = false;
        }
      );
  }

  saveAsDraft(currentValue: Partial<Flight>) {
    const titleKey = 'headingS.FLIGHT_CREATED';
    const bodyKey = 'MESSAGES.FLIGHT_SAVED_DRAFT';

    const request: Partial<Flight> = {
      ...currentValue,campaign: this.campaign,parameterisedContactList: this.parameterisedContactList,status: {
        code: FlightStatusCode.DRAFT
      }
    };

    this.isSaving = true;
    this.flightsService
      .create(request)
      .pipe(
        switchMap(flight => {
          this.router.navigate(['/flights',{
            queryParams: { startStepIndex: 1 }
          });

          return this.translateService.get([titleKey,{
            name: request.name
          });
        })
      )
      .subscribe(
        translations => {
          this.isSaving = false;
          this.toastService.toast({
            type: 'success',() => {
          this.isSaving = false;
        }
      );
  }

}

错误发生在 ngOnit 方法中的 this.route.paramMap 上。不知道这里出了什么问题。如果你能帮忙,不胜感激,谢谢

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)