带有方法和属性的 Jasmine Mocking Provider Angluar 9

Question

I am trying to mock the angularx-social-login npm package. All I want is the default should be created test to pass. In my test spec I have:

  let component: Component;
  let fixture: ComponentFixture<Component>;
  let spy;

  beforeEach(async(() => {
    spy = jasmine.createSpyObj('SocialAuthService', ['signIn', 'signOut'], ['authState']);
    TestBed.configureTestingModule({
      declarations: [
        Component
      ],
      providers: [
        { provide: SocialAuthService, useValue: spy }
      ]
    })
      .compileComponents();
  }));

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

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

With this code I get the error cannot read property subscribe of undefined. Which is expected because I haven't setup the subscribe for authState, as in my component I have this:

this.socialAuthService.authState;

The above returns observable. However when I then add this line of code in the first before each:

spy.authState.and.returnValue(of());

It says cannot read property and of undefined. Having done some research online I can see that alot of suggestions is to use spyOnProperty, however when I use something like spyOnProperty(spy, 'authState', 'get'); I get the error Failed: : authState is not declared configurable. I am not really sure how to proceed with this issue any help would be much appreciated.

Answer 1

I think you are using jasmine.createSpyObj incorrectly. It only takes 2 arguments, not three.

The first argument is a string name for the spy and the second argument is an array of public methods that you would like to mock. Seeing you have this.socialAuthService.getAuthState() , you need to add getAuthState in this second argument.

Try this:

 let component: Component;
  let fixture: ComponentFixture<Component>;
  let spy;

  beforeEach(async(() => {
    // add all other public properties required into the second argument inside of the array ** in this case remove it since you don't need it
    spy = jasmine.createSpyObj('SocialAuthService', []);
    TestBed.configureTestingModule({
      declarations: [
        Component
      ],
      providers: [
        { provide: SocialAuthService, useValue: spy }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    // I am not sure when you require the value but let's assume you need it in the ngOnInit
   // so we have to put it here
    // spy.getAuthState.and.returnValue(of(null)); // now we are mocking the return value of getAuthState, ** comment out this line, you don't need it
    spy.authState = of(null); // ** mock it to what you would like here
    fixture.detectChanges();
  });

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