bug(cdk/a11y): Observable in HighContrastModeDetector constructor is undefined

[cjlawson02]

trafficstars

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.0.1

Description

Caused by #25088

This line fails during Karma testing because the observe call before it returns undefined

Stack trace:

    TypeError: Cannot read properties of undefined (reading 'subscribe')
        at new HighContrastModeDetector (node_modules/@angular/cdk/fesm2020/a11y.mjs:2348:40)
        at Object.factory (node_modules/@angular/cdk/fesm2020/a11y.mjs:2406:1)
        at R3Injector.hydrate (node_modules/@angular/core/fesm2020/core.mjs:9258:35)
        at R3Injector.get (node_modules/@angular/core/fesm2020/core.mjs:9146:33)
        at injectInjectorOnly (node_modules/@angular/core/fesm2020/core.mjs:4778:33)
        at Module.ɵɵinject (node_modules/@angular/core/fesm2020/core.mjs:4782:12)
        at Object.useFactory (node_modules/@angular/material/fesm2020/core.mjs:105:1)
        at Object.factory (node_modules/@angular/core/fesm2020/core.mjs:9345:38)
        at R3Injector.hydrate (node_modules/@angular/core/fesm2020/core.mjs:9258:35)
        at R3Injector.get (node_modules/@angular/core/fesm2020/core.mjs:9146:33)

Reproduction

I'm unsure how to completely reproduce, and I'm unable to share the code due to NDA.

Expected Behavior

HighContrastModeDetector successfully constructs

Actual Behavior

Constructor fails on only 2 of my components at the line linked above due to the expected Observable<BreakpointObserver> being undefined.

Environment

• Angular: Fails on 14.0.2, 14.1.3, and 14.2.0-rc.0
• CDK/Material: CDK
• Browser(s): Chrome Headless Karma/Jasmine
• Operating System (e.g. Windows, macOS, Ubuntu): Amazon Linux 2

[KasimJasarevic]

The same issue after upgrading angular version 13 -> 14.2.0.

[cjlawson02]

The same issue after upgrading angular version 13 -> 14.2.0.

This is relieving to hear. Do you know how to reproduce this?

[crisbeto]

As far as I can tell, there's no case where BreakpointObserver.observe would return undefined. Is it possible that you're mocking out the BreakpointObserver in your tests?

[cjlawson02]

Yeah it looked weird to me too. I'm not mocking it out though. I did notice that it truly did return undefined somehow while running debug on my test and setting some breakpoints in node_modules, I can dig deeper tomorrow.

[KasimJasarevic]

The same issue after upgrading angular version 13 -> 14.2.0.

This is relieving to hear. Do you know how to reproduce this?

In my case I'm using ng-mocks library link. Until now it works fine if I mocked everything except component I'm testing. Among other things, that means all material modules will be mocked.. So after upgrading to v14.2.0 the mentioned error happened. I had to exclude all Material modules from mocking process to make it work.

[cjlawson02]

@KasimJasarevic Yes I'm using ng-mocks too. Sounds like this issue should be opened with them

[cjlawson02]

Mocking MatTooltip with ng-mocks was causing the problem for me. I'm not sure if this is an Angular issue or not

[crisbeto]

We can't do much about what ng-mocks is stubbing out the service with. Even if we added a null check, what's to say that some other app won't mock it out with a different invalid value?

[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.}