Mocking Angular Material modules do not work

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!

[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

[satanTime]

Should be fixed by https://github.com/ike18t/ng-mocks/pull/80