测试无法识别 ngOnInit 组件：我的测试：我在运行测试时遇到的错误：

如何解决测试无法识别 ngOnInit 组件：我的测试：我在运行测试时遇到的错误：

我想为组件中的某些功能添加测试。 在我的组件的 ngOnInit 中，我正在调用一个与 ChWidget 服务交互的函数并且它工作正常。但测试失败，因为 ChWidget 是 undefined。

我试图模拟这一步，但对我来说效果不佳。

您能否建议是否有适当的处理方法？谢谢！

组件：

import { Component,OnInit,Input } from '@angular/core';

import { ActionsService } from '@ch-common/ch-common.module';
import { Product } from '@ch-products/product';
declare var window;

@Component({
  selector: 'ch-container-header',templateUrl: './container-header.component.html',styleUrls: ['./container-header.component.scss']
})
export class ContainerHeaderComponent implements OnInit {
  @input() container: any;

  product_group: any;

  constructor(private actions: ActionsService) { }

  ngOnInit() {
    if (this.isProductList()) {
      this.product_group = this.getGroupDetails(this.container);
    }
  }

  getGroupDetails(container) {
    var product = new Product(container.nodes[0].params.product)
    var group_id = window.ChWidget.utils.getQueryStringParam("product-group-id",document.location.href)

    return product.productBadgeIcons.find(obj => obj["group_id"] == group_id);
  }

  gotActions() {
    return (this.container.params.actions || []).length > 0;
  }
}

我的测试：

function setComponentParams(params) {
    component.container = params;
  }

  function renderComponentWithParams(params) {
    fixture = Testbed.createComponent(ContainerHeaderComponent);
    component = fixture.componentInstance;

    setComponentParams(params);
    fixture.detectChanges();
    compiled = fixture.debugElement.nativeElement;
  }


  fit('renders the show all if there is an action on the container and opens a product group page when clicking it',() => {
    var container = {
      nodes: [
        {params: {
            product: {
              group_id: '5bc56a4ee9b43a9df8491',group_name: 'Test Group'
            }
          }
        }
      ],params: {
        container_role: 'product_list',show_container_title: false,title: 'my fancy title',actions: [{type: 'openProduct',params: {id: '123'}}]
      }
    };

    renderComponentWithParams(container);
    fixture.detectChanges();

    const elem = element.querySelector('.container-action-tile');
    expect(elem).not.toBeNull();

    const actionsService = Testbed.inject(ActionsService);
    spyOn(actionsService,'performActions');


    elem.click();
    fixture.detectChanges();
    expect(actionsService.performActions).toHaveBeenCalledWith(
      [{type: 'openProducts',params: {query_params: {filtered_group_id: '5bc56a4ee9b4351aa9df8491'},title: 'Test Group'}}]
    );
  });
});

我在运行测试时遇到的错误：

Cannot read property utils of undefined

解决方法

您必须模拟 window 对象才能拥有您想要的东西。

function renderComponentWithParams(params) {
    fixture = TestBed.createComponent(ContainerHeaderComponent);
    component = fixture.componentInstance;
    
    window.ChWidget = {};
    window.ChWidget.utils = {};
    window.chWidget.utils.getQueryStringParam = () => 'the id you want';

    setComponentParams(params);
    fixture.detectChanges();
    compiled = fixture.debugElement.nativeElement;
  }

it('renders the show all if there is an action on the container and opens a product group page when clicking it') {
  ...
}

afterEach(() => {
  // Delete the ChWidget on the window because it will leak between tests.
  // Every test,you should mock it again.
  delete window.ChWidget;
});