在 Karma 中导入 OverlayModule 不起作用

Question

测试文件：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AlertsComponent } from './alerts.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpProvider, StorageProvider, ToastMessageProvider } from '@ln/radix-providers-ng12';
import { AlertServiceProvider } from 'src/shared/providers/alert-service-provider.service';
import { ActivatedRoute, Router } from '@angular/router';
import { NotificationModule, ToastNotification, ToastNotificationService } from 'ln-components-angular/notification';
import { AlertResultProvider } from 'src/shared/providers/AlertResult.provider';
import { SelectedItemService } from '../../../../../_shared-business/src/services/selected-item.service';
import { AlertSupportLinksService } from '../../../../../_shared-business/src/services/AlertSupportLinks.service';
import { PaginationServiceProvider } from '@ln/pagination-module-ng12';
import { BackGroundService } from 'src/shared/services/background.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { SharedModule } from 'src/shared/shared.module';
import { HttpClientModule } from '@angular/common/http';
import { IconsRegistry } from 'ln-components-angular/icon';
import { ModalService } from 'ln-components-angular/modal';
import { Overlay, OverlayModule } from '@angular/cdk/overlay';


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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientModule,
        OverlayModule
      ],
      declarations: [AlertsComponent],
      providers: [
        StorageProvider,
        AlertServiceProvider,
        { provide: HttpProvider, useClass: HttpProvider },
        { provide: ToastNotificationService, useClass: ToastNotificationService },
        AlertResultProvider,
        SelectedItemService,
        AlertSupportLinksService,
        IconsRegistry,
        PaginationServiceProvider,
        ModalService,
        BackGroundService,
      ]
    })
      .compileComponents();
  });

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

  it('should change active tab on click', () => {
    const tabElements = fixture.debugElement.queryAll(By.css('li'));

    // Assuming the first tab is active initially
    expect(tabElements[0].classes['active']).toBeTrue();

    // Click the second tab
    tabElements[1].triggerEventHandler('click', null);

    fixture.detectChanges();

    // The first tab should no longer be active, and the second tab should be active
    expect(tabElements[0].classes['active']).toBeFalse();
    expect(tabElements[1].classes['active']).toBeTrue();
  });
});

首先我尝试导入我的 ToastNotificationService 然后出现错误

R3InjectorError（DynamicTestModule）[ToastNotificationService -> 覆盖 -> 覆盖]： NullInjectorError：没有 Overlay 提供程序！

然后我尝试导入 OverlayModule 但出现以下错误

inject() 必须从注入上下文调用

Answer 1

因此，根据第一个错误，您已导入overlayModule并添加到imports数组中，但没有添加到providers数组中。

2. 你需要像这样在 beforeEach 中注入你的服务

toastNotificationService = TestBed.inject(ToastNotificationService);

希望它有效，编码愉快！