Campo de entrada vacío

Question 1

Estoy cargando los datos en una ventana emergente en los campos de formulario. Cuando lo ejecuto, el área de entrada se llena con una cadena adecuada, pero cuando estoy tratando de probarlo - está vacío ''. El servicio no se utiliza durante esa prueba.

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

});

html angular typescript jasmine karma-jasmine

0

h4sop 4 nov. 2019 a las 13:43

Answer

En lugar de crear instancias explícitas de la clase BankDetailsComponent, deje que TestBed de @angular/core/testing la compile y la cree por usted. Esto se hace generalmente en bloques 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', () => {
     ...
  });
});

Para más detalles, por favor consulte Conceptos básicos de la prueba de componentes .

0

uminder 4 nov. 2019 a las 11:53

Question 2

En lugar de crear instancias explícitas de la clase BankDetailsComponent, deje que TestBed de @angular/core/testing la compile y la cree por usted. Esto se hace generalmente en bloques 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', () => {
     ...
  });
});

Para más detalles, por favor consulte Conceptos básicos de la prueba de componentes .

0

uminder 4 nov. 2019 a las 11:53

Campo de entrada vacío

1 respuesta

Nuevas preguntas

html