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