How to Dependency Inject an Object with Cypress Component Testing

[ptletski]

When a component requires, for example, a logging service object that is dependency injected (DI), how is that component tested using Cypress Component testing?

Consider:

@Component({
  selector: 'app-not-authorized',
  templateUrl: './not-authorized.component.html',
  styleUrls: ['./not-authorized.component.scss']
})
export class NotAuthorizedComponent implements OnInit  {
  constructor(private logger: LoggingService) { }

  ngOnInit() {
    this.logAccess();
  }
...
}

How is Cypress accommodating DI parameters/objects for component creation?

For completeness, here is the error we get when running our component test.

1) NotAuthorizedComponent
       mount:
     NullInjectorError: R3InjectorError(DynamicTestModule)[LoggingService -> LoggingService]:
  NullInjectorError: No provider for LoggingService!
      at NullInjector.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:13946:27)
      at R3Injector.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:14113:33)
      at R3Injector.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:14113:33)
      at NgModuleRef.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:24641:33)
      at Object.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:24318:35)
      at lookupTokenUsingModuleInjector (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:6183:39)
      at getOrCreateInjectable (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:6295:12)
      at ɵɵdirectiveInject (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:17219:12)
      at NodeInjectorFactory.NotAuthorizedComponent_Factory [as factory] (ng:///NotAuthorizedComponent/ɵfac.js:4:50)
      at getNodeInjectable (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:6390:44)

[jordanpowell88]

You would do it like so:

cy.mount(NotAuthorizedComponent, {
  providers:[MyService],
  imports: [MyModule],
  declarations: [MyChildComponent]
})

[ptletski]

What if I wanted to mock the service?

[ptletski]

Derive the service from an abstract class, then use a mock that implements the abstract class. Lastly, define the proper provider.

// logging-base.ts
abstract class LoggingBase { ...}

in your test file:

  beforeEach(() => {
    cy.mount('<test-comp></test-comp>', {
      providers: [        
         ...
        {
          provide: LoggingBase,
          useClass: MockLoggingService
        },
      ...
      ],      
      declarations: [TestedComponent],
    });
  });

[muhamedkarajic]

I would like still to be able to interact with the service e.g. execute a function in it etc. I know its not ment for that using e2e tests but for component testing in my case it makes sence and I don't see any workaround cause they don't offer you the test bed to get services.

[jordanpowell88]

@muhamedkarajic we are working on an more official way of handling injecting and interacting with Angular services in Component Testing and should be released soon. But in the meantime you can access TestBed directly in your component tests to do what you are describing

[klofi]

we are working on an more official way of handling injecting and interacting with Angular services in Component Testing and should be released soon

Hello @jordanpowell88, do you know if this was released? I tried looking through changelogs, but cannot find it.