Can we use both MockProvider and MockInstance to mock a service ?

[BerrouMoustapha]

Hi All, a simple question regarding ng mocks : Can we use both MockProvider(to mock all functions of the service on beforeEach) and MockInstance(to specify the return of specific function on the test case) to mock a service ?

[satanTime]

Yes, it works exactly as you expect: https://codesandbox.io/s/interesting-christian-02b2k5?file=/src/test.spec.ts

import { Injectable } from "@angular/core";
import { TestBed } from "@angular/core/testing";
import { MockInstance, MockProvider, MockRender } from "ng-mocks";

@Injectable()
class TargetService {
  echo1() {
    return this.constructor.name;
  }

  echo2() {
    return this.constructor.name;
  }
}

describe("my sandbox", () => {
  MockInstance.scope();
  beforeEach(() =>
    TestBed.configureTestingModule({
      providers: [
        MockProvider(TargetService, {
          echo1: () => "MockProvider"
        })
      ]
    }).compileComponents()
  );

  it("should do something", () => {
    MockInstance(TargetService, "echo2", () => "MockInstance");

    const { componentInstance: service } = MockRender(TargetService).point;
    expect(service.echo1()).toEqual("MockProvider");
    expect(service.echo2()).toEqual("MockInstance");
  });
});

Just a note, if you use MockBuilder then all methods will be mocks out of the box.

[BerrouMoustapha]

@satanTime Thank you for your answer, but in the example below, MockInstance can't set the return of selectSnapshot when MyComponent have called the store :

import { Store } from '@ngxs/store';
@Injectable()
export abstract class BaseComponent implements OnInit, OnDestroy {

  protected readonly store: Store;

}

@Component({
  selector: 'lib-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent extends BaseComponent implements OnInit {


  ngOnInit(): void {
    super.ngOnInit();
    this.initData();
    this.initFormGroup();
  }

  /**
   * Function to initialize the data
   */
  private initData() {
    const myData = this.store.selectSnapshot(FundingOperationSelector.getData);
    // Get the stored data
    this.formModel = myData?.formData;
  }

  /**
   * Function to initialize the FormGroup
   */
  private initFormGroup() {
    this.formGroup = this._formBuilder.group({
      myVar1: new FormControl(this.formModel?.myVar1, [ Validators.required ]),
      myVar2: new FormControl(this.formModel?.myVar2)
    });
  }
}


describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  MockInstance.scope();

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        MockModule(...)
      ],
      declarations: [
        MyComponent,
        MockPipe(...),
        ...MockComponents(...)
      ],
      providers: [
        MockProvider(Store)
      ]
    }).compileComponents();
  }));

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

  it('My test using MockInstance to specify returnValue of selectSnapshot to be not empty', () => {
    const formData = new FormData({
      myVar1: 'My var 1',
      myVar2: 'My var 2'
    });

    // I tried all three ways to mock the store instance to return the good value

    // First way
    MockInstance(Store, (instance) => {
      instance.selectSnapshot = jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      });
    });

    // Second way
    MockInstance(Store, () => ({
      selectSnapshot: jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      })
    }));

    // Third way
    MockInstance(
      Store,
      'selectSnapshot',
      jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      })
    );

    fixture.detectChanges();
    expect(component.formGroup.valid).toBeTrue();
  });

  it('My test using MockInstance to specify returnValue of selectSnapshot to be empty', () => {
    const formData = new FormData({
      myVar1: '',
      myVar2: 'My var 2'
    });

    // I tried all three ways to mock the store instance to return the good value

    // First way
    MockInstance(Store, (instance) => {
      instance.selectSnapshot = jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      });
    });

    // Second way
    MockInstance(Store, () => ({
      selectSnapshot: jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      })
    }));

    // Third way
    MockInstance(
      Store,
      'selectSnapshot',
      jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      })
    );

    fixture.detectChanges();
    expect(component.formGroup.valid).toBeFalse();
  });
}

[satanTime]

The problem here is that you mock Store after its instance has been created and injected, so it's basically too late.

You should call MockInstance before TestBed.createComponent:

  MockInstance.scope();
  beforeEach(() => TestBed.configureTestingModule({
    declarations: [
      MyComponent,
    ],
    providers: [
      MockProvider(Store)
    ]
  }).compileComponents());

  it('My test using MockInstance to specify returnValue of selectSnapshot to be not empty', () => {
    // configure
    const formData = new FormData({
      myVar1: 'My var 1',
      myVar2: 'My var 2'
    } as any);

    // I tried all three ways to mock the store instance to return the good value

    // First way
    MockInstance(Store, (instance) => {
      instance.selectSnapshot = jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      });
    });

    // Second way
    MockInstance(Store, () => ({
      selectSnapshot: jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      })
    }));

    // Third way
    MockInstance(
      Store,
      'selectSnapshot',
      jasmine.createSpy().and.returnValue({
        formData,
        objects: []
      })
    );

    // execute
    const fixture = TestBed.createComponent(MyComponent);
    const component = fixture.componentInstance;
    fixture.detectChanges();

    // assert
    expect(component.formGroup.valid).toBeTrue();
  });

Ideally, the flow should be configure, execute, assert.

[BerrouMoustapha]

Thank you @satanTime it's clear now, so we have to use MockInstance before we create the component

[satanTime]

Right, I'll think how to update the lib to make it work in both ways: before and after creation of components. But for now the only way is before.