如何在茉莉花中测试一个功能

Question

谁能帮帮我？我正在尝试测试一个调用 firebase 函数的函数，但是当我调用 main 函数并开始运行 firebase 函数时，出现错误

err TypeError: Cannot read property 'emailPasswordLoginAsPromise' of null

我不知道发生了什么，请按照我的代码：

fdescribe('UserLoginContentComponent', () => {
  let component: UserLoginContentComponent;
  let fixture: ComponentFixture<UserLoginContentComponent>;
  let loginComponent = new UserLoginContentComponent(null,null,null,null,null,null,null);
  
  beforeAll(
    async(() => {
      TestBed.configureTestingModule({
        imports: [
          SharedModule,
          AngularFireModule.initializeApp(environment.firebase),
          RouterTestingModule,
          BrowserAnimationsModule
        ],
        declarations: [UserLoginContentComponent],
        providers: [ 
          AuthService,
          AngularFireAuth,
          AngularFirestore,
          LogService,
          LogPublishersService,
          HttpClient,
          HttpHandler
        ]
      }).compileComponents();

      fixture = TestBed.createComponent(UserLoginContentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();

      spyOn(loginComponent, 'onSubmit').and.callThrough();
      loginComponent.loginModel.email = 'correct email';
      loginComponent.loginModel.password = 'correct password';
    })
  );

  it('component should be create', () => {
    expect(component).toBeTruthy();
  });

  it('Correct login',function(){
    loginComponent.onSubmit().then((x) => {
      console.log('ok:',x)
      //expect something ..
    }).catch((err) => {
      console.log('err',err)
    })
  });
    
});

我正在调用的函数：

onSubmit() {
    //i'm setting my loginModel in the test with email and password
    console.log('this.loginModel',this.loginModel)

    return new Promise((res,rej) => {
      this.authService.emailPasswordLoginAsPromise(this.loginModel).then(userCredential => {
      // do something..
        this.authService.createOrUpdateUserDataFirestore(userCredential, null, avaliacaoChecklist, null, null).then(s => 
        //updating my user or create one
        }).catch(e => {
          //catch if this doesn't update or create
          });
        });
        res('login OK')
      }).catch(e => {
        //open a diaglog if happen something wrong...
        rej('login Fail')
      });
    })
  }

在我的 authService 中，我的 emailloginasPromise 是这样的：

  emailPasswordLoginAsPromise(login) {

    return new Promise((resolveEPL, rejectEPL) => {

      this.angularFireAuth.auth.signInWithEmailAndPassword(login.email, login.password)
        .then(credential => {
          this.updateUserWithAuth(credential.user);
          resolveEPL(credential.user);
        }).catch(e => {
          console.error('emailPasswordLogin', e);
          rejectEPL(e);
        });
    });
  }

这是我第一次测试jasmine，我学习了，但我不知道如何解决这个问题，如何调用异步函数并获得返回。

Answer 1

我发现了问题，按照修复：

当我创建班级的立场时，没有提供 authService，所以现在我正在使用该组件：

component = fixture.componentInstance;

现在我使用这个组件调用我的方法并且所有提供程序都在工作。

按照我的描述：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SharedModule } from '../../shared/shared.module';
import { UserLoginContentComponent } from './user-login-content.component';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthService } from 'src/app/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { LogService } from 'src/app/shared/logger/log.service';
import { LogPublishersService } from 'src/app/shared/logger/log-publishers.service';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

fdescribe('UserLoginContentComponent', () => {
  let component: UserLoginContentComponent;
  let fixture: ComponentFixture<UserLoginContentComponent>;
  
  beforeAll(function(){
      TestBed.configureTestingModule({
        imports: [
          SharedModule,
          AngularFireModule.initializeApp(environment.firebase),
          RouterTestingModule,
          BrowserAnimationsModule
        ],
        declarations: [UserLoginContentComponent],
        providers: [ 
          AuthService,
          AngularFireAuth,
          AngularFirestore,
          LogService,
          LogPublishersService,
          HttpClient,
          HttpHandler
        ]
      }).compileComponents();

      fixture = TestBed.createComponent(UserLoginContentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();

    });
    
});

以及如何测试这个组件？

我正在使用以下测试：

it('COrrect login',(async(done) => {
    component.loginModel.email = 'correctemail@gmail.com';
    component.loginModel.password = 'correctpassword';

    await component.onSubmitTest().then((x) => {
      expect(x).toBe('login OK');
    });
    done();
  }));
  
  it('Wrong login (email)',(async(done) => {
    component.loginModel.email = 'wrongemail@gmail.com';
    component.loginModel.password = 'correctpassword';

    await component.onSubmitTest().then(() => {})
    .catch((err) => {
      expect(err).toBe('login Fail');
    })
    done();
  }));

我的班级关注：

onSubmitTest() {
    return new Promise((res,rej) => {
      this.authService.emailPasswordLoginAsPromise(this.loginModel).then(() => {
        res('login OK')
      }).catch(e => {
        rej('login Fail')
      });
    })
  }

还有我的 authService：

emailPasswordLoginAsPromise(login) {

    return new Promise((resolveEPL, rejectEPL) => {

      this.angularFireAuth.auth.signInWithEmailAndPassword(login.email, login.password)
        .then(credential => {
          resolveEPL(credential.user);
        }).catch(e => {
          rejectEPL(e);
        });
    });
  }

现在我所有的测试都在使用带有 firebase 方法的异步方法