Angular 2 : jasmin test case for activateRoute. snapshot.queryParams [""]

Question

我正在使用 ActiveRoute 从 url 读取一些值。

http://localhost:4200/project-test/#/add?orderId=156&customerNumber=431

我有单独的组件来读取 ngOnInit() 方法中的值。

片段:

...

constructor(private activatedRoute: ActivatedRoute,
          public sanitizer: DomSanitizer,
          private customerAPIService : CustomerAPIService) {}

ngOnInit() {

   this.orderId = this.activatedRoute.snapshot.queryParams["orderId"];
   ...
}

测试用例:

import { TestBed } from '@angular/core/testing';
import { CreateCustomer } from './create-customer.component';
import { ActivatedRoute } from '@angular/router';
import { CustomerAPIService } from "app/repackaging/service/customer.api.service";

describe('CreateCustomer', () => {
  let component;

  let mockActiveRoute;
  let mockCustomerAPIService;
  let mockQueryParamMap;

  beforeEach(() => {

     mockQueryParamMap = jasmine.createSpyObj('mockQueryParamMap', ['queryParams']);
     mockActiveRoute = {queryParamMap: mockQueryParamMap};

    TestBed.configureTestingModule({
        providers : [
           {
              provide: ActivatedRoute,
              useFactory: () => mockActiveRoute
           },
           {
              provide: CustomerAPIService,
              userFactory: () => mockCustomerAPIService
           }
      ],
      declarations :[
          CreateCustomer
      ]
    });

        component = TestBed.createComponent(CreateCustomer).componentInstance;
    });

    it('should run ngOninit function', function () {
       component.ngOnInit();

       ...

    });
});

我在编写测试时遇到错误

TypeError: undefined is not an object (evaluating 'this.activatedRoute.snapshot.queryParams') http://localhost:9876/_karma_webpack_/main.bundle.js (第 350 行)

Answer 1

扩展@peeskillet 的回答。

有一个愚蠢的错误，就像我在模拟 queryParamMap 而不是 snapshot.queryparams。

http://localhost:4200/project-test/#/add?order=156&customerNumber=431

下面是mock activeroutes.snapshot.queryparams["order"]的解决方案。

 let orderId; 
 let customerNumber;

 let mockActiveRoute;
 ...

 beforeEach(() => {
    ...

    mockActiveRoute = {
      snapshot: {
        queryParams: {
          order: orderId,
          customerNumber: customerNumber
        }
      }
   };
});