Je charge les données dans une fenêtre contextuelle dans les champs de formulaire. Lorsque je l'exécute, la zone d'entrée est remplie d'une chaîne appropriée, mais lorsque j'essaie de la tester, elle est vide ''. Le service n'est pas utilisé pendant ce test.

HTML

<p>
Receiver currency Xpath:
<mat-form-field appearance="outline" class="fields">
    <input #toCurrencyXpath name="toCurrencyXpath"
    (blur)="update(toCurrencyXpath.value)"
    type="text"
    matInput
    [(ngModel)]="data.toCurrencyXpath">
</mat-form-field>
</p>

Manuscrit

bank = {
  name: 'Nordea',
  country: 'DK',
  pageurl: 'http://n.dk',
  buyxpath: 'abc',
  sellxpath: 'abc',
  fromCurrency: 'abc',
  toCurrencyXpath: 'abc',
  unit: 'M100',
  id: 'abc',
};

it('should get receiver currency Xpath', () => {

const detComponent = new BankDetailsComponent(service, bank, fb, dialog);

fixture.whenStable();
fixture.detectChanges();

console.log(detComponent.name);                 //reads the value of the class variable

const currency: HTMLElement = fixture.debugElement.query(By.css('#toCurrencyXpath')).nativeElement;

fixture.whenStable();
fixture.detectChanges();

expect(currency.textContent).toBe('abc');       //Expected '' to be 'abc'.

});

0
h4sop 4 nov. 2019 à 13:43

1 réponse

Au lieu d'instancier explicitement votre classe BankDetailsComponent, laissez TestBed de @angular/core/testing compiler et créer pour vous. Cela se fait généralement en blocs beforeEach.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BankDetailsComponent } from './bank-details.component';

describe('BankDetailsComponent', () => {
  let component: BankDetailsComponent;
  let fixture: ComponentFixture<BankDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BankDetailsComponent ],
      imports: [...],
      providers: [...]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BankDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should get receiver currency Xpath', () => {
     ...
  });
});

Pour plus de détails, veuillez consulter Principes de base des tests de composants .

0
uminder 4 nov. 2019 à 11:53