We need to implement an AuthServiceFake so that our unit tests pass and use a pattern similar to commonTestingModules mentioned in Chapter 7, Create a Router-First Line-of-Business App, to conveniently provider this fake across our spec files. 

To ensure that our fake will have the same public functions and properties as the actual AuthService, let's first start with creating an interface: 

1. Add IAuthService to auth.service.ts

src/app/auth/auth.service.ts

export interface IAuthService {
  authStatus: BehaviorSubject<IAuthStatus>
  login(email: string, password: string): Observable<IAuthStatus>
  logout()
  getToken(): string
}

2. Make sure AuthService implements the interface
3. Export defaultAuthStatus for reuse

src/app/auth/auth.service.ts

export const defaultAuthStatus = {
  isAuthenticated: false,
  userRole: Role.None,
  userId: null,
}

export class AuthService extends CacheService implements IAuthService

Now we can create a fake that implements the same interface, but provides functions that don't have any dependencies to any external authentication system.

1. Create a new file named auth.service.fake.ts under auth:

src/app/auth/auth.service.fake.ts
import { Injectable } from '@angular/core'
import { BehaviorSubject, Observable, of } from 'rxjs'
import { IAuthService, IAuthStatus, defaultAuthStatus } from './auth.service'

@Injectable()
export class AuthServiceFake implements IAuthService {
  authStatus = new BehaviorSubject<IAuthStatus>(defaultAuthStatus)
  constructor() {}

  login(email: string, password: string): Observable<IAuthStatus> {
    return of(defaultAuthStatus)
  }

  logout() {}

  getToken(): string {
    return ''
  }
}

2. Update common.testing.ts with commonTestingProviders:

src/app/common/common.testing.ts

export const commonTestingProviders: any[] = [
  { provide: AuthService, useClass: AuthServiceFake },
  UiService,
]

3. Observer the use of the fake in app.component.spec.ts:

src/app/app.component.spec.ts
...
  TestBed.configureTestingModule({
    imports: commonTestingModules,
    providers: commonTestingProviders.concat([
      { provide: ObservableMedia, useClass: ObservableMediaFake },
      ...

The empty commonTestingProviders array we created earlier is being concatenated with fakes that are specific to app.component, so our new AuthServiceFake should apply automatically.

4. Update the spec file for AuthGuard shown as follows:

src/app/auth/auth-guard.service.spec.ts
...
   TestBed.configureTestingModule({
      imports: commonTestingModules,
      providers: commonTestingProviders.concat(AuthGuard)
    })

5. Go ahead and apply this technique to all spec files that have a dependency on AuthService and UiService
6. The notable exception is in auth.service.spec.ts where you do not want to use the fake, since AuthService is the class under test, make sure it is configure shown as follows:

src/app/auth/auth.service.spec.ts
...
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    providers: [AuthService, UiService],
  })

7. In addition SimpleDialogComponent tests require stubbing out some external dependencies like:

src/app/common/simple-dialog/simple-dialog.component.spec.ts
  ...
    providers: [{
      provide: MatDialogRef,
      useValue: {}
    }, {
      provide: MAT_DIALOG_DATA,
      useValue: {} // Add any data you wish to test if it is passed/used correctly
    }],
  ...

Remember, don't move on until all your tests are passing!