如何在 SpectatorRouting 中提供服务 mock

Question

我使用 Spectator 对 Angular 组件进行了测试。尝试使用 SpectatorRouting 找到模拟服务的解决方案。我有如下简单的服务：

export class ProductService {
  constructor(private http: HttpClient) {}

  getProduct(productId: string): Observable<Product>;
}

我有如下组件：

export class ProductComponent {
  product$: Observable<boolean | Product>;

  readonly routes = routes;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService,
    private router: Router
  ) {

    this.product$ = this.route.paramMap.pipe(
      map((params) => params.get('id')),
      switchMap((val) => productService.getProduct(val)),
      catchError(() => this.router.navigate([routes.notFoundPage]))
    );
  }
}

而且我无法通过 mock ProductService 方法找到 return 值的漂亮解决方案。我实施了一个解决方案，但这很难看 :(.

const productService = {
  getProduct: () => of({}),
};

describe('ProductComponentSpectator', () => {
  let spectator: SpectatorRouting<ProductComponent>;
  const createComponent = createRoutingFactory({
    component: ProductComponent,
    params: { id: '100' },
    declarations: [
      MainProductComponent,
      DetailsProductComponent,
      SpanTooltipComponent,
    ],
    imports: [HttpClientTestingModule, RouterTestingModule],
    providers: [mockProvider(ProductService, productService)],
  });

  beforeEach(() => {
    spyOn(productService, 'getProduct').and.returnValue(of(getProduct()));
    spectator = createComponent();
  });

  it('should get brand name', () => {
    expect(spectator.query('.product-brand')).toHaveExactText('Asus');
  });
});

function getProduct(): Product {
  return {
    productId: '100',
    brand: 'Asus',
  } as Product;
}

我对这个解决方案有疑问，对我来说，在测试之上创建 const 服务和下一个 spyOn 相同的方法是一种奇怪的方法。我的直觉告诉我，这个模拟应该完全在提供者中定义（使用方法等）。 Spectator 可能提供了一种更友好的方法来模拟 SpectatorRouting 服务，但我没有找到它。

感谢您的帮助。

Answer 1

如果你想模拟它 - 你可以另外安装 ng-mocks 包，那么你就不需要 spyOn 和 getProduct.

describe('ProductComponentSpectator', () => {
  let spectator: SpectatorRouting<ProductComponent>;
  const createComponent = createRoutingFactory({
    component: ProductComponent,
    params: { id: '100' },
    declarations: [
      MainProductComponent,
      DetailsProductComponent,
      SpanTooltipComponent,
    ],
    imports: [HttpClientTestingModule, RouterTestingModule],
    providers: [
      // MockProvider from ng-mocks (capital M)
      MockProvider(ProductService, {
        getProduct: () => of({
          productId: '100',
          brand: 'Asus',
        } as Product),
      }),
    ],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

  it('should get brand name', () => {
    expect(spectator.query('.product-brand')).toHaveExactText('Asus');
  });
});

如何在 SpectatorRouting 中提供服务 mock

How to provide service mock in SpectatorRouting

testing

unit-testing

angular

spectator