Angular - 如何使用异步服务调用对测试组件进行单元化

Question

I have the following component which retrieves data from an Angular service:

export class MyComponent {
    constructor() {
        myService.get().then(() => {
            console.log('hello from constructor');
        });
    }
}

And then my unit test:

///////////

it('does something', () => {
    console.log('hello from unit test');
});

///////////

Unfortunately this results in the following log:

> hello from unit test
> hello from constructor

How can I make sure that the constructor finishes before running the unit test?

Answer 1

Do not use the constructor to load data, implement the OnInit interface instead.

import { OnInit } from '@angular/core';
export class MyComponent implements OnInit {

    constructor(private myService: MyService) {}

    ngOnInit() {
        myService.get().then(() => {
            console.log('hello from constructor');
        });
    }
}

• See also the angular documentation Lifecycle Hooks .
• Do not forget to inject your dependencies like your myService instance, I added it to the constructor.

---

Testing

I recommend you read over the Testing documentation . It is a lot of information but it is worth it. Here is code that you would use to unit test your component.

let comp: MyComponent ;
let fixture: ComponentFixture<MyComponent>;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [MyComponent],
            providers: [
                { provide: MyService, useValue: {} }
            ]
        })
        .compileComponents(); 

    TestBed.compileComponents();
    fixture = TestBed.createComponent(MyComponent);
    comp = fixture.componentInstance;
}));


it('initializes the component', fakeAsync(() => {
    var service = TestBed.get(MyService); // get your service
    service.get = () => {
            return Promise.resolve(); // you can pass data here if the service returns something
        };

    // here you could add an expect to validate component state before the call or service completes

    comp.ngOnInit(); // call ngOnInit
    tick(); // simulate the promise being resolved

    expect(service.get.toHaveBeenCalled);
    // here you could add an expect to validate component state after the service completes
}));

Answer 2

Your constructor is executing before your tests, however, your constructor's code makes an async call to a service, and that is executed after your tests.

First, you should really consider moving that service call away from the constructor.

Second, when writing tests for a component you usually spy on service calls and check that they were called, you don't actually make the call, you mock it up. Look up the documentation for 'spyOn'.

Lastly, if you want something to happen before your tests, take a look at 'beforeEach'. Anyways, hope this helps.