Trying to troubleshoot a login feature, how can I mock everything except string variables?
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'])
export class LoginComponent {
username: string;
password: string;
loginSpinner: boolean;
constructor(public authService: AuthService, public router: Router) {
}
login() {
this.loginSpinner = true;
this.authService.login(this.username, this.password).subscribe(() => {
this.loginSpinner = false;
if (this.authService.isLoggedIn) {
// Get the redirect URL from our auth service
// If no redirect has been set, use the default
const redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/';
// Redirect the user
this.router.navigate([redirect]);
}
}, () => {
// also want to hide the spinner on an error response from server when attempting login
this.loginSpinner = false;
});
}
logout() {
this.authService.logout();
}
}
The login component contains a service named authService. Need help mocking every aspect except for the string variable within authService known as redirect URL.
import {LoginComponent} from './login.component';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
import {AuthService} from './auth.service';
import {HttpClient, HttpHandler} from '@angular/common/http';
import {JwtHelperService, JwtModule, JwtModuleOptions} from '@auth0/angular-jwt';
import {TokenService} from './token.service';
import {Router} from '@angular/router';
import {Observable, of} from 'rxjs';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
const JWT_Module_Options: JwtModuleOptions = {
config: {
tokenGetter: function () {
return '';
},
whitelistedDomains: []
}
};
const authServiceSpy = jasmine.createSpyObj('AuthService', ['login', 'isLoggedIn']);
authServiceSpy.login.and.callFake(function () {
return of({});
});
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
JwtModule.forRoot(JWT_Module_Options)
],
declarations: [LoginComponent],
providers: [HttpClient, HttpHandler, JwtHelperService, TokenService,
[
{
provide: AuthService,
useValue: authServiceSpy
},
{
provide: Router,
useClass: class {
navigate = jasmine.createSpy('navigate');
}
}]],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should log in properly without redirect URL', () => {
authServiceSpy.isLoggedIn.and.callFake(function () {
return true;
});
component.login();
expect(component.router.navigate).toHaveBeenCalledWith(['/']);
expect(component.loginSpinner).toEqual(false);
});
it('should log in properly with redirect URL', () => {
authServiceSpy.isLoggedIn.and.callFake(function () {
return true;
});
// this doesn't work
authServiceSpy.redirectUrl = '/foo';
component.login();
expect(component.router.navigate).toHaveBeenCalledWith(['/foo']);
expect(component.loginSpinner).toEqual(false);
});
}
);