OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Importing OverlayModule in Karma not working

  • Thread starter Thread starter guiz
  • Start date Start date
G

guiz

Guest
Test file :

Code:
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

<p>Test file :</p>
<pre><code>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();
});
});
</code></pre>
<p>First I am trying to import my ToastNotificationService then I have an error that say</p>
<blockquote>
<p>R3InjectorError(DynamicTestModule)[ToastNotificationService -> Overlay -> Overlay]:
NullInjectorError: No provider for Overlay!</p>
</blockquote>
<p>Then I am trying to import the OverlayModule but I have the following error</p>
<blockquote>
<p>inject() must be called from an injection context</p>
</blockquote>
 
Top