We use the standard Jasmine/Angular unit test setup for our component unit tests, using fixture = TestBed.createComponent(MyComponent); inside of the beforeEach method. Most of the time, we have no problems accessing elements using fixture.debugElement.query(By.css('myelement')); But every once in a while, we want to test the behavior of a bit of UI that is actually appended to the html body. For example, we're using a bespoke dialog service that we call from within 'MyComponent', and want to verify that it was properly loaded with the correct contents. (I know you could argue that it's outside the scope of the 'MyComponent' unit test, but let's just assume that we need to do it this way.) When I try const allHTML = fixture.debugElement.query(By.css('*')); I can see that Angular is only giving my the contents of 'MyComponent' and not the entire DOM. So, because of this, I have no way of accessing elements that may be appended to the body. Has anyone found a way to test with this limitation? Continue reading...
