首页 > 解决方案 > 为角度类型创建模拟

问题描述

我正在尝试为 .spec 文件中的类型创建模拟但无法做到这一点,有人可以帮我解决这个问题吗?

组件代码如下

import {Component, Input, OnInit} from '@angular/core';
import {Applications} from '../model/applications';

@Component({
    selector: 'application',
    templateUrl: './application.html',
    styleUrls: ['./application.css']
})
export class Application implements OnInit {

    @Input() rowData: any;

    columnDefinition: any[];
    applications: Applications;

    constructor() {
    }

    ngOnInit() {
        this.columnDefinition = [
            {field: 'appName', header: 'Application Name', class: 'application-name-column'},
            {field: 'appVersion', header: 'Version', class: 'fenix-version-column'}
        ];
    }
}

我的规格如下。

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {Application from './application.component';
import {TableModule} from 'primeng/table';
describe('ApplicationComponent', () => {
    let component: ApplicationComponent;
    let fixture: ComponentFixture<ApplicationComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ApplicationComponent],
            imports: [TableModule]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ApplicationComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

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

我收到以下异常。

Cannot read property 'applications' of undefined
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/ApplicationDetailComponent.ngfactory.js:74:33)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:11054:1)
    at checkAndUpdateView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:10451:1)
    at callViewAction (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:10692:1)
    at execComponentViewsAction (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:10634:1)
    at checkAndUpdateView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:10457:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:11344:1)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:11022:1)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:8838:1)
    at ComponentFixture.push../node_modules/@angular/core/fesm5/testing.js.ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:227:1)

标签: angularjasmineangular-test

解决方案


您的组件上的applications属性需要设置为某个值。这可以像 onInit 一样在 OnInit 中columnDefinitions设置,也可以在组件实例上设置:

component = fixture.componentInstance;
component.applications = [];
fixture.detectChanges();

推荐阅读