没有平台提供商

Question

So I have come across this issue making a unit test for an Angular 4 application

What happens is that it keeps giving the error stated here in the question title.

I tried to google it, tried to import a whole bunch of different modules and finally found that a close answer to what this "Platform" is might be the browserModule from @angular/browser Platform.

So in my unit testing, I tried to import it and declare it but it did not help.

Can anyone please help with this as I'm not even sure what this "Platform" is?

Question: what is exactly this "Platform" in the error and how to fix it?

Thanks.

I have attached my code as below:

import { ComponentFixture, TestBed, async} from "@angular/core/testing";
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA, PlatformRef} from 
"@angular/core";
import { TeamCreationAssignmentComponent } from "./team-creation-assignment.component";
import { OdmService } from "../../services/odm/odm.service";
import { UserNotificationService } from "../../services/user/user-notification.service";
import { MatSnackBar } from "@angular/material";
import { OVERLAY_PROVIDERS, ScrollStrategyOptions, ScrollDispatcher} from "@angular/cdk/overlay";

describe('Team creation assignment component', () => {
let comp: TeamCreationAssignmentComponent;
let fixture: ComponentFixture<TeamCreationAssignmentComponent>;

let odmServiceSub = {};


beforeEach(async(() => {
    TestBed.configureTestingModule({

        declarations: [TeamCreationAssignmentComponent],
        //imports: [BrowserModule],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [
            {provide: OdmService, useValue: odmServiceSub}, 
            UserNotificationService, 
            MatSnackBar, 
            OVERLAY_PROVIDERS, 
            ScrollStrategyOptions,
            ScrollDispatcher,
        ],
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(TeamCreationAssignmentComponent);
    comp = fixture.componentInstance;
});

it('should have defined component', () => {
    expect(comp).toBeDefined();
})

});

Answer 1

I ran into a similar problem (in Angular 5) using FocusMonitor and wanting to test the component depending on it. FocusMonitor in turn has a dependency of Platform.

In your case it's the same dependency with ScrollDispatcher .

You'll need to add Platform in your TestBed's providers

import { Platform } from '@angular/cdk/platform';

...

providers: [
  {provide: OdmService, useValue: odmServiceSub}, 
  UserNotificationService, 
  MatSnackBar, 
  OVERLAY_PROVIDERS, 
  ScrollStrategyOptions,
  ScrollDispatcher,
  Platform
]

Answer 2

Whenever you get a message that there is "No provider for XXX" it generally means that you are missing something from the providers array in the configureTestingModule method. Have you tried adding PlatformRef to the providers array? Like this:

providers: [
    {provide: OdmService, useValue: odmServiceSub}, 
    UserNotificationService, 
    MatSnackBar, 
    OVERLAY_PROVIDERS, 
    ScrollStrategyOptions,
    ScrollDispatcher,
    PlatformRef // <- added here
],

One thing you are missing however is a call to detectChanges in your second beforeEach , it should look like this:

beforeEach(() => {
    fixture = TestBed.createComponent(TeamCreationAssignmentComponent);
    comp = fixture.componentInstance;
    fixture.detectChanges(); // <- this is required
});

One thing I will say is that in my Angular 4 app, there are around 800 unit tests, and not a single one of them uses or requires this PlatformRef . I think the issue is the missing detectChanges rather than anything to do with this "platform".