unit testing a method that makes use of angular-social-login

[Kiflemariam Andom]

Hi,

Perhaps more than the library alone, I would love a general answer as on how to go about testing such methods. Basically, I have a method that simply returns details of a google user - as seen below.

  export class GoogleLoginComponent implements OnInit {
  @Output() userDetails = new EventEmitter<any>(); //else false or user details
 

  spin = false;

  signInWithGoogle() {
    /* user clicked the Google Login button. Here we just
    obtain the user data as part of the login attempt and
    pass it to the parent component, assuming it is OAF
    email or send
    */
    let vm: any = this;
    vm.spin = true;

    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(
      userData => {
       
        const email = userData.email.toLocaleLowerCase();
        console.log(`email is ${email}`)

        //is it from our company?
        if (email.includes("@abc.net")) {
          // cool. So we got the email. Now we emit the details of the user
          vm.userDetails.emit(userData);
          vm.spin = false;
         
        } else {
          vm.spin = false;
          vm.userDetails.emit(false);
        }
      },
      error => {
        vm.spin = false;
        vm.userDetails.emit(false);
      }
    );
  }
}

The component is is used in parent components as <app-google-login (userDetails)="emittedGoogleUserInformation($event)"></app-google-login>

and I am indeed getting correct details of the google login

.

Now the test is simply for the spin at least (if possible userDetails as well).

import { TestBed, async, inject, getTestBed } from "@angular/core/testing";
import { GoogleLoginComponent } from "./google-login.component";
import { SocialLoginModule, AuthServiceConfig , AuthService , GoogleLoginProvider, SocialUser } from "angularx-social-login";

var sinon = require("sinon");

let config = new AuthServiceConfig([
    {
      id: GoogleLoginProvider.PROVIDER_ID,
      provider: new GoogleLoginProvider("google id goes here")
    }
  ]);

  export function provideConfig() {
    return config;
  }


describe("Component: Login to Google", () => {
  let originalTimeout;

  beforeEach(async(() => {
    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
    TestBed.configureTestingModule({
        imports:[],
      declarations: [GoogleLoginComponent],
      providers: [AuthService, SocialLoginModule ,
        {
            provide: AuthServiceConfig,
            useFactory: provideConfig
          }
    ]
    }).compileComponents();
  }));


  afterEach(function() {
    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
   
  });
 
  afterAll(function() {
    console.log('Done: Component Login to Google')

  });


  describe(":", () => {

    const badUser = new SocialUser()

    badUser.email = 'a...@gmail.com'
    badUser.id = 'id'

    function setupTestBed() {
        const injector = getTestBed();

        return injector.get(AuthService);
      }

     
    function setup() {
      const component = TestBed.createComponent(GoogleLoginComponent);
      return component;
    }

      it('User selected a non-company email', done => {

        const component = setup();
        const app = component.debugElement.componentInstance;
        const authService = setupTestBed();

        var post = sinon.stub(authService, "signIn").resolves(badUser);
        app.signInWithGoogle();

        expect(app.spin).toEqual(false);
        post.restore();
   
      });


  });
});

The assertion fails because app.spin is true. However, console.log(userData) in signInWithGoogle() method does show incorrect email. It appears app.signInWithGoogle() don't go far enough or wait?

Second failure is

Uncaught Error: Uncaught (in promise): Object: {"error":"idpiframe_initialization_failed","details":"Not a valid origin for the client: http://localhost:9876 has not been whitelisted for client ID google id goes here. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."} thrown

which is obvious and meaning I need to mock the social login/module somehow but I don't know where to begin. My bigger question for future is how does one go about mocking such libraries that are hard to test with little documentation online.