Unit Testing: Set Up Question

[lcecil]

Posting this here, as well as in the old repo

This is a...

• feature request
• bug report
• usage question

What toolchain are you using for transpilation/bundling?

• @angular/cli
• Custom @ngTools/webpack
• Raw ngc
• SystemJS
• Rollup
• Other

Environment

NodeJS Version: 8.11.2
Typescript Version: 2.7.2
Angular Version: 6.0.9
@angular-redux/store version: 9.0.0
@angular/cli version: (if applicable)

Description

I've read through the unit test examples, and believe that I have my set up correct. However, it seems like my mock instance is not being substituted for the real NgRedux that is injected.

Simplified Code

Component

  export class MyComponent implements OnInit {
    state: ApplicationState;
    constructor(private ngRedux: NgRedux<ApplicationState>) {}

    ngOnInit() {
       this.state = this.ngRedux.getState();
    }
  }

Unit Test

  // In the main describe...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ NgReduxTestingModule ],
      declarations: [ MyComponent ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
    MockNgRedux.reset();
   }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  
  it('should set the initial state object', () => {
    const spy = spyOn(MockNgRedux.mockInstance, 'getState');
    expect(spy).toHaveBeenCalled();
  });

Error Message

When I run my tests with the code above, I get the message:
Expected spy getState to have been called.

Am I missing something in my set up?

[smithad15]

@wtho Can you confirm what the solution to this was if a solution was found?

[wtho]

Hey!

When installing the spy, the testbed was already setup, and the component compiled and instantiated and the constructor already executed. The component lifecycle hooks, such as ngOnInit are not called yet, which is great, so we can do things like setting up the spy. But it also will not be called by the testbed automatically, as it does not know, if the lifecycles are required for tests or not.

This means you have to call them in the test itself. You can call the lifecycle hooks on your own or make the test environment call them, e. g. an execution of fixture.detectChanges() is enough to trigger ngOnInit on the component.

I personally prefer to call the lifecycle hooks directly, as anyone can immediately see in your test, what you are testing. Modify your test in this way:

  it('should set the initial state object', () => {
    const spy = spyOn(MockNgRedux.mockInstance, 'getState');
    // alternatively call fixture.detectChanges(); here
    component.ngOnInit();
    expect(spy).toHaveBeenCalled();
  });

Let us know if this solved your problem and feel free to close the issue if it did.

Cheers!

[lcecil]

Hi.

Thanks for the reply, that helped. I played around with things and got it to work with this setup:

  // In the main describe...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ NgReduxTestingModule ],
      declarations: [ MyComponent ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
    MockNgRedux.reset();
   }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    ngRedux = MockNgRedux.getInstance(); // mockInstance looks like it's deprecated
    spyOn(ngRedux, 'getState');
    fixture.detectChanges();
  });
  
  it('should set the initial state object', () => {
    expect(ngRedux.getState).toHaveBeenCalled();
  });