角度单元测试-使用提供者与对象

时间:2020-06-18 18:18:57

标签: angular angular-test angular-testing

我正在尝试为我的角度应用程序做一些单元测试。我对Karma进行单元测试还很陌生。我在嘲笑依赖关系,这就是问题所在。我阅读了一些文档,其中讨论了仅用对象模拟它们。但是,这样做有时会导致以下错误,而在其他情况下则不会。

Error: Invalid provider for the NgModule 'DynamicTestModule' - only instances of Provider and Type are allowed, got: [..., ..., ?[object Object]?, ..., ..., ..., ..., ..., ..., ...]

似乎有时候使用一个对象可以,而有时候则不能。这是为什么?解决以下情况的正确方法是什么?为什么?您如何确定问题出在哪一个注射项目上?

这是规格文件。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { ProfileComponent } from './profile.component';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBar } from '@angular/material/snack-bar';

// The dialog component
import { EditBioDialog } from './edit-dialog/edit-dialog.component';

// Services
import { UserService } from 'app/main/services/user-service.service';
import { AuthService } from 'app/main/services/auth.service';
import { FirebaseService } from 'app/main/services/firebase.service';
import { AngularFireStorage } from '@angular/fire/storage';
import { MarketplaceService } from 'app/main/services/marketplace.service';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

import { mockItems } from 'app/main/services/mockItems';





describe('ProfileComponent', () => {
    let component: ProfileComponent;
    let fixture: ComponentFixture<ProfileComponent>;


    // Mock items unique to this page
    let MarketplaceServiceStub : MarketplaceService;
    let UserService : UserService;
    let AuthServiceStub : AuthService;
    let FirebaseServiceStub :FirebaseService;
    let SnackBarStub : MatSnackBar;
    let FuseTrans : FuseTranslationLoaderService;
    let AngularStorageStub : AngularFireStorage;
    let mockDialog : MatDialog;


    // Mock Items pulled from external mock file
    let MockGroup = new mockItems();
    const AngularFireStub = MockGroup.AngularFireStub();
    const mockDialogRef = MockGroup.mockDialogRef();
    //const mockDialog = MockGroup.mockDialog();
    //const mockSnackBar = MockGroup.mockSnackBar();
    const ActivatedRouteStub = MockGroup.ActivatedRouteStub();

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ ProfileComponent ]
        })
        .compileComponents();
    }));

    beforeEach(() => {

        TestBed.configureTestingModule({
            declarations: [ ProfileComponent ],
            providers: [ { provide: FuseTrans },
                         { provide: ActivatedRoute, useValue : ActivatedRouteStub },
                         { provide: MatDialog, useValue : mockDialog },
                         { provide: UserService, useValue : UserService },
                         { provide: AuthService, useValue : AuthServiceStub },
                         { provide: FirebaseService, useValue : FirebaseServiceStub },
                         { provide: MatSnackBar, useValue : SnackBarStub },
                         { provide: AngularFireStorage, useValue : AngularStorageStub } ]

        });

        fixture = TestBed.createComponent(ProfileComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

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

在代码中,MockItems文件中的函数仅返回对象。这适用于我正在传递数据的情况,而似乎适用于其他情况。

0 个答案:

没有答案