DebugElement.Nativelement未定義

Question

我是單位測試角應用程序的新手。 我初始化了component.ts變量record.products，record的類型為Records。 如果單擊刪除按鈕是否為刪除函數，我想進行單元測試。 只有在初始化此記錄變量時，此刪除才會出現在DOM中。 我給出了與這些變量相對應的代碼片段。

Template.html

<tr *ngFor="let product of record.products; let i = index ">
 <td>
   <button (click)="delete(i)" class="btn1">Delete</button>
 </td>
as you see only if record.product is populated delete button will appear in DOM

Component.ts

record : Record; //Record class is below
 productForm: FormGroup;

products = [
    {
      name:'New Product'
    }]

productTemplate = {
    productid : '1',
    productname:'xyz'

  }


ngOnInit() {

    this.productForm = this.form.group({
      productControl: this.products
    });

    this.record['products'] = [];
    this.addProduct();
  }

  addProduct() {
    let product = JSON.parse(JSON.stringify(this.productTemplate));
    product.id  = 'ent-' + UUID.UUID();
    this.record['products'].push(product);
  }

  deleteProduct(i) {
    this.record['products'].splice(i,1);
  }

Record.ts

export class Entitlement {
    id: string;
    products:any;
}

myspec.ts

 it('should delete added product by clicking on delete button',()=>{

let mockRecordData:Record;
component.record=mockRecordData; 

// also tried
mockRecordData.products="some data";
component.record=mockRecordData; 
let buttons=fixture.debugElement.queryAll(By.css('.btn')).nativeElement;// gives error 

console.log(component.record['products']); 
//expected to print some data but gives only error
})

Answer 1

嗨，我通過更改訪問DOM元素刪除按鈕

記錄：記錄; 記錄：任何;

它通過改變變量數據類型的簡單問題就解決了！