使用 Jasmine 进行 Angular2 AngularFire Auth 测试

Question

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

//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 类以转换订阅的模拟用户。

//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

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

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

Answer 1

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

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

忘记间谍吧。