@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/authentication-routing.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth.guard';
+import { ProfileComponent } from './profile/profile.component';
+import { RedirectComponent } from './redirect/redirect.component';
+import { ExternalAuthProvider } from './services/external-auth-configs';
+import { ExternalAuthRedirectUrl } from './services/external-auth.service';
+
+const authRoutes: Routes = [
+  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
+  { path: ExternalAuthRedirectUrl.Google, component: RedirectComponent, data: { provider: ExternalAuthProvider.Google } },
+  { path: ExternalAuthRedirectUrl.Facebook, component: RedirectComponent, data: { provider: ExternalAuthProvider.Facebook } },
+  { path: ExternalAuthRedirectUrl.Microsoft, component: RedirectComponent, data: { provider: ExternalAuthProvider.Microsoft } }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(authRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AuthenticationRoutingModule { }

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/authentication.module.spec.ts

@@ -0,0 +1,13 @@
+import { AuthenticationModule } from './authentication.module';
+
+describe('AuthenticationModule', () => {
+  let authenticationModule: AuthenticationModule;
+
+  beforeEach(() => {
+    authenticationModule = new AuthenticationModule();
+  });
+
+  it('should create an instance', () => {
+    expect(authenticationModule).toBeTruthy();
+  });
+});

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/authentication.module.ts

@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
+import {
+  IgxAvatarModule,
+  IgxButtonModule,
+  IgxDialogModule,
+  IgxDropDownModule,
+  IgxIconModule,
+  IgxInputGroupModule,
+  IgxRippleModule,
+  IgxToggleModule
+} from 'igniteui-angular';
+import { AuthGuard } from './auth.guard';
+import { AuthenticationRoutingModule } from './authentication-routing.module';
+import { LoginBarComponent } from './login-bar/login-bar.component';
+import { LoginDialogComponent } from './login-dialog/login-dialog.component';
+import { LoginComponent } from './login/login.component';
+import { ProfileComponent } from './profile/profile.component';
+import { RedirectComponent } from './redirect/redirect.component';
+import { RegisterComponent } from './register/register.component';
+import { BackendProvider } from './services/fake-backend.service';
+import { JwtInterceptor } from './services/jwt.interceptor';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    AuthModule.forRoot(),
+    AuthenticationRoutingModule,
+    IgxAvatarModule,
+    IgxButtonModule,
+    IgxDialogModule,
+    IgxDropDownModule,
+    IgxIconModule,
+    IgxInputGroupModule,
+    IgxRippleModule,
+    IgxToggleModule
+  ],
+  declarations: [
+    LoginBarComponent,
+    LoginComponent,
+    LoginDialogComponent,
+    ProfileComponent,
+    RedirectComponent,
+    RegisterComponent
+  ],
+  providers: [
+    AuthGuard,
+    OidcConfigService,
+    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    // TODO: DELETE THIS BEFORE PRODUCTION!
+    BackendProvider
+  ],
+  exports: [
+    LoginBarComponent,
+    LoginComponent,
+    RedirectComponent,
+    RegisterComponent,
+    LoginDialogComponent,
+    ProfileComponent
+  ]
+})
+export class AuthenticationModule { }

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/index.ts

@@ -0,0 +1,9 @@
+export * from './auth.guard';
+export * from './authentication-routing.module';
+export * from './authentication.module';
+export * from './models/login';
+export * from './models/register';
+export * from './models/user';
+export * from './services/authentication.service';
+export * from './services/external-auth.service';
+export * from './services/user.service';

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login/login.component.html

@@ -0,0 +1,29 @@
+<form id="loginForm" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>account_circle</igx-icon>
+    </igx-prefix>
+    <label igxLabel for="email">Email</label>
+    <input igxInput id="loginEmail" name="email" formControlName="email" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>lock</igx-icon>
+    </igx-prefix>
+    <input igxInput id="loginPassword" name="password" type="password" formControlName="password" />
+    <label igxLabel for="password">Password</label>
+  </igx-input-group>
+
+  <div class="button-wrapper">
+    <button igxButton="raised" type="submit" igxRipple [disabled]="!loginForm.valid">LOG IN</button>
+    <a id="register" (click)="showRegistrationForm()">Create new account?</a>
+  </div>
+  <div class="social-login" *ngIf="authService.hasProvider()">
+    <button type="button" *ngIf="authService.hasProvider(providers.Facebook)" class="facebook" igxButton="raised"
+      (click)="signUpFb()">Sign Up Facebook</button>
+    <button type="button" *ngIf="authService.hasProvider(providers.Google)" class="google" igxButton="raised"
+      (click)="signUpG()">Sign Up Google</button>
+    <button type="button" *ngIf="authService.hasProvider(providers.Microsoft)" class="microsoft" igxButton="raised"
+      (click)="signUpMS()">Sign Up Microsoft</button>
+  </div>
+</form>

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login/login.component.scss

@@ -0,0 +1,32 @@
+form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 10px;
+  > * {
+    width: 100%;
+  }
+}
+
+a {
+  padding-top: 10px;
+  cursor: pointer;
+}
+button {
+  margin-top: 15px;
+  width: 100%;
+}
+
+.social-login {
+  border-top: 1px solid gray;
+
+  button.google {
+    background-color: rgb(255, 19, 74);
+  }
+  button.facebook {
+    background-color: rgb(19, 119, 213);
+  }
+  button.microsoft {
+    background-color: rgb(27, 158, 245);
+  }
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login/login.component.spec.ts

@@ -0,0 +1,115 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxRippleModule } from 'igniteui-angular';
+import { AuthenticationService } from '../services/authentication.service';
+import { ExternalAuthProvider } from '../services/external-auth-configs';
+import { ExternalAuthService } from '../services/external-auth.service';
+import { UserService } from '../services/user.service';
+import { LoginComponent } from './login.component';
+
+const MAIL_GROUP_NAME = 'email';
+const PASSWORD_GROUP_NAME = 'password';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+  const extAuthSpy = jasmine.createSpyObj('ExternalAuthService', ['login', 'hasProvider']);
+  const authSpy = jasmine.createSpyObj('AuthenticationService', ['login']);
+  const userServSpy = jasmine.createSpyObj('UserService', ['setCurrentUser']);
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, RouterTestingModule, NoopAnimationsModule,
+        IgxInputGroupModule, IgxButtonModule, IgxIconModule, IgxRippleModule],
+      declarations: [LoginComponent],
+      providers: [
+        { provide: ExternalAuthService, useValue: extAuthSpy },
+        { provide: AuthenticationService, useValue: authSpy },
+        { provide: UserService, useValue: userServSpy }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should submit login data', async () => {
+    const router: Router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    expect(component.loginForm.valid).toBeFalsy();
+    component.loginForm.controls[MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.loginForm.valid).toBeFalsy();
+    component.loginForm.controls[PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.loginForm.valid).toBeTruthy();
+    spyOn(component.loggedIn, 'emit');
+    authSpy.login.and.returnValue(Promise.resolve({
+      error: null,
+      user: { name: 'TEST' }
+    }));
+    await component.tryLogin();
+    expect(authSpy.login).toHaveBeenCalledTimes(1);
+    expect(authSpy.login).toHaveBeenCalledWith({
+      email: 'test@example.com',
+      password: '123456'
+    });
+    expect(userServSpy.setCurrentUser).toHaveBeenCalledWith({ name: 'TEST' });
+    expect(component.loggedIn.emit).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/profile']);
+
+    authSpy.login.and.returnValue(Promise.resolve({
+      error: 'Err'
+    }));
+    spyOn(window, 'alert');
+    await component.tryLogin();
+    expect(window.alert).toHaveBeenCalledWith('Err');
+  });
+
+  it('should enable external auth buttons when configured', () => {
+    let activeProvider = ExternalAuthProvider.Facebook;
+    const has = (provider: ExternalAuthProvider) => provider ? provider === activeProvider : true;
+    (extAuthSpy.hasProvider as jasmine.Spy).and.callFake(has);
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('button.facebook'))).toEqual(jasmine.any(DebugElement));
+    expect(fixture.debugElement.query(By.css('button.google'))).toBeNull();
+    expect(fixture.debugElement.query(By.css('button.microsoft'))).toBeNull();
+    activeProvider = ExternalAuthProvider.Google;
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('button.facebook'))).toBeNull();
+    expect(fixture.debugElement.query(By.css('button.google'))).toEqual(jasmine.any(DebugElement));
+    expect(fixture.debugElement.query(By.css('button.microsoft'))).toBeNull();
+  });
+
+  it('should call correct external auth login per button', () => {
+    (extAuthSpy.hasProvider as jasmine.Spy).and.returnValue(true);
+    fixture.detectChanges();
+    spyOn(component.loggedIn, 'emit');
+    fixture.debugElement.query(By.css('button.facebook')).nativeElement.click();
+    expect(extAuthSpy.login).toHaveBeenCalledWith(ExternalAuthProvider.Facebook);
+    expect(component.loggedIn.emit).toHaveBeenCalled();
+
+    fixture.debugElement.query(By.css('button.google')).nativeElement.click();
+    expect(extAuthSpy.login).toHaveBeenCalledWith(ExternalAuthProvider.Google);
+
+    fixture.debugElement.query(By.css('button.microsoft')).nativeElement.click();
+    expect(extAuthSpy.login).toHaveBeenCalledWith(ExternalAuthProvider.Microsoft);
+  });
+
+  it('should emit viewChange on "create account" click', () => {
+    spyOn(fixture.componentInstance.viewChange, 'emit');
+    fixture.debugElement.query(By.css('#register')).nativeElement.click();
+    expect(fixture.componentInstance.viewChange.emit).toHaveBeenCalled();
+  });
+});

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login/login.component.ts

@@ -0,0 +1,63 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthenticationService } from '../services/authentication.service';
+import { ExternalAuthProvider } from '../services/external-auth-configs';
+import { ExternalAuthService } from '../services/external-auth.service';
+import { UserService } from '../services/user.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent {
+  public loginForm: FormGroup;
+  @Output() public viewChange: EventEmitter<any> = new EventEmitter();
+  @Output() public loggedIn: EventEmitter<any> = new EventEmitter();
+  /** expose to template */
+  public providers = ExternalAuthProvider;
+
+  constructor(
+    public authService: ExternalAuthService, private authentication: AuthenticationService,
+    private userService: UserService, private router: Router, fb: FormBuilder
+  ) {
+    this.loginForm = fb.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  signUpG() {
+    this.authService.login(ExternalAuthProvider.Google);
+  }
+
+  signUpMS() {
+    this.authService.login(ExternalAuthProvider.Microsoft);
+  }
+
+  signUpFb() {
+    this.authService.login(ExternalAuthProvider.Facebook);
+    this.loggedIn.emit();
+  }
+
+  async tryLogin() {
+    const response = await this.authentication.login(this.loginForm.value);
+    if (!response.error) {
+      this.userService.setCurrentUser(response.user!);
+      this.router.navigate(['/profile']);
+      this.loginForm.reset();
+      // https://github.com/angular/angular/issues/15741
+      Object.keys(this.loginForm.controls).forEach(key => {
+        this.loginForm.controls[key].setErrors(null);
+      });
+      this.loggedIn.emit();
+    } else {
+      alert(response.error);
+    }
+  }
+
+  showRegistrationForm() {
+    this.viewChange.emit();
+  }
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.html

@@ -0,0 +1,17 @@
+<button *ngIf="!userService.currentUser" igxRipple="white" igxButton="flat" igxButtonColor="white"
+  (click)="openDialog()">Log In</button>
+
+<button class="login-button" *ngIf="userService.currentUser" igxRipple="white" igxButton="flat" igxButtonBackground="c"
+  igxButtonColor="white" [igxToggleAction]="options">
+  <igx-avatar [initials]="userService.initials ?? ''" [src]="userService.currentUser.picture ?? ''"
+    [roundShape]="true" size="small" bgColor="white">
+  </igx-avatar>
+  <igx-icon>keyboard_arrow_down</igx-icon>
+</button>
+
+<igx-drop-down #options (selectionChanging)="menuSelect($event)">
+  <igx-drop-down-item [index]="0" igxRipple>Profile</igx-drop-down-item>
+  <igx-drop-down-item [index]="1" igxRipple>Log Out</igx-drop-down-item>
+</igx-drop-down>
+
+<app-login-dialog></app-login-dialog>

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.scss

@@ -0,0 +1,8 @@
+.login-button {
+  height: 3rem;
+  vertical-align: middle;
+}
+
+igx-drop-down-item {
+  position: relative;
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.spec.ts

@@ -0,0 +1,133 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AuthModule } from 'angular-auth-oidc-client';
+import {
+  IgxAvatarComponent,
+  IgxAvatarModule,
+  IgxButtonModule,
+  IgxDialogModule,
+  IgxDropDownModule,
+  IgxIconModule,
+  IgxRippleModule,
+  IgxToggleModule
+} from 'igniteui-angular';
+import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
+import { ExternalAuthService } from '../services/external-auth.service';
+import { UserService } from '../services/user.service';
+import { LoginBarComponent } from './login-bar.component';
+
+@Component({
+  selector: 'app-login-dialog',
+  template: ''
+})
+class TestLoginDialogComponent extends LoginDialogComponent {
+  open() { }
+}
+
+describe('LoginBarComponent', () => {
+  let component: LoginBarComponent;
+  let fixture: ComponentFixture<LoginBarComponent>;
+  class TestUserServSpy {
+    logout() { }
+    get currentUser() { return null; }
+    clearCurrentUser() { return null; }
+  }
+
+  class TestAuthService {
+    logout() { }
+  }
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        NoopAnimationsModule,
+        AuthModule.forRoot(),
+        IgxAvatarModule,
+        IgxButtonModule,
+        IgxDialogModule,
+        IgxDropDownModule,
+        IgxIconModule,
+        IgxRippleModule,
+        IgxToggleModule
+      ],
+      declarations: [LoginBarComponent, TestLoginDialogComponent],
+      providers: [
+        { provide: UserService, useClass: TestUserServSpy },
+        { provide: ExternalAuthService, useClass: TestAuthService }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should switch between buttons based on logged user ', () => {
+    let buttons = fixture.debugElement.queryAll(By.css('button'));
+    expect(buttons.length).toBe(1);
+    expect(buttons[0].nativeElement.innerText).toBe('Log In');
+    const userServ = TestBed.inject(UserService);
+    spyOnProperty(userServ, 'currentUser', 'get').and.returnValue({
+      picture: 'picture'
+    });
+    fixture.detectChanges();
+    buttons = fixture.debugElement.queryAll(By.css('button'));
+    expect(buttons.length).toBe(1);
+    expect(buttons[0].nativeElement.children.length).toEqual(2);
+    const avatar: IgxAvatarComponent = fixture.debugElement.query(By.css('igx-avatar')).componentInstance;
+    expect(avatar.src).toBe('picture');
+  });
+
+  it('should open dialog on button click (not logged)', () => {
+    // override ViewChild:
+    component.loginDialog = new TestLoginDialogComponent();
+
+    const button = fixture.debugElement.query(By.css('button'));
+    spyOn(component.loginDialog, 'open');
+    button.triggerEventHandler('click', {});
+    expect(component.loginDialog.open).toHaveBeenCalled();
+  });
+
+  it('should open drop down on button click (logged in)', async () => {
+    const userServ = TestBed.inject(UserService);
+    spyOnProperty(userServ, 'currentUser', 'get').and.returnValue({
+      picture: 'picture'
+    });
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button'));
+    button.triggerEventHandler('click', {});
+    await fixture.whenStable();
+    expect(component.igxDropDown.collapsed).toBeFalsy();
+  });
+
+  it('should handle user menu items', async () => {
+    const userServ = TestBed.inject(UserService);
+    const authServ = TestBed.inject(ExternalAuthService);
+    const router: Router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    spyOn(userServ, 'clearCurrentUser');
+    spyOn(authServ, 'logout');
+
+    component.igxDropDown.open();
+    component.igxDropDown.setSelectedItem(0);
+    expect(router.navigate).toHaveBeenCalledWith(['/profile']);
+
+    component.igxDropDown.setSelectedItem(1);
+    expect(router.navigate).toHaveBeenCalledWith(['/home']);
+    expect(userServ.clearCurrentUser).toHaveBeenCalled();
+    expect(authServ.logout).toHaveBeenCalled();
+  });
+});

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.ts

@@ -0,0 +1,48 @@
+import { Component, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { IgxDropDownComponent, ISelectionEventArgs } from 'igniteui-angular';
+import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
+import { ExternalAuthService } from '../services/external-auth.service';
+import { UserService } from '../services/user.service';
+
+@Component({
+  selector: 'app-login-bar',
+  templateUrl: './login-bar.component.html',
+  styleUrls: ['./login-bar.component.scss']
+})
+export class LoginBarComponent {
+
+  @ViewChild(LoginDialogComponent, { static: true })
+  loginDialog!: LoginDialogComponent;
+
+  @ViewChild(IgxDropDownComponent, { static: true })
+  igxDropDown!: IgxDropDownComponent;
+
+  constructor(
+    public userService: UserService,
+    private authService: ExternalAuthService,
+    private router: Router) {
+  }
+
+  openDialog() {
+    this.loginDialog.open();
+  }
+
+  handleLogout() {
+    this.router.navigate(['/home']);
+    this.userService.clearCurrentUser();
+    this.authService.logout();
+  }
+
+  menuSelect(args: ISelectionEventArgs) {
+    // TODO: Use item value, swap to menu component in the future
+    switch (args.newSelection.index) {
+      case 0:
+        this.router.navigate(['/profile']);
+        break;
+      case 1:
+        this.handleLogout();
+        break;
+    }
+  }
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.html

@@ -0,0 +1,6 @@
+<igx-dialog #dialog (opened)="onOpen()" [title]="title" [closeOnOutsideSelect]="true">
+  <div class="sign-dialog">
+    <app-login *ngIf="showLogin" (loggedIn)="close()" (viewChange)="toggleView()"></app-login>
+    <app-register *ngIf="!showLogin" (registered)="close()" (viewChange)="toggleView()"></app-register>
+  </div>
+</igx-dialog>

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.scss

@@ -0,0 +1,3 @@
+.sign-dialog {
+  width: 20rem;
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.spec.ts

@@ -0,0 +1,83 @@
+import { Component, DebugElement, EventEmitter, Output } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxDialogModule } from 'igniteui-angular';
+import { LoginDialogComponent } from './login-dialog.component';
+
+@Component({
+  selector: 'app-login, app-register',
+  template: ''
+})
+class TestSignViewComponent {
+  @Output() public viewChange = new EventEmitter();
+  @Output() public loggedIn = new EventEmitter();
+  @Output() public registered = new EventEmitter();
+}
+
+describe('LoginDialogComponent', () => {
+  let component: LoginDialogComponent;
+  let fixture: ComponentFixture<LoginDialogComponent>;
+
+  const checkViews = (): { loginView: DebugElement, registerView: DebugElement } => {
+    const loginView = fixture.debugElement.query(By.css('app-login'));
+    const registerView = fixture.debugElement.query(By.css('app-register'));
+    return { loginView, registerView };
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoginDialogComponent, TestSignViewComponent],
+      imports: [NoopAnimationsModule, IgxDialogModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should switch views, show login on open', fakeAsync(() => {
+    let result = checkViews();
+    expect(result.loginView).not.toBeNull();
+    expect(result.registerView).toBeNull();
+
+    component.showLogin = false;
+    fixture.detectChanges();
+    result = checkViews();
+    expect(result.loginView).toBeNull();
+    expect(result.registerView).not.toBeNull();
+    expect(component.loginDialog.title).toEqual('Register');
+
+    component.open();
+    tick();
+    fixture.detectChanges();
+    result = checkViews();
+    expect(result.loginView).not.toBeNull();
+    expect(result.registerView).toBeNull();
+    expect(component.showLogin).toBeTruthy();
+    expect(component.loginDialog.title).toEqual('Login');
+  }));
+
+  it('should switch views, close on events', () => {
+    let view: TestSignViewComponent = fixture.debugElement.query(By.css('app-login')).componentInstance;
+    spyOn(component.loginDialog, 'close');
+
+    view.viewChange.emit();
+    expect(component.showLogin).toBeFalsy();
+    view.loggedIn.emit();
+    expect(component.loginDialog.close).toHaveBeenCalledTimes(1);
+    fixture.detectChanges();
+    view = fixture.debugElement.query(By.css('app-register')).componentInstance;
+    view.viewChange.emit();
+    expect(component.showLogin).toBeTruthy();
+    view.registered.emit();
+    expect(component.loginDialog.close).toHaveBeenCalledTimes(2);
+  });
+});