Angular 10: Cannot read property of undefined when executing test

Question

To learn Angular, I've decided to create a todo-list clone.
I have defined the following interfaces and components:

ListItem:

import { Step } from './step';

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

Step:

export interface Step {
    description: string,
    done: boolean
}

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>

When I try to execute the following test of the step.component.spec.ts, I get the error that the property steps cound not be read.

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();
  });
});

I'm guessing the line <li *ngFor="let step of listItem.steps"> is what makes the test fail but I can't find out why... have I done something wrong?

Thanks in advance

Answer 1

You need to initialize listItem in your test. In a real application its value is provided from the parent component but as the scope of the test is your StepComponent, no value is provided with the @Input (so it's undefined)