如何测试此角度分量

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?

如何将角度分量输出提取到外部 div

角度分量内的角度分量? `<comp0><comp1></comp1></comp0>`

角度分量,tr为容器

模糊事件未在角度分量上触发

设置角度分量默认值