角度测试无法读取未定义的属性“名称" [英] Angular testing Cannot read property 'name' of undefined

问题描述

我有一个ModalComponent，它通过@Input接受父级的一些属性.

I've got a ModalComponent which accepts some properties from parent via @Input.

这会导致测试问题

TypeError:无法读取未定义的属性名称"

TypeError: Cannot read property 'name' of undefined

在ngOnInit中使用了名称，该名称应来自@Input displayeddata.

Name is being used in ngOnInit and should come from @Input displayeddata.

如何在单元测试中通过?

How do I pass it in my unit test?

目前我的测试看起来如此

Currently my test looks so

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ModalComponent, FilterComponent],
            imports: [ReactiveFormsModule, TranslateModule]
        })
            .compileComponents();
    }));

    beforeEach(async () => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        componentName: 'TextareaComponent'
    };
    fixture.detectChanges();
});

it('should create', async () => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        expect(component).toBeTruthy();
    });
});

那是我组件的一项测试，但失败了.

That is the one test for my component and fails.

这是我在console.log(this.displayeddata);

Object
caption: "Caption"
component: "TextareaComponent"
name: "One component"

我也稍微更改了代码(更新后的代码)，现在出现了新错误TypeError: Cannot read property 'caption' of undefined

I also changed my code a bit (updated code) and now getting a new error TypeError: Cannot read property 'caption' of undefined

modal.component.ts

modal.component.ts

export class ModalComponent implements OnInit {
@Input() showenpunctsnow;
@Input() displayeddata;
@Output() ComponentParametrsInputs: FormGroup = this.fb.group({
        name: ['', Validators.required],
        caption: ['', Validators.required],
        component: ['']
    });
constructor(private fb: FormBuilder) {}
ngOnInit() {

        console.log(this.displayeddata);

        this.ComponentParametrsInputs = this.fb.group({
            name: [this.displayeddata.name, Validators.required],
            caption: [this.displayeddata.caption, Validators.required],
            component: [this.displayeddata.componentName]
        });
    }

推荐答案

即使在此问题已经解决的情况下，只要在这里发表评论即可.

Just gonna comment here even though this has already been solved in case anyone else runs into the same issue.

该问题很可能是由于html文件而不是单元测试或组件本身引起的.

The issue most likely arrises from the html file rather than the unit test or component itself.

在您的html文件中:

Within your html file:

• 转到使用{variable}.name
的位置
• 在相应的div部分中，否则添加*ngIf="{variable}"

• Go to where you are using {variable}.name
• within the respective section, div, or otherwise add *ngIf="{variable}"

这应该检查该变量是否首先存在. 然后在您的单元测试中，只需执行以下操作:

This should check to see if this variable exists first. Then within your unit tests, simply do:

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

如果要查看组件是否将加载指定的name:

If you want to then check to see if the component will load with a specified name:

it('should create with specified name', () => {
   component.{variable}.name = 'Foo'

   fixture.detectChanges();
   expect(fixture.debugElement.nativeElement.innerHTML)
    .toContain(component.{variable}.name)
}

这篇关于角度测试无法读取未定义的属性“名称"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！