[AngularJS] 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.


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/729c2961-1afa-4d7b-bc56-bbedc3eacea5%40googlegroups.com.