finished tests

src/app/login/login.component.spec.ts

@@ -1,25 +1,107 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+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 ]
+      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.');
+  }));
 });