definma-ui/src/app/login/login.component.spec.ts

import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import { LoginComponent } from './login.component';
import {LoginService} from '../login.service';
import {ValidationService} from '../validation.service';
import {RbUiComponentsModule} from '@inst-iot/bosch-angular-ui-components';
import {FormsModule} from '@angular/forms';
import {By} from '@angular/platform-browser';

let validationServiceSpy: jasmine.SpyObj<ValidationService>;
let loginServiceSpy: jasmine.SpyObj<LoginService>;

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let css;   // get native element by css selector
  let cssd;  // get debug element by css selector

  beforeEach(async(() => {
    const validationSpy = jasmine.createSpyObj('ValidationService', ['username', 'password']);
    const loginSpy = jasmine.createSpyObj('LoginService', ['login']);

    TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      imports: [
        RbUiComponentsModule,
        FormsModule
      ],
      providers: [
        {provide: ValidationService, useValue: validationSpy},
        {provide: LoginService, useValue: loginSpy}
      ]
    })
    .compileComponents();

    validationServiceSpy = TestBed.inject(ValidationService) as jasmine.SpyObj<ValidationService>;
    loginServiceSpy = TestBed.inject(LoginService) as jasmine.SpyObj<LoginService>;
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    cssd = (selector) => fixture.debugElement.query(By.css(selector));
    css = (selector) => fixture.debugElement.query(By.css(selector)).nativeElement;
  });

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

  it('should have the `Please log in` heading', () => {
    expect(css('h2').innerText).toBe('Please log in');
  });

  it('should have empty credential inputs', () => {
    expect(css('rb-form-input[label=username] input').value).toBe('');
    expect(css('rb-form-input[label=password] input').value).toBe('');
  });

  it('should have an empty message at the beginning', () => {
    expect(css('.message').innerText).toBe('');
  });

  it('should have a login button', () => {
    expect(css('.login-button')).toBeTruthy();
  });

  it('should display a message when a wrong username was entered', () => {
    validationServiceSpy.username.and.returnValue({ok: false, error: 'username must only contain a-z0-9-_.'});
    validationServiceSpy.password.and.returnValue({ok: true, error: ''});

    cssd('.login-button').triggerEventHandler('click', null);
    fixture.detectChanges();
    expect(css('.message').innerText).toBe('username must only contain a-z0-9-_.');
  });

  it('should display a message when a wrong password was entered', () => {
    validationServiceSpy.username.and.returnValue({ok: true, error: ''});
    validationServiceSpy.password.and.returnValue({ok: false, error: 'password must only contain a-zA-Z0-9!"#%&\'()*+,-./:;<=>?@[]^_`{|}~'});

    cssd('.login-button').triggerEventHandler('click', null);
    fixture.detectChanges();
    expect(css('.message').innerText).toBe('password must only contain a-zA-Z0-9!"#%&\'()*+,-./:;<=>?@[]^_`{|}~');
    expect(loginServiceSpy.login).not.toHaveBeenCalled();
  });

  it('should call the LoginService with valid credentials', () => {
    validationServiceSpy.username.and.returnValue({ok: true, error: ''});
    validationServiceSpy.password.and.returnValue({ok: true, error: ''});
    loginServiceSpy.login.and.returnValue(new Promise(r => r(true)));

    cssd('.login-button').triggerEventHandler('click', null);
    expect(loginServiceSpy.login.calls.count()).toBe(1);
  });

  it('should display an error if the LoginService could not authenticate', fakeAsync(() => {
    validationServiceSpy.username.and.returnValue({ok: true, error: ''});
    validationServiceSpy.password.and.returnValue({ok: true, error: ''});
    loginServiceSpy.login.and.returnValue(new Promise(r => r(false)));

    cssd('.login-button').triggerEventHandler('click', null);
    expect(loginServiceSpy.login.calls.count()).toBe(1);
    tick();
    fixture.detectChanges();
    expect(css('.message').innerText).toBe('Wrong credentials! Try again.');
  }));
});