javascript - Angular - @Inputin testaaminen siihen liitetyn setin kanssa

Minulla on komponentti, joka ottaa argumentin eräänlaisena ohjeena asettaakseen <div>:n koon sen mallissa, ainoa ongelma nyt on, että en ole varma, miten testaisin sitä?

Kutsuin komponenttiani näin, missä small voidaan korvata muilla ennalta määritellyillä kooilla, kuten medium/large jne:

<spinner small></spinner>

Sitten otan tämän @Input(<size>):na ja suoritan setin muuttaakseni koko-muuttujaa, joka sitten välitetään [ngStyle]:iin muuttaakseen näytetyn komponentin koon CSS:ää.

componentti.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;
}

componentti.html

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

Olen testannut onnistuneesti get getSize() -funktiota, mutta olen jäänyt hieman jumiin @Input(<val>) set -funktioiden kohdalla :-/

Vastaus #1

Tietääksesi, minkä testin tehdä, kysy itseltäsi tämä kysymys:

Mitä minun [ominaisuuteni/komponenttini/palveluni/toimintoni/muuttujani/...] tekee?

Tässä tapauksessa asettajasi voivat vastata seuraavalla tavalla

Setterinä, jossa on Input-koristelija, minun pitäisi asettaa size-muuttujan arvo, jos oma arvoni on määrittelemätön. Jos oma arvoni on määritelty, minun pitäisi käyttää oletusarvoa.

Tämä tarkoittaa, että setter-testejäsi näyttävät tältä:

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);
});

Vastaus #2

Stackblitz-demo

Jotta voit vakoilla getter/setter-ominaisuuksia, voit käyttää jasmine spyOnPropertyä:

Joten esimerkissäsi meillä on: 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); 
  });

Muokkaa

Tämä on toinen testi siltä varalta, että asetamme asettajan argumentiksi tyhjän merkkijonon:

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

    component.small = '';

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

Kuten odotettu - small-asettajaa kutsutaan tyhjällä merkkijonolla '' ja size-ominaisuus on 25 tämän vuoksi: this.size=!value ? 25 : this.size;