Champ de saisie vide

Question 1

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

});

html angular typescript jasmine karma-jasmine

0

h4sop 4 nov. 2019 à 13:43

Answer

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

Question 2

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

Champ de saisie vide

1 réponse

De nouvelles questions