0
votes

I want to test a simple component that have some Dependencies. So among others I have to provide some providers describe('AccountLookupComponent', () => { let component: AccountLookupComponent; let fixture: ComponentFixtureenter code here;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                TestComponentWrapper,
                AccountLookupComponent
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            imports: [HttpModule],
            providers: [AccountLookupService, AuthHttp, AuthenticationService, AdalService, AdfsSecretService, CookieService, NgModule,
                { provide: 'IAccountLookupClient', useClass: AccountLookupClient },
                { provide: 'IApiClient', useClass: ApiClient },
                { provide: 'ITimeoutService', useClass: TimeoutService },

            ]

        })
            .compileComponents();

        fixture = TestBed.createComponent(TestComponentWrapper);
        component = fixture.debugElement.children[0].componentInstance;
        fixture.detectChanges();
    }));

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

@Component({
    selector: 'test-component-wrapper',
    template: `<account-lookup filterCurrentAccount="true"
                                [useAccountIdSearch]="true"
                                [useCompactResults]="true"
                                (accountSelected)="null"
                                placeholder="Find account">
                </account-lookup>`,

})
class TestComponentWrapper {


}
2

2 Answers

0
votes

Remove NgModule from providers array. It is decorator. You should not use it as token.

export function makeDecorator(
    name: string, props?: (...args: any[]) => any, parentClass?: any,
    chainFn?: (fn: Function) => void): (...args: any[]) => (cls: any) => any {
  const metaCtor = makeMetadataCtor(props);

  function DecoratorFactory(objOrType: any): (cls: any) => any { // => here is your provider
0
votes

There are Two way to test component with providers

1. Inject the real services.

2. Use test doubles (stubs, fakes, spies, or mocks).

First Method A component doesn't have to be injected with real services but you can do something like that example:

TestBed.configureTestingModule({
  declarations: [ ExampleComponent ],
  providers:    [ ExampleService ]]
});

The Other Method is using stubs example:

TestBed.configureTestingModule({
   declarations: [ ExampleComponent ],
   // Provide a test-double instead
   providers:    [ {provide: ExampleService, useValue: exampleServiceStub }]
});

// UserService from the root injector
exampleService = TestBed.get(ExampleService);