如何解决此错误“ AfterAll中引发了错误”

Question

我正在尝试为我的组件Empirical Component编写测试用例。我正在使用故事书来运行我的应用程序

我正在为模拟API拦截器urlToIntercept: `NOT_DEFINED/v1/product/audience/institutional/country/us/language/en/product/COMP245/empirical-percentiles-exhibit编写测试用例，在运行测试用例时出现An error was thrown in afterAll错误。 `

这是我的代码

empirical-percentiles.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { EmpiricalPercentiles, HoldingsControllerService, Snapshot } from '@trp/gdx-product-rest-client';
import { ConfigurationService, DateTimeFormattingService, LocaleService, NumberFormattingService } from '@trp/gdx-wc-core-services';
import { I18nLabelService } from '@trp/gdx-wc-core-services';
import { TableCellValue, TableColumnHeader, TableModel, TableRow } from '@trp/gdx-wc-layout';
import { EmpiricalPercentilesColumnNames } from './constants/EmpiricalPercentilesColumnNames';

@Component({
  selector: 'gdx-empirical-percentiles',
  templateUrl: './empirical-percentiles.component.html',
})
export class EmpiricalPercentilesComponent implements OnInit {
  /**
   * Which product code to fetch the Empirical Percentiles exhibit for e.g. COMP422
   */
  @Input() public productCode: string;

  @Input() public vehicle: Snapshot.VehicleTypeEnum;

  public empiricalPercentilesTable: TableModel;
  public empiricalPercentilesData: EmpiricalPercentiles;
  public title = 'Emperical Percentiles';
  public disclaimersList: string[] = [];

  constructor(
    public holdingsService: HoldingsControllerService,
    public dateTimeFormattingService: DateTimeFormattingService,
    public localeService: LocaleService,
    public configurationService: ConfigurationService,
    private numberFormattingService: NumberFormattingService,
    public i18nLabelService: I18nLabelService,
  ) {}

  public async ngOnInit() {
    await this.i18nLabelService.ready();
    this.retrieveEmpiricalPercentiles(null);
  }
  /**
   * method added to make actual API
   */
  public retrieveEmpiricalPercentiles(date: string): void {
    this.holdingsService.defaultHeaders = this.configurationService.gdxProductHttpHeaders;
    if (this.productCode) {
      const empiricalPercentilesExhibitObservable = this.holdingsService.getEmpiricalPercentilesExhibitUsingGET(
        this.localeService.audience,
        this.localeService.country,
        this.localeService.language,
        this.productCode,
        this.vehicle,
      );
      if (empiricalPercentilesExhibitObservable) {
        empiricalPercentilesExhibitObservable.toPromise().then((res: EmpiricalPercentiles) => {
          this.empiricalPercentilesData = res;
          this.initEmpiricalPercentilesTable();
        });
      }
    }
  }
  private initEmpiricalPercentilesTable(): void {
    this.empiricalPercentilesTable = TableModel.builder()
      .withColumnHeaders(this.buildTableColumnHeaders())
      .withRows(this.buildTableRows())
      .build();
    this.populateDisclaimersList();
  }

  private populateDisclaimersList(): void {
    this.disclaimersList.push(this.i18nLabelService.percentOfPortfolioDisclaimer.translation);
  }

  private buildTableColumnHeaders(): TableColumnHeader[] {
    return [
      TableColumnHeader.builder()
        .withName(this.i18nLabelService.empiricalPercentiles.translation)
        .withHideColumnIfEmpty(false)
        .build(),
      TableColumnHeader.builder()
        .withName(this.i18nLabelService.yearlyDailyDeviations.translation)
        .withHideColumnIfEmpty(false)
        .build(),
    ];
  }

  private buildTableRows(): TableRow[] {
    const tableRows: TableRow[] = [];
    for (const empiricalPercentiles of this.empiricalPercentilesData.empiricalPercentiles) {
      const tableRowCells = [
        TableCellValue.builder()
          .withValue(this.numberFormattingService.percentageNoDP(empiricalPercentiles.empiricalPercentile))
          .withSortValue(-empiricalPercentiles.empiricalPercentile)
          .build(),
        TableCellValue.builder()
          .withValue(this.numberFormattingService.general(empiricalPercentiles.yearlyValueOfDailyDeviation))
          .withSortValue(empiricalPercentiles.yearlyValueOfDailyDeviation)
          .build(),
      ];
      tableRows.push(
        TableRow.builder()
          .withCells(tableRowCells)
          .build(),
      );
    }
    return tableRows;
  }
}

empirical-percentiles.stories.ts

import { HTTP_INTERCEPTORS, HttpClient, HttpParams } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { TranslateLoader, TranslateModule, TranslateParser, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { select, text, withKnobs } from '@storybook/addon-knobs';
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { Configuration, HoldingsControllerService, Snapshot } from '@trp/gdx-product-rest-client';
import { ConfigurationService, Locale, TranslateCustomParser } from '@trp/gdx-wc-core-services';
import { LocaleService } from '@trp/gdx-wc-core-services';
import { HoldingsModule } from '../../holdings.module';
import { EmpiricalPercentilesComponent } from './empirical-percentiles.component';
import { HttpMockRequestInterceptorService } from '.storybook/HttpMockRequestInterceptor.service';

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

let locale = Locale.EN_GLOBAL;
@NgModule()
export class EmpiricalPercentilesStoriesComponent {
  constructor(private translate: TranslateService, private localeService: LocaleService) {
    localeService.languageObservable().subscribe((language) => {
      translate.use(language);
    });
    localeService.locale = locale;
  }
}

storiesOf('Product/Product Details/Holdings/Portfolio Tracking', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [
        HoldingsModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient],
          },
          parser: {
            provide: TranslateParser,
            useClass: TranslateCustomParser,
          },
        }),
      ],
      schemas: [],
      providers: [
        ConfigurationService,
        HoldingsControllerService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: HttpMockRequestInterceptorService,
          multi: true,
        },
        {
          provide: Configuration,
          useFactory: ConfigurationService.getSwaggerRestConfig,
          deps: [ConfigurationService],
          multi: false,
        },
      ],
    }),
  )
  .add('Empirical Percentile Table', () => {
    const productCode = text('Product code', 'COMP245');
    const vehicle = text('Vehicle', Snapshot.VehicleTypeEnum.ETFFUND);
    locale = select('Locale', Locale, Locale.EN_GLOBAL as any);

    HttpMockRequestInterceptorService.setInterceptValues([
      {
        urlToIntercept: `NOT_DEFINED/v1/product/audience/institutional/country/us/language/en/product/${productCode}/empirical-percentiles-exhibit`,
        jsonReplacement: {},
        jsonFunction: productCode ? getEmpiricalPercentilesData : null,
      },
    ]);

    return {
      template: `
      <gdx-empirical-percentiles
        [productCode] = "productCode"
        [vehicle] = "vehicle">
      </gdx-empirical-percentiles>`,
      component: EmpiricalPercentilesComponent,
      props: {
        productCode,
        vehicle,
      },
    };
  });
export function getEmpiricalPercentilesData(params: HttpParams) {
  return {
    empiricalPercentiles: [
      {
        empiricalPercentile: 99,
        yearlyValueOfDailyDeviation: 40,
      },

    ],
  };
}

empirical.percentiles.component.spec.ts

import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateLoader, TranslateModule, TranslateParser, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Configuration, HoldingsControllerService, Snapshot } from '@trp/gdx-product-rest-client';
import { ConfigurationService, I18nLabelService, NumberFormattingService, TranslateCustomParser } from '@trp/gdx-wc-core-services';
import { TableModule } from '@trp/gdx-wc-layout';
import { of } from 'rxjs';
import { EmpiricalPercentilesComponent } from './empirical-percentiles.component';
import { HttpMockRequestInterceptorService } from '.storybook/HttpMockRequestInterceptor.service';

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

const empiricalPercentiles = {
  empiricalPercentiles: [
    {
      empiricalPercentile: 99,
      yearlyValueDailyDeviation: 40,
    },
    {
      empiricalPercentile: 95,
      yearlyValueDailyDeviation: 35,
    },
    {
      empiricalPercentile: 90,
      yearlyValueDailyDeviation: 30,
    },

  ],
};

describe('EmpiricalPercentilesComponent', () => {
  let component: EmpiricalPercentilesComponent;
  let fixture: ComponentFixture<EmpiricalPercentilesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [EmpiricalPercentilesComponent],
      imports: [
        CommonModule,
        TableModule,
        HttpClientModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient],
          },
          parser: {
            provide: TranslateParser,
            useClass: TranslateCustomParser,
          },
        }),
      ],
      providers: [
        NumberFormattingService,
        NumberFormattingService,
        HttpClient,
        TranslateService,
        ConfigurationService,
        I18nLabelService,
        HoldingsControllerService,
        {
          provide: Configuration,
          useFactory: ConfigurationService.getSwaggerRestConfig,
          useClass: HttpMockRequestInterceptorService,
          deps: [ConfigurationService],
          multi: false,
        },
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EmpiricalPercentilesComponent);
    component = fixture.componentInstance;
    component.productCode = 'COMP245';
    component.vehicle = Snapshot.VehicleTypeEnum.ETFFUND;
    HttpMockRequestInterceptorService.setInterceptValues([
      {
        // tslint:disable-next-line:max-line-length
        urlToIntercept: `NOT_DEFINED/v1/product/audience/institutional/country/us/language/en/product/COMP245/empirical-percentiles-exhibit`,
        jsonReplacement: component.productCode ? empiricalPercentiles : null,
        jsonFunction: null,
      },
    ]);
    fixture.detectChanges();
  });

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

我需要帮助解决此错误消息并使此测试用例成功吗？