Mocking Angular Material modules do not work

[sinedied]

I'm trying to mock Angular Material modules to avoid using NO_ERRORS_SCHEMA when doing shallow components testing, but it's not working for me.

At first, I tried mocking my material.module.ts which is just a module that re-exports all material individual modules, and it's not working at all as I get "unknown element <mat-card" and such.

Then I tried mocking all material modules individually with modules.map((module: any) => MockModule(module)); and use that in my shared.module.mock.ts, a module that I import in all my unit tests for convenience. This module imports & exports the mocked material modules.
This works better as I don't get "unknown element" errors, but this time I'm stuck on this error:

 TypeError: Cannot read property 'indexOf' of undefined
            at HammerGesturesPlugin.isCustomEvent (./node_modules/@angular/platform-browser/fesm5/platform-browser.js?:1639:102)
            at HammerGesturesPlugin.supports (./node_modules/@angular/platform-browser/fesm5/platform-browser.js?:1577:75)
            at EventManager._findPluginFor (./node_modules/@angular/platform-browser/fesm5/platform-browser.js?:911:26)
            at EventManager.addEventListener (./node_modules/@angular/platform-browser/fesm5/platform-browser.js?:882:27)
            at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.listen (./node_modules/@angular/platform-browser/fesm5/platform-browser.js?:1190:34)

Obviously, this error is not there when I use the real material modules.

Do you have any idea or workaround for this?

Thanks!

[satanTime]

Hi @sinedied,

thanks for for the report. Could you create simple project and share its code to demonstrate the error?

[sinedied]

Sure! Is a stackblitz project ok for you?

[satanTime]

it's perfect

[sinedied]

It was hard to reproduce, but here it is: https://stackblitz.com/edit/ng-mock-material-issue?file=src%2Fapp%2Fshared.module.mock.ts

Seems it's somehow related to the mat-side-nav module, as if you comment this part from app.component.html it's working.

[satanTime]

Thanks I'll check next days and prepare fix.

[sinedied]

I have pinpointed the issue to the MatSliderModule: if I exclude only this one from the mocks, it's working -> https://stackblitz.com/edit/ng-mock-material-issue-7ecjrd?file=src%2Fapp%2Fshared.module.mock.ts

[getsaf]

This is an issue with auto-mocking the HAMMER_GESTURE_CONFIG. You will want to use the "real" version of that provider. MockModule auto-mocks the config which causes HammerJS to crap out when it tries to access a property on the config.

I would recommend enhancing MockModule in a way that allows you to specify which items in the module you would like to avoid mocking.

As a hack, you can re-provide a dummy config on top of your mocked modules like so:

@NgModule({
  imports: [
    // ...
    ...MaterialModulesMocks
  ],
  /* This is a hack.. You really want to avoid doing this at the MockModule level */
  providers: [
    {provide: HAMMER_GESTURE_CONFIG, useValue: {events: []}}
  ],
  // ...
})

Here's your first StackBlitz with this hack applied:
https://stackblitz.com/edit/ng-mock-material-issue-nnceql?file=src/app/shared.module.mock.ts

[getsaf]

Wanted to follow up that @satanTime has enhancements planned for MockModule that should address this in the future.

See his comment about it on another issue.

[satanTime]

Hi guys, sorry for the long delay, work, you know. Checking the thing.

[satanTime]

So, I was trying to reproduce the issue with angular 9, but no luck. The stackblitz.com sample is too old and I can't run it easily on node 12, it requires node 10.

[satanTime]

Should be fixed by #80