DebugElement.Nativelement не определен

Question

Я новичок в модульном тестировании угловых приложений. Я инициализировал переменную component.ts record.products, запись имеет тип 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, изменив

запись: запись; для записи: любой;

Это просто путем изменения типа данных переменной проблема решена !!!