Angular - тестирование @Input с прикрепленным к нему набором - PullRequest
Новая
       7

Angular - тестирование @Input с прикрепленным к нему набором

0 голосов
/ 31 августа 2018

У меня есть компонент, который принимает аргумент в качестве своего рода директивы для установки размера <div> в своем шаблоне, единственная проблема сейчас в том, что я не уверен, как его протестировать?

Я назвал свой компонент следующим образом, где small можно заменить другими предопределенными размерами, такими как medium/large и т. Д .: 

<spinner small></spinner>

Затем я принимаю это за @Input(<size>) и выполняю набор для изменения переменной размера, которая затем передается в [ngStyle] для изменения CSS отображаемого размера компонента.

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>

Я успешно протестировал функцию get getSize(), но я немного застрял в функциях @Input(<val>) set: - /

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Чтобы узнать, какой тест сделать, задайте себе этот вопрос:

Что делает моя [функция / компонент / служба / функция / переменная / ...]?

В этом случае ваши сеттеры могут ответить

Как установщик с декоратором Input, я должен установить значение переменной size, если мое собственное значение не определено. Если мое собственное значение определено, я должен вернуться к значению по умолчанию.

Это означает, что ваши сеттерские тесты будут выглядеть так: 

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);
});
0 голосов
/ 31 августа 2018

Демонстрация Stackblitz

Для отслеживания свойств получателя / установщика вы можете использовать jasmine spyOnProperty :

enter image description here

Итак, в вашем примере мы имеем: 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); 
  });

Редактировать

Это еще один тест, если мы передаем аргументу-установщику пустую строку: 

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

    component.small = '';

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

Как и ожидалось - установщик small будет вызываться с пустой строкой ', а свойство size будет иметь значение 25 из-за этого: this.size = !value ? 25 : this.size;

...