时间戳

首页 > 解决方案 > 角度测试无法读取未定义的属性“列”

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

问题描述

我正在尝试为组件编写一个测试用例，但我收到错误，因为无法读取未定义的属性“列”。我正在使用角度 6。我正在尝试为组件编写一个测试用例，但我收到错误，因为无法读取未定义的属性“列”。我正在使用角度 6。

这是我的组件代码

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

这是我尝试过的规范的以下代码

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

标签： angularunit-testing

解决方案

params该错误是由于尝试从模板访问时未定义的值引起的。要解决它，请使用安全导航运算符?。

代替，

    params.column

利用，

    params?.column

您可能还想考虑更改params.value为，params?.value否则它也会引发错误。

推荐阅读