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

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 <div></div>) 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]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}