Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
César Varona
75
Annoying overlays in karma test view page
posted

Hi,

whenever I have a test that involves an IgxDialogComponent or the IgxOverlayService it produces a persistent igx-overlay dom node in the karma test runner's html page. One for every test. It's not until I manually remove these overlays that I can read the results.

I've tried the following:

  • using the NgDestroy hook to invoke onClose on every involved IgxDialogComponent, even if it has not been opened
  • using jasmine's afterEach to invoke the overlay service's detachAll method

to no avail. As a matter of fact, by debug I see the detachAll method finds no overlayInfo to run on. The array is empty.

What's that I'm missing? Could you please supply any workaround to this issue?

Kind regards

Parents
No Data
Reply
  • 140
    Verified Answer
    Offline posted

    Hello Cesar,

    Thank you for reaching out.

    Based on your description, it seems that persistent igx-overlay elements in the DOM are causing issues for you. To address this, I can suggest using a function to clear all opened overlays and reset the scroll position, which can be called before each test to ensure a clean test environment.

    Here is a sample utility method you can implement:

    export class TestUtils {
 // Clears all opened overlays and resets document scrollTop and scrollLeft
    public static clearAllOverlays() {
        const overlays = document.getElementsByClassName('igx-overlay') as HTMLCollectionOf<Element>;
        Array.from(overlays).forEach(element => {
            element.remove();
        });
        document.documentElement.scrollTop = 0;
        document.documentElement.scrollLeft = 0;
        document.body.style.overflow = 'hidden';
    }
}

    You can use it before each test and after all tests to ensure clean state.

    beforeEach(waitForAsync(() => {
    TestUtils.clearAllOverlays();
}));
afterAll(() => {
    TestUtils.clearAllOverlays();
});

    Also If you have injected IgxOverlayService into your component (e.g., constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { }), you can access it directly in tests to ensure all overlays are detached:

    const overlay = fixture.componentInstance.overlay;
overlay.detachAll();

    This combination of clearAllOverlays and overlay.detachAll() should effectively remove lingering overlays.

    If these methods do not resolve the issue, could you please provide additional details or examples of the problem, such as:

    • Specific scenarios or test cases where the overlays persist
    • Details on any custom overlays or configurations that may be in use
    • Provide sample code

    I’ll be happy to investigate further with this information.

    Best Regards,

    Arkan Ahmedov

    Infragistics

Children