单元测试用例：期望从构造函数调用组件函数

Question

I have the following component:

export class MyComponent {
   constructor() { this.getStorageData(); }
   getStorageData() {...}
}

I am trying to test the following case: after creation of the component, the function getStorageData should have been called. This is how I tried to do it:

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

it('should create', async(()=> {
   var spy = spyOn(component, "getStorageData").and.callThrough();
   fixture.detectChanges();
   expect(component).toBeDefined();
   expect(component.getStorageData).toHaveBeenCalled();
}))

The last line of the test always fails the test. What am I doing wrong?

Answer 1

The reason it has not been called, is because the spyOn method is called after component creation, so after the constructor has been called. There are a couple ways around this:

1. Move the function call to the ngOnInit hook:

export class MyComponent {
  constructor() {}

  ngOnInit(): void {
    this.getStorageData();
  }

  getStorageData() {...}
}

And you just make sure you call the spyOn before your first detectChanges() . Then you can leave the test just as you have it

---

2. Just initialize the component using new and add the spy to the prototype:

it('should call getStorageData', function() {
  spyOn(MyComponent.prototype, 'getStorageData').and.callThrough();
  const component = new MyComponent();
  expect(MyComponent.prototype.getStorageData).toHaveBeenCalled();
});

You will have supply any possible constructor providers yourself, as dependency injection will not work

---

3. Place the spy in the beforeEach on the prototype

beforeEach(() => {
  spyOn(MyComponent.prototype, 'getStorageData').and.callThrough();
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
})

it('should create', async(()=> {   
   fixture.detectChanges();
   expect(component).toBeDefined();
   expect(MyComponent.prototype.getStorageData).toHaveBeenCalled();
}))

You should probably look into isolating this test, to be sure it's not spied with every test in this spec.