Angular 角度10：执行测试时无法读取未定义的属性

为了学习Angular，我决定创建一个todo列表克隆。
我定义了以下接口和组件：

列表项：

import { Step } from './step';

export interface ListItem {
    id: number;
    description: string;
    done: boolean;
    steps: Step[];
}

步骤：

step.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ListItem } from '../listitem';
import { Step } from '../step';
import { StepService } from '../step.service';

@Component({
  selector: 'app-step',
  templateUrl: './step.component.html',
  styleUrls: ['./step.component.css']
})
export class StepComponent implements OnInit {

  @Input() listItem: ListItem;

  constructor(private stepService: StepService) { }

  ngOnInit(): void {
  }

  onSetStepDone(step: Step): void {
    this.stepService.setStepDone(step);
  }
}

step.component.html

<div class="section-item">
    <span class="title">Steps</span>
    <ul class="steps">
        <li *ngFor="let step of listItem.steps">
            <div class="steps-body">
                <div *ngIf="step.done === true; else stepNotDone">
                    <div (click)="onSetStepDone(step)">
                        <span data-is-focusable="true" class="checkBox-sm completed big" role="checkbox" aria-checked="true" tabindex="0">
                            <i class="icon svgIcon ms-Icon checkbox-completed-20">
                                <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                    <path fill-rule="evenodd" d="M10.9854 15.0752l-3.546-3.58 1.066-1.056 2.486 2.509 4.509-4.509 1.06 1.061-5.575 5.575zm1.015-12.075c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z"></path>
                                </svg>
                            </i>
                        </span>
                    </div>
                </div>

                <button tabindex="0" class="steps-titleWrapper">
                    <span class="listItem-title" [class.done]="listItem.done == true">
                        {{step.description}}  
                    </span>
                </button>
            </div>        
        </li>
    </ul>
            
</div>

<ng-template #stepNotDone>
    <div (click)="onSetStepDone(step)">
        <span data-is-focusable="true" class="checkBox-sm big" role="checkbox" aria-checked="false" tabindex="0">
            <i class="icon">
                <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                    <path fill-rule="evenodd" d="M12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-17c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9"></path>
                </svg>
            </i>
            <i class="icon checkBox-sm-hover">
                <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                    <g fill-rule="evenodd">
                        <path d="M12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-17c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9"></path>
                        <path d="M10.9902 13.3027l-2.487-2.51-.71.704 3.193 3.224 5.221-5.221-.707-.707z"></path>
                    </g>
                </svg>
            </i>
        </span>
    </div>
</ng-template>

台阶


{{step.description}}

当我尝试执行step.component.spec.ts的以下测试时，我得到一个错误，即无法读取属性steps

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

import { StepComponent } from './step.component';

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

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

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

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

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“./step.component”导入{stepmonent}；
描述（'StepComponent'，（）=>{
let组件：StepComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[步骤组件]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（StepComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

我猜这一行是导致测试失败的原因，但我不知道为什么。。。我做错什么了吗

提前感谢

您需要在测试中初始化listItem。

---

在实际应用程序中，它的值是从父组件提供的，但由于测试的范围是您的StepComponent，因此@Input没有提供任何值（因此它是未定义的）

谢谢，这完全有意义，并解决了我的问题！：）

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

import { StepComponent } from './step.component';

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

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

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

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