bug(COMPONENT): AriaDescriber preExistingContainer is null in Test run

[HELiving]

Reproduction

Even in local environment, reproduction is not always consistent.

Steps to reproduce:

1. Run the unit test with <mat-icon matTooltip="toolTipValue">ToolTip</mat-icon>
2. Inside of a11y.js AriaDescriber.prototype._createMessagesContainer function
3. Sometimes preExistingContainer.parentNode is null (preExistingContainer prints
   ) and preExistingContainer.parentNode.removeChild(preExistingContainer);
4. Throws ERROR: 'Unhandled Promise rejection:', 'Cannot read property 'removeChild' of null', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', TypeError: Cannot read property 'removeChild' of null TypeError: Cannot read property 'removeChild' of null
5. Actual source code has correct guard in place https://github.com/angular/components/blob/9.2.x/src/cdk/a11y/aria-describer/aria-describer.ts#L163 preExistingContainer.parentNode!.removeChild(preExistingContainer);
6. Compiled version on local has preExistingContainer.parentNode.removeChild(preExistingContainer);
7. \node_modules\@angular\cdk\a11y\package.json has

  "__processed_by_ivy_ngcc__": {
    "es2015": "9.1.12",
    "esm2015": "9.1.12",
    "esm5": "9.1.12",
    "fesm2015": "9.1.12",
    "fesm5": "9.1.12",
    "main": "9.1.12",
    "module": "9.1.12",
    "typings": "9.1.12"
  },

Expected Behavior

No errors in Karma run.

Actual Behavior

ERROR: 'Unhandled Promise rejection:', 'Cannot read property 'removeChild' of null', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', TypeError: Cannot read property 'removeChild' of null
TypeError: Cannot read property 'removeChild' of null
    at AriaDescriber.push../node_modules/@angular/cdk/fesm5/a11y.js.AriaDescriber._createMessagesContainer (http://localhost:9876/_karma_webpack_/node_modules/@angular/cdk/fesm5/a11y.js:182:1)
    at AriaDescriber.push../node_modules/@angular/cdk/fesm5/a11y.js.AriaDescriber._createMessageElement (http://localhost:9876/_karma_webpack_/node_modules/@angular/cdk/fesm5/a11y.js:148:1)
    at AriaDescriber.push../node_modules/@angular/cdk/fesm5/a11y.js.AriaDescriber.describe (http://localhost:9876/_karma_webpack_/node_modules/@angular/cdk/fesm5/a11y.js:102:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/material/fesm5/tooltip.js:230:1
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:386:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:385:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:143:1)
    at http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:891:1
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:421:1), 'TypeError: Cannot read property 'removeChild' of null
    at AriaDescriber.push../node_modules/@angular/cdk/fesm5/a11y.js.AriaDescriber._createMessagesContainer (http://localhost:9876/_karma_webpack_/node_modules/@angular/cdk/fesm5/a11y.js:182:1)
    at AriaDescriber.push../node_modules/@angular/cdk/fesm5/a11y.js.AriaDescriber._createMessageElement (http://localhost:9876/_karma_webpack_/node_modules/@angular/cdk/fesm5/a11y.js:148:1)
    at AriaDescriber.push../node_modules/@angular/cdk/fesm5/a11y.js.AriaDescriber.describe (http://localhost:9876/_karma_webpack_/node_modules/@angular/cdk/fesm5/a11y.js:102:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/material/fesm5/tooltip.js:230:1
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:386:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:385:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:143:1)
    at http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:891:1
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:421:1)'

Environment

• Angular: "@angular/core": "^9.1.11",
• CDK/Material: "@angular/cdk": "^9.2.4",
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is really odd since we get a hold of the element through document.getElementById above which guarantees that the element is inside the DOM and it has a parentNode. There's one StackOverflow answer that claims that getElementById could return a list of nodes instead of a single one, but I wasn't able to get it to happen in any browser. I'm seeing two possibilities for the error:

1. There are multiple elements with the same ID which are tripping it up, potentially due to the element leaking between unit tests. What do you get if you run this at the end of the test console.log(document.querySelectorAll("[id='cdk-describedby-message-container']").length);?
2. The document that is injected through the DOCUMENT token is stubbed out and doesn't match the exact behavior of the native document. What are you using to run the tests? Also do you happen to have a provider with { provide: DOCUMENT } somewhere in your tests?

[HELiving]

Thank you @crisbeto I will check and get back to you with more info. Thanks for the insight.

[HELiving]

@crisbeto here are some questions and results.

1. Why isn't source code's proper !. null guard properly provided in node_modules\@angular\cdk\fesm5\a11y.js ? Instead of !.removeChild it has removeChild See below

Compiled version on local has preExistingContainer.parentNode.removeChild(preExistingContainer);

2. This might be helpful for the hints, but it's happening for all instances of mat-icon with matTooltip

Below are answers to your questions.

1. console.log(document.querySelectorAll("[id='cdk-describedby-message-container']").length); resulted in 0 for all of the errors.
2. I am using Karma with Jasmine for angular testing (Chrome headless). We have no { provide: Document } in our unit test. Should we use them?

[crisbeto]

It's weird, because we have tests for the tooltip that run with Karma and Jasmine as well and they work just fine. The ! only tells TypeScript that we think that it can't be null, but it won't change anything in the runtime code. Either way, it won't hurt to add a check for parentNode, but I'm just trying to understand how this could even happen. It might be pointing to a larger issue.

[HELiving]

That makes sense. That's why I was so puzzled as why the guard wasn't present. Got it. I will have a PR created and link to this issue. It could well be our setup, but I guess it doesn't hurt to have this added.