如何测试此角度分量
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何测试此角度分量相关的知识,希望对你有一定的参考价值。
我在Angular单元测试中相对较新。我正在编写测试,但无法正常工作。
这是我的app.component.ts
import Component from '@angular/core';
import Platform from '@ionic/angular';
import AuthService from "./services/auth.service";
import DatabaseService from "./services/database.service";
import Plugins, StatusBarStyle from '@capacitor/core';
import SchoolService from "./services/school.service";
import filter, flatMap, map, tap from "rxjs/operators";
import BehaviorSubject, forkJoin, from from "rxjs";
import AppService from "./services/app.service";
import User from "./interfaces/user";
import ProfileImageType from "./enums/profile-image-type.enum";
import SyncService from "./services/sync.service";
const SplashScreen, StatusBar = Plugins;
@Component(
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
)
export class AppComponent
user$ = new BehaviorSubject<User>(null);
profileImageType = ProfileImageType;
constructor(
private platform: Platform,
private authService: AuthService,
private databaseService: DatabaseService,
private schoolService: SchoolService,
private appService: AppService,
private syncService:SyncService,
)
this.initializeApp();
this.authService.getUserDetails().subscribe(user => this.user$.next(user))
initializeApp()
from(this.platform.ready())
.pipe(
tap(() =>
StatusBar.setStyle(
style: StatusBarStyle.Dark,
).catch(err=>console.log('status bar failed'));
StatusBar.setBackgroundColor(
color:"#d11a20"
).catch(err=>console.log('status bar failed'));
),
flatMap(() => this.authService.getToken()),
tap(() => SplashScreen.hide()),
filter(token => token != null),
map(token => this.authService.token = token),
tap(() => this.schoolService.loadSchoolDetails()),
flatMap(() => forkJoin(
db: this.databaseService.setUpDataBase(),
user: this.authService.loadUserData()
)),
tap(() => this.syncService.sync())
)
.subscribe(res =>
console.log("app component booted");
this.appService.appReady$.next(true)
, err =>
console.error(err)
);
这是我写的测试
import AppComponent from "./app.component";
import async, ComponentFixture, fakeAsync, TestBed from "@angular/core/testing";
import NO_ERRORS_SCHEMA from "@angular/core";
import Platform from "@ionic/angular";
import AuthService from "./services/auth.service";
import DatabaseService from "./services/database.service";
import SchoolService from "./services/school.service";
import AppService from "./services/app.service";
import SyncService from "./services/sync.service";
import BehaviorSubject, of from "rxjs";
import User from "./interfaces/user";
import UserType from "./enums/usertype.enum";
describe("AppComponent", () =>
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let platformSpy, authSpy, databaseSpy, schoolSpy, appSpy, syncSpy, statusSpy, splashSpy
let user: User =
uid: 1,
username: 'someone',
first_name: "Test",
last_name: 'test',
user_type: UserType.ADMIN,
u_img: null
;
beforeEach(async(() =>
platformSpy = jasmine.createSpyObj('Platform', ready: Promise.resolve("web"))
authSpy = jasmine.createSpyObj('AuthService', ['getToken', 'getUserDetails', 'loadUserData'])
databaseSpy = jasmine.createSpyObj('DatabaseService', ['setUpDataBase'])
schoolSpy = jasmine.createSpyObj('SchoolService', ['loadSchoolDetails'])
appSpy = jasmine.createSpyObj('AppService',
appReady$:new BehaviorSubject<boolean>(null)
)
syncSpy = jasmine.createSpyObj('SyncService', ['sync'])
//statusSpy = jasmine.createSpyObj(StatusBar,['setStyle','setBackgroundColor'])
//splashSpy = jasmine.createSpyObj(SplashScreen,'hide')
authSpy.getUserDetails.and.returnValue(of(user))
TestBed.configureTestingModule(
declarations: [AppComponent],
schemas: [NO_ERRORS_SCHEMA],
providers: [
provide: Platform, useValue: platformSpy,
provide: AuthService, useValue: authSpy,
provide: DatabaseService, useValue: databaseSpy,
provide: SchoolService, useValue: schoolSpy,
provide: AppService, useValue: appSpy,
provide: SyncService, useValue: syncSpy,
]
)
.compileComponents();
));
beforeEach(() =>
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
);
it('should create', () =>
expect(component).toBeDefined();
);
it('should set token', fakeAsync(() =>
authSpy.getToken.and.returnValue(of("token"))
databaseSpy.setUpDataBase.and.returnValue(of(true))
authSpy.loadUserData.and.returnValue(of(true))
//expect(authSpy.getToken).toHaveBeenCalled();
expect(platformSpy.ready).toHaveBeenCalled();
))
)
它给我错误appReady $ .next不是一个功能。首先,我试图使用间谍创建伪造的next函数,但是没有用。
[如果有人可以指出正确的方向,这将会有所帮助。
答案
如果appReady$
是AppService中的Subject或Observable,请确保它是公共的并已分配值。
以上是关于如何测试此角度分量的主要内容,如果未能解决你的问题,请参考以下文章
角度测试 - 如何在角度测试中模拟 document.getElementbyId?