使用 Jasmine 进行 Angular2 AngularFire Auth 测试

Question

我正在尝试为我的组件编写单元测试，但我无法正确监视 AngularFire class。

//Component

  import { AngularFire } from 'angularfire2';

  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
  })
  export class HeaderComponent implements OnInit {

    constructor(
      public angularFire: AngularFire
    ) { }

    ngOnInit() {
      this.angularFire.auth.subscribe(auth => {
        // do stuff
      });
    }
  }

我的测试很简单，我正在尝试监视 Auth class 以转换订阅的模拟用户。

//Test
let AngularFireMocks = {
  auth: jasmine.createSpy('auth')
};

AngularFireMock.auth.and.returnValue(Observable.of({ uid: 'ABC123' }));

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        HeaderComponent
      ],
      providers: [
        {
          provide: AngularFire,
          useValue: AngularFireMocks
        }
      ],
      imports: [
        AngularFireModule.initializeApp(environment.firebase)
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    fixture.detectChanges();
  });
});

我收到错误；

this.angularFire.auth.subscribe is not a function

我不明白为什么，我在测试异步服务时使用了同样的逻辑，但是当对组件执行相同的逻辑时它似乎不起作用。

我也尝试过返回不同类型的可观察对象——比如使用 Observable.create 而不是 Observable.of 以及模拟 auth class 并监视订阅函数并返回一个对象，但它似乎不起作用。

Answer 1

我认为问题在于 auth 不是作为函数 (auth()) 调用的，而是作为属性访问的。 and.returnValue 可能只适用于函数（以及调用函数时）。你可以通过

让它工作

let AngularFireMocks = {
  auth: Observable.of({ uid: 'ABC123' })
};

忘了间谍吧。

使用 Jasmine 进行 Angular2 AngularFire Auth 测试

Angular2 AngularFire Auth testing with Jasmine

unit-testing

jasmine

firebase-authentication

angularfire2

angular