angular - 如何测试 ActivatedRoute

Question

我是 Angular 的新手。我试图提高我的代码覆盖率，但我似乎无法通过 this.route.snapshot.paramMap 取回“用户名”的值。这是我的课。当我运行测试时，我收到的消息是 A username value is required 即使在我设置 component.username = 'test@example.com' 之后也是如此；请协助

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Constants } from '../../app.constants';
import { AuthService } from '../../services/auth/auth.service';
import { AlertService } from '../../services/alert/alert.service';
import * as _ from 'underscore';

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

  status: string;
  error: string;
  username: string;
  token: string;

  constructor(private route: ActivatedRoute, private authService: AuthService, private alertService: AlertService) { }

  activate() {

    this.username = this.route.snapshot.paramMap.get('username');
    this.token = this.route.snapshot.paramMap.get('token');

 if (_.isEmpty(this.username)) {
  this.error = 'A username value is required '
} else if (_.isEmpty(this.token)) {
  this.error = 'A token value is required '
}
}
ngOnInit() {
this.activate();

这是我的测试

fdescribe('ActivateComponent', () => {
let component: ActivateComponent;
let fixture: ComponentFixture<ActivateComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ ActivateComponent ],
  imports: [ RouterModule, RouterTestingModule, HttpClientTestingModule, MatDialogModule ],
  providers: [ AuthService, AlertService, ActivatedRouteMock,]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ActivateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should check if username and token have been filled out', () => {
component.username = 'test@example.com';
component.token = '12345';
console.log(component.username);
// expect(component).toBeTruthy();
});
});

Answer 1

已解决，需要在providers中添加以下内容:

   beforeEach(async(() => {
   TestBed.configureTestingModule({
   declarations: [ ActivateComponent ],
   imports: [ RouterModule, RouterTestingModule, HttpClientTestingModule, 
    MatDialogModule ],
   providers: [ AuthService, AlertService , ActivatedRouteMock,
    {
      provide: ActivatedRoute,
      useValue: {
        snapshot: {
          paramMap: convertToParamMap({
            username: 'test@example.com',
            token: '23435'
          })
        }
      }
    }]
  })
  .compileComponents();
  }));

   beforeEach(() => {
  fixture = TestBed.createComponent(ActivateComponent);
   component = fixture.componentInstance;
  fixture.detectChanges();
    });

  it('should check if username and token have been filled out', () => {
 // component.username = 'test@example.com';
 // component.token = '12345';
 // TestBed.get(ActivatedRoute);
 console.log(component.username);
 console.log(component.token);
 // expect(component).toBeTruthy();
 });
 });