角度测试无法读取未定义的属性“列”

Question

I am trying to write a test case for the component but I am getting the error as Cannot read property 'column' of undefined. I am using angular 6.I am trying to write a test case for the component but I am getting the error as Cannot read property 'column' of undefined. I am using angular 6.

Here My code for the component

import { Component, Inject } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from 'src/app/common/confirm-dialog/confirm-dialog.component';

@Component({
  selector: 'ap-grid-render',
  template: `
    <div *ngIf="params.column === 'status'">
      <mat-chip *ngIf="params.value === 'In progress'" color="primary" selected>
        {{ params.value }}
      </mat-chip>
      <mat-chip *ngIf="params.value === 'Approved'" color="accent" selected>
        {{ params.value }}
      </mat-chip>
      <mat-chip *ngIf="params.value === 'Rejected'" color="warn" selected>
        {{ params.value }}
      </mat-chip>
    </div>
    <div *ngIf="params.column === 'edit'">
      <button
        mat-icon-button
        color="accent"
        matTooltip="Edit request"
        matTooltipPosition="above"
        (click)="goToEdit()"
      >
        <fa-icon [icon]="faEdit"></fa-icon>
      </button>
      <button
        mat-icon-button
        color="accent"
        matTooltip="Delete"
        matTooltipPosition="above"
        (click)="deleteDomain()"
      >
        <fa-icon [icon]="faTrashAlt"></fa-icon>
      </button>
    </div>
  `
})
export class GridRendererComponent implements ICellRendererAngularComp {
  public params: any;
  // Icons
  faEdit = faEdit;
  faTrashAlt = faTrashAlt;

  constructor(private router: Router, public dialog: MatDialog) {}

  agInit(params: any): void {
    this.params = params;
  }

  goToEdit() {
    this.router.navigate(['./n-access-request']);
  }

  deleteDomain() {
    this.dialog.open(ConfirmDialogComponent, {
      panelClass: '_small-dialog',
      disableClose: true,
      position: { top: '50px' },
      data: {
        title: 'Delete Domain',
        description: `Are you sure do you want to delete domain Contract ID: ${
          this.params.data.contactId
        }?`
      }
    });
  }

  refresh(params: any) {
    this.params = params;
    return true;
  }
}

Here is the below code for spec which I tried

it('agInit', () => {
    let params = {
          "column" : "status"
           };
    gridRendererComponent.agInit(params);
    expect(gridRendererComponent.params).not.toBe(null);
  });

Answer 1

The error is caused as the value of params is undefined when trying to access from template. To solve it, use safe navigation operator ? .

Instead of,

    params.column

Use,

    params?.column

You might also wanna consider changing params.value to params?.value or it will also throw an error.

Answer 2

Declare the type(class) of params instead of any

 public params: Params;


 export class Params {
    public column :any
    public value :any
 }