Создать макет для типа в угловых

Question

Я пытался создать макет для типа в файле.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)

Answer 1

applications свойство вашего компонента должно быть установлено на что-то. Это может быть установлено в OnInit как columnDefinitions или установив его на экземпляр компонента:

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