Test file :
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();
});
});
First I am trying to import my ToastNotificationService then I have an error that say
R3InjectorError(DynamicTestModule)[ToastNotificationService -> Overlay -> Overlay]: NullInjectorError: No provider for Overlay!
Then I am trying to import the OverlayModule but I have the following error
inject() must be called from an injection context
Answer
So as per the first error states that you have imported overlayModule and added in the imports array but didn't add in the providers array.
- You need to inject your service like this inside beforeEach
toastNotificationService = TestBed.inject(ToastNotificationService);Hope it works, happy coding!