nbTooltip in Angular test

[All4Gis]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [ ] feature request

Issue description

Hi, great job.

It's weird what happens to me I think, but in the unit tests, the tooltips don't work, for example this one in the component:

            <a
              id="infoLinkButton" 
              href="#"
              (click)="goToInfoLink(infoLink)"
              nbTooltip="Show Information"
            >

is simple, show a Tooltip in this element, but in the test, the hover show this in the browser console:

   at NbOverlayContainerAdapter._createContainer (VM1669 vendor.js:137939)
    at NbOverlayContainerAdapter.getContainerElement (VM1669 vendor.js:10816)
    at NbOverlay._createHostElement (VM1669 vendor.js:12704)
    at NbOverlay.create (VM1669 vendor.js:12671)
    at NbOverlayService.create (VM1669 vendor.js:138534)
    at NbDynamicOverlay.createOverlay (VM1669 vendor.js:150909)
    at NbDynamicOverlay.show (VM1669 vendor.js:150870)
    at VM1669 vendor.js:151109
    at Object.next (VM1669 vendor.js:210257)
    at SafeSubscriber.Subscriber._next (VM1669 vendor.js:210197)

Test code (only important part)

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        BrowserAnimationsModule,
        MaterialModule,
        HttpClientTestingModule,
        NbLayoutModule,
        RouterTestingModule,
        NbTooltipModule,
        NbThemeModule.forRoot(),
        NbToastrModule.forRoot()
      ],
      declarations: [MissionCardComponent],
      providers: [{ provide: Router, useValue: router }],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents()
  })

I guess I have to import a module in the test, any provider?Thanks

Other information:

Browser : Chrome, Version 92.0.4515.107 (Official Build) (64-bit) Angular: 12.1.4 Nebular: 8.0.0 Node: node v14.15.5 (npm v6.14.11)

[bboydflo]

whenever I have issues like that I try to mock the problematic component using ng-mocks

of course the issue should be fixed but I used ng-mocks as a temporary solution. I hope it helps

[All4Gis]

whenever I have issues like that I try to mock the problematic component using ng-mocks

of course the issue should be fixed but I used ng-mocks as a temporary solution. I hope it helps

I will have to look at this module, because I can't get it to work, thank you very much for the suggestion.

[yggg]

You need to wrap your test component elements in the nb-layout to make overlay components (like window, dialog, tooltip, popover, etc.) work. See an example here: https://github.com/akveo/nebular/blob/a3b5ae5f7ea3356abb49737f4f46311ac0ffb7f4/src/framework/theme/components/tooltip/tooltip.spec.ts#L23

[All4Gis]

Thanks for the answer, the problem is that if I wrap all the components in a nb-layout all the styles are broken. Does anyone know of an alternative?

[khalifa005]

After struggling with this for a while, I figured it out: you have to import NbThemeModule just once, in the app module, and avoid loading it in submodules.

That, along with using a single , fixes the issue.

You're welcome.