Vyhledávání na webu

javascript - Angular - Testování @Input s připojenou sadou

Mám komponentu, která bere argument jako druh direktivy k nastavení velikosti <div> ve své šabloně, jediný problém nyní je, že si nejsem jistý, jak to otestovat?

Komponentu jsem zavolal takto, kde small lze nahradit jinými předdefinovanými velikostmi, jako jsou medium/large atd:

<spinner small></spinner>

Pak to vezmu jako @Input(<size>) a provedu set, abych změnil proměnnou velikosti, která je pak předána do [ngStyle] pro změnu CSS velikosti zobrazené komponenty.

component.ts

size: number;

@Input('small') set small(value) {
  this.size = !value ? 25 : this.size;
}

get getSize() {
  const myStyle = {
    width: this.size + 'px',
    height: this.size + 'px'
  };
  return myStyle;
}

component.html

<div [ngStyle]="getSize"></div>

Úspěšně jsem otestoval funkci get getSize(), ale u funkce @Input(<val>) set jsem se trochu zasekl :-/

Odpověď č. 1

Abychom věděli, jaký test provést, zeptejte se sami sebe této otázky:

Co dělá moje [vlastnost/součást/služba/funkce/proměnná/...]?

V tomto případě mohou vaši nastavovači odpovědět s

Jako setter s dekorátorem Input bych měl nastavit hodnotu proměnné size, pokud je má vlastní hodnota nedefinovaná. Pokud je má vlastní hodnota definovaná, měl bych se vrátit k výchozí hodnotě.

To znamená, že vaše testy setterů budou vypadat takto:

it('should set size variable with value undefined', () => {
  component.size = 10;
  component.small = '';
  epxect(component.size).toEqual(25);
});

it('should not change size variable with value defined', () => {
  component.size = 10;
  component.small = 'ff';
  epxect(component.size).toEqual(10);
});

Odpověď č. 2

Ukázka Stackblitz

Abyste mohli špehovat vlastnosti getter/setter, můžete použít jasmine spyOnProperty:

Takže ve vašem příkladu máme: obj -> component, propertyName -> ‚small‘, accessType -> ‚set‘ :

  it('call small setter method', () => {
    const small = spyOnProperty(component, 'small', 'set'); // just spyOn setter method of small
    component.size = 10; // set initial value of size to 10

    component.small = 'large'; // set small property which as expected - should call setted method

    // we expect that `small` setter method will be called 
    //  with 'large' argument, since we setted it before 
    expect(small).toHaveBeenCalledWith('large'); 

    // we also expect, that the logic of your setter method works correctly: `this.size = !value ? 25 : this.size;`
    // since we pass value, your `this.size` will not change
    expect(component.size).toBe(10); 
  });

Upravit

Toto je další test v případě, kdy předáme settru argument prázdný řetězec:

it('call small setter method 2', () => {
    const small = spyOnProperty(component, 'small', 'set').and.callThrough();

    component.small = '';

    expect(small).toHaveBeenCalledWith('');
    expect(component.size).toBe(25);
  });

Jak se očekávalo - setter small bude volán s '' prázdným řetězcem a vlastnost size bude 25 kvůli tomu: this.size=!value ? 25 : this.size;

Související články