SwUpdate breaks unit test

I’m submitting a…

[ x] Bug report (nothing found on Github, nor wider web)

Current behavior

Injecting swUpdate into (app) component breaks unit test of component with No provider for NgswCommChannel error.

Importing NgswCommChannel results in cannot resolve... compiler error.

Full karma/Jasmin error:

Error: StaticInjectorError(DynamicTestModule)[SwUpdate -> NgswCommChannel]: 
  StaticInjectorError(Platform: core)[SwUpdate -> NgswCommChannel]: 
    NullInjectorError: No provider for NgswCommChannel!

Expected behavior

The test framework would generate the component and allow unit testing to proceed.

Minimal reproduction of the problem with instructions

AppModule (excerpt): providers: [ ..., SwUpdate, ... ]

Test setup:

beforeEach(async(() => {
	TestBed.configureTestingModule({
		declarations: [
		        AppComponent
		],
		imports: [
			RouterTestingModule
		],
		providers: [
			...,
                        //NgswCommChannel,
			SwUpdate,
                        ...
		],
		...
	})
	.compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

Failing test: it('can create the component', () => { expect(component).toBeTruthy(); });

What is the motivation / use case for changing the behavior?

Get component unit tests to pass.

Environment

Angular version: 5.2.27

Browser:
- [x ] Chrome (desktop) version 64.0.3282.186
 
For Tooling issues:
- Node version: 6.10.0
- Platform:  Windows 10
- Karma: ~2.0.0.
- Jasmine: ^2.5.38
- angular-cli: 1.7.2

Thanks!

[michelcve]

Just to clarify it a bit more, importing the ServiceWorkerModule into the test module with enabled: false solves it…E.g.:

imports: […, ServiceWorkerModule.register(‘’, {enabled: false}), …]

I kind of missed that, so perhaps it helps someone else 😉

[gkalpak]

@evelbulgroz, this sounds to be working as expected. If you are trying to inject SwUpdate, you also need to provide the dependencies that it needs.

You could try importing the ServiceWorkerModule (which provides the necessary services) with enabled: false (since you obviously don’t want to be testing the ServiceWorker in your tests); e.g. import: [ServiceWorkerModule.register('', {enabled: false}).

Alternatively, you could provide a mock version of the service yourself; e.g. {provide: SwUpdate, useValue: mockSwUpdateInstance}. You could try creating mockSwUpdateInstance by instantiating SwUpdate yourself (e.g. new SwUpdate({isEnabled: false} as any)), but I think this will error if you try to interact with it. A more robust solution would be creating a mock object based on the methods that you component interacts with. This makes more sense imo, since in a unit test you want to test the component and not the services it interacts with.

FWIW, here is the mock that we (will) use on angular.io for a similar scenario: https://github.com/alxhub/angular/blob/3ad088d15909e2f5b54ec14f5da87799b0cba8a9/aio/src/app/sw-updates/sw-updates.service.spec.ts#L206-L220