0

I'm writing an integration test for an Angular Component / module using Jest and ngMocks.

One of the functions I'm testing uses the CDK overlay to display some important inputs that I want to select to do further steps.

However, the CDK overlay doesn't seem to appear in the rendered snapshot of the component (I assume this is due to it adding a div to the document body).

I would prefer not to mock the CDK overlay as it's an important step in the journey.

Has anyone got any ideas how I can render the CDK container within the scope of my component?

Or is there a way to change where it outputs the CDK overlay?

Or maybe there is a way to render the larger scope of the DOM rather than just the component.

Any ideas would be appreciated.

Ewan
  • 378
  • 3
  • 14
  • a cdk-overlay is not in the component (really is not in the app). Of course you can change the "parent" of any element using javascript, see, e.g. this [SO](https://stackoverflow.com/questions/60962481/is-it-possible-to-change-div-parent-using-javascript) but I not recomended – Eliseo Sep 01 '23 at 11:44

1 Answers1

0

You can use the overlay css class to debug the overlay element like this OverlayElement = fixture.debugElement.queryAll(By.css('.your-css-overlay-class'))[0];

Maruthupandian M
  • 1
  • 1