Пустое поле ввода

Question

Я загружаю данные во всплывающем окне в полях формы. Когда я запускаю его, область ввода заполняется правильной строкой, но когда я пытаюсь это проверить - она ​​пустая ''. Служба не используется во время этого тестирования.

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>

TyepScript

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'.

});

Answer 1

Вместо явного создания экземпляра класса BankDetailsComponent, позвольте TestBed из @angular/core/testing скомпилировать и создать его для вас. Обычно это делается в 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', () => {
     ...
  });
});

Для получения более подробной информации, пожалуйста, обратитесь к Основы тестирования компонентов .