Question

我正在尝试为该组件编写测试用例，但由于无法读取未定义的属性“列”，因此出现错误。我正在使用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);
  });

Answer 1

由于尝试从模板访问时<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:background="@android:color/white" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:adjustViewBounds="true" android:layout_centerInParent="true" android:layout_margin="32dp" android:src="@drawable/fsa2" /> </RelativeLayout>的值未定义，导致该错误。要解决此问题，请使用安全的导航运算符params。

而不是

使用

    params.column

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

Answer 2

声明params而不是any的类型（类）

 public params: Params;


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

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

2 个答案: