javascript - 如何在茉莉花中测试一个功能
问题描述
谁能帮帮我?我正在尝试测试调用 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);
});
});
}
这是我第一次测试茉莉花,我学习了,但我不知道如何解决这个问题,如何调用异步函数并获得回报。
解决方案
我发现了问题,请按照修复:
当我创建我的班级的立场时,没有提供 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')
});
})
}
和我的身份验证服务:
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方法的异步方法
推荐阅读
- javascript - mongo $text {$search: "something"}
- javascript - 为什么我在向我的 API 发送 POST 时收到“帖子验证失败”错误?
- javascript - 如何阻止 esc 在 javascript 中关闭我的全屏视频?
- r - 有没有办法在 R Shiny 中放大滑块输入以提高精度?
- python - Python Snowflake - 大型数据集提取 - 停止迭代/挂起错误
- python - 如何在我的代码中定义我的设置(列表)?
- react-native - 如何在 React Native 中调用事件 scrollView 向上或向下滚动?
- c++ - 我可以在 C++ 模板中使用一些代码作为参数吗?(不添加函数调用)
- r - 在导入 csv 列的子集时,R 中最有效的读取 csv 函数/包是什么
- flutter - flutter_webrtc :如何在 visio 期间向对等方发送短信