Как не надо тестировать

О чем доклад?

1. Тестирование статики
2. Тесты-близнецы
3. Слишком сложный тест:
   • Верстка и сеть
   • Асинхронный код

Тестирование статики - Тест

      
describe('VideoView', () => {
  it('is editable', () => {
    expect(new VideoView().editable).toBe(true);
  });
});
      
    

Тестирование статики - Код

      
class VideoView extends GenericView {
  editable = true;

  // ...
}
      
    

Тестирование статики - Причины

1. "Нужно покрыть любой новый код тестами"
   • Выбросить тест
2. Функционал зависит от статики
   • Протестировать функционал, зависящий от статики

Тестирование статики - Правильный тест

1. Флаг editable - документируемый флаг GenericView (родителя)
   • Проверить, что если флаг указан, показана кнопка редактирования
   • Проверить, что если флаг не указан, спрятана кнопка редактирования
2. Флаг editable был создан специально для VideoView
   • Проверить, что при нажатии на кнопку, показывается форма
   • Проверить, что форма редактирования сохраняет введенные данные

Тестирование статики - Правильный тест

describe('GenericView', () => {
  it('disallows editing by default', () => {
    var view = new GenericView();
    expect(view.$el.find('.edit').length).toBe(0);
  });

  it('allows editing via specifying "editable" flag', () => {
    var view = new GenericView({ editable: true });
    expect(view.$el.find('.edit').length).toBe(1);
  });
});
    

Применим в случае если editable - документированный флаг

Тестирование статики - Правильный тест

describe('GenericView', () => {
  it('disallows editing by default', () => {
    var view = new GenericView();
    expect(view.$el.find('.edit').length).toBe(0);
  });

  it('allows editing via specifying "editable" flag', () => {
    var view = new GenericView({ editable: true });
    expect(view.$el.find('.edit').length).toBe(1);
  });
});
    

Применим в случае если editable - документированный флаг

Тестирование статики - Правильный тест

describe('GenericView', () => {
  it('disallows editing by default', () => {
    var view = new GenericView();
    expect(view.$el.find('.edit').length).toBe(0);
  });

  it('allows editing via specifying "editable" flag', () => {
    var view = new GenericView({ editable: true });
    expect(view.$el.find('.edit').length).toBe(1);
  });
});
    

Применим в случае если editable - документированный флаг

Тестирование статики - Правильный тест

describe('GenericView', () => {
  it('disallows editing by default', () => {
    var view = new GenericView();
    expect(view.$el.find('.edit').length).toBe(0);
  });

  it('allows editing via specifying "editable" flag', () => {
    var view = new GenericView({ editable: true });
    expect(view.$el.find('.edit').length).toBe(1);
  });
});
    

Применим в случае если editable - документированный флаг

Тестирование статики - Правильный тест

describe('GenericView', () => {
  it('disallows editing by default', () => {
    var view = new GenericView();
    expect(view.$el.find('.edit').length).toBe(0);
  });

  it('allows editing via specifying "editable" flag', () => {
    var view = new GenericView({ editable: true });
    expect(view.$el.find('.edit').length).toBe(1);
  });
});
    

Применим в случае если editable - документированный флаг

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Правильный тест

describe('VideoView', () => {
  describe('editing', () => {
    beforeEach(() => {
      this.view = new VideoView();
      view.$el.find('.edit').click();
    });
    it('opens editing popup', () => {
      expect(this.view.$el.find('.editing-popup').length).toBe(1);
    });
    it('saves on editing', () => {
      this.view.$el.find('.title').val('new value').change();
      this.view.$el.find('.save').click();
      expect(this.view.model.get('title')).toBe('new value');
    });
});
     

Тестирование статики - Опасность

Тест-близнец - Stub/Mock

it('performs ajax call to /rest/images', () => {
  sinon.stub(jQuery, 'ajax');

  fetchImages();

  assert(jQuery.ajax.calledWith('/rest/images'));
});
    

Тест-близнец - Код

module.exports = {
  build() {
    firstLib.clean('build')
      .then(() => secondLib.compileJS('src', 'build'))
      .then(() => thirdLib.optimizeCSS())
  }
};
    

Тест-близнец - Код

module.exports = {
  build() {
    firstLib.clean('build')                               // очистка
      .then(() => secondLib.compileJS('src', 'build'))
      .then(() => thirdLib.optimizeCSS());
  }
};
    

Тест-близнец - Код

module.exports = {
  build() {
    firstLib.clean('build')
      .then(() => secondLib.compileJS('src', 'build'))    // JS
      .then(() => thirdLib.optimizeCSS());
  }
};
    

Тест-близнец - Код

module.exports = {
  build() {
    firstLib.clean('build')
      .then(() => secondLib.compileJS('src', 'build'))
      .then(() => thirdLib.optimizeCSS());                // CSS
  }
};
    

Тест-близнец - Тест

describe('build step', () => {
  beforeEach(() => {
    // Подменяем библиотечные методы моками с resolved promises
    buildSystem.build();
  });

  it('builds, compiles and does something else', () => {
    assert(firstLib.clean.calledWith('build'));

    assert(secondLib.compileJS.calledWith('src', 'build'));

    assert(thirdLib.optimizeCSS.called);
  });
});
    

Тест-близнец - Тест

describe('build step', () => {
  beforeEach(() => {
    // Подменяем библиотечные методы моками с resolved promises
    buildSystem.build();
  });

  it('builds, compiles and does something else', () => {
    assert(firstLib.clean.calledWith('build'));

    assert(secondLib.compileJS.calledWith('src', 'build'));

    assert(thirdLib.optimizeCSS.called);
  });
});
    

Тест-близнец - Тест

describe('build step', () => {
  beforeEach(() => {
    // Подменяем библиотечные методы моками с resolved promises
    buildSystem.build();
  });

  it('builds, compiles and does something else', () => {
    assert(firstLib.clean.calledWith('build'));

    assert(secondLib.compileJS.calledWith('src', 'build'));

    assert(thirdLib.optimizeCSS.called);
  });
});
    

Тест-близнец - Тест

describe('build step', () => {
  beforeEach(() => {
    // Подменяем библиотечные методы моками с resolved promises
    buildSystem.build();
  });

  it('builds, compiles and does something else', () => {
    assert(firstLib.clean.calledWith('build'));             // очистка

    assert(secondLib.compileJS.calledWith('src', 'build'));

    assert(thirdLib.optimizeCSS.called);
  });
});
    

Тест-близнец - Тест

describe('build step', () => {
  beforeEach(() => {
    // Подменяем библиотечные методы моками с resolved promises
    buildSystem.build();
  });

  it('builds, compiles and does something else', () => {
    assert(firstLib.clean.calledWith('build'));

    assert(secondLib.compileJS.calledWith('src', 'build')); // JS

    assert(thirdLib.optimizeCSS.called);
  });
});
    

Тест-близнец - Тест

describe('build step', () => {
  beforeEach(() => {
    // Подменяем библиотечные методы моками с resolved promises
    buildSystem.build();
  });

  it('builds, compiles and does something else', () => {
    assert(firstLib.clean.calledWith('build'));

    assert(secondLib.compileJS.calledWith('src', 'build'));

    assert(thirdLib.optimizeCSS.called);                    // CSS
  });
});
    

Декларативный тест-близнец - Код

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <Header userName={this.props.userName} />
        <Content> {this.props.invitation} </Content>
        <Footer showSocial />
      </div>
    )
  }
}
    

Декларативный тест-близнец - Код

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <Header userName={this.props.userName} />
        <Content> {this.props.invitation} </Content>
        <Footer showSocial />
      </div>
    )
  }
}
    

Декларативный тест-близнец - Код

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <Header userName={this.props.userName} />
        <Content> {this.props.invitation} </Content>
        <Footer showSocial />
      </div>
    )
  }
}
    

Декларативный тест-близнец - Код

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <Header userName={this.props.userName} />
        <Content> {this.props.invitation} </Content>
        <Footer showSocial />
      </div>
    )
  }
}
    

Декларативный тест-близнец - Тест

describe('HomePage', () => {
  beforeEach(() => { /* <HomePage userName="vasya" invitation="hello"/> */ });
  it('renders header with userName', () => {
    let header = TestUtils.findRenderedComponent(this.homePage, Header);
    expect(header.props.userName).toBe('vasya');
  });
  it('renders footer', () => {
    let footer = TestUtils.findRenderedComponent(this.homePage, Footer);
    expect(footer.props.showSocial).toBe(true);
  });
  it('renders invitation', () => {
    expect(this.container.innerHTML).toContain('hello');
  });
});
    

Декларативный тест-близнец - Тест

describe('HomePage', () => {
  beforeEach(() => { /* <HomePage userName="vasya" invitation="hello"/> */ });
  it('renders header with userName', () => {
    let header = TestUtils.findRenderedComponent(this.homePage, Header);
    expect(header.props.userName).toBe('vasya');
  });
  it('renders footer', () => {
    let footer = TestUtils.findRenderedComponent(this.homePage, Footer);
    expect(footer.props.showSocial).toBe(true);
  });
  it('renders invitation', () => {
    expect(this.container.innerHTML).toContain('hello');
  });
});
    

Декларативный тест-близнец - Тест

describe('HomePage', () => {
  beforeEach(() => { /* <HomePage userName="vasya" invitation="hello"/> */ });
  it('renders header with userName', () => {
    let header = TestUtils.findRenderedComponent(this.homePage, Header);
    expect(header.props.userName).toBe('vasya');
  });
  it('renders footer', () => {
    let footer = TestUtils.findRenderedComponent(this.homePage, Footer);
    expect(footer.props.showSocial).toBe(true);
  });
  it('renders invitation', () => {
    expect(this.container.innerHTML).toContain('hello');
  });
});
    

Декларативный тест-близнец - Тест

describe('HomePage', () => {
  beforeEach(() => { /* <HomePage userName="vasya" invitation="hello"/> */ });
  it('renders header with userName', () => {
    let header = TestUtils.findRenderedComponent(this.homePage, Header);
    expect(header.props.userName).toBe('vasya');
  });
  it('renders footer', () => {
    let footer = TestUtils.findRenderedComponent(this.homePage, Footer);
    expect(footer.props.showSocial).toBe(true);
  });
  it('renders invitation', () => {
    expect(this.container.innerHTML).toContain('hello');
  });
});
    

Тест-близнец - Причины

1. "Тестировать изолированные модули в замоканной среде"
   • Выбросить тест
   • Переписать на функциональный
   • Тестировать полезный результат
2. Достижение максимального coverage
   • Выбросить тест
3. Четкое следование методологии TDD
   • Выбросить тест сейчас, но вернуть потом

Тест-близнец - Правильный тест

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <Header userName={this.props.userName} />
        <Content children={this.props.invitation} />
        <Footer showSocial />
      </div>
    )
  }
}
    

Тест-близнец - Правильный тест

describe('HomePage', () => {
  beforeEach(() => { /* <HomePage userName="vasya" invitation="hello"/> */ });
  it('renders social icons', () => {
    let twitterIcon =
      this.container.querySelector('a[href^="https://twitter.com"]');

    expect(twitterIcon).not.toBe(null);
  });
});
    

Тест-близнец - Опасность

Тест-близнец - А как надо?

Особенности тестирования фронтенда

1. Не только JS, но и HTML/CSS
2. Взаимодействие с пользователем
3. Взаимодействие с сервером
4. Асинхронность

Верстка и сеть - Задача

Верстка и сеть - Тест

1. Затаскиваем шаблон для ContactsViewModel в body
2. Мокаем ответ сервера
3. Создаем экземпляр ContactsViewModel
4. Делаем ko.applyBindings()
5. Находим инпут через верстку и меняем его значение
6. Эмулируем на инпуте событие change
7. Достаем через верстку значения текстов
8. Сравниваем значения текстов с ожидаемыми
9. Возвращаем моки сервера на место

Верстка и сеть - Правильный тест

1. Создаем экземпляр ContactsViewModel, передавая ответ через параметр
2. Меняем значение поисковой строки через setter ContactsViewModel
3. Достаем значения текстов через getter ContactsViewModel
4. Сравниваем значения текстов с ожидаемыми

Верстка и сеть - getter/setter

Верстка и сеть - паттерн Page Object

1. Нахождение компонента
2. Получение какого-то значения элемента (текст, атрибут)
3. Произведение действия над компонентом:
   • Клики
   • Редактирование

Верстка и сеть - паттерн Page Object

test() {
    formPageObject.togglePartnersCheckbox();
    formPageObject.avitoBalloon().hide();
    formPageObject.toggleAvitoCheckbox();
    assert(formPageObject.avitoBalloon().visible === false);
}
    

toggleAvitoCheckbox() {
    this.avito().action.toggle.call(this.avito());
    basis.asap.process();
}
      

Верстка и сеть - Советы

1. Выносите больше логики из представления в JS-модуль
2. Тестируйте через методы и свойства JS-модуля, а не через верстку/сеть
3. Перепишите тест на функциональный
4. При необходимости используйте Page Object

Асинхронный код - Код

class SearchForm extends React.Component {
  constructor(props) {
    this.handleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.handleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Код

class SearchForm extends React.Component {
  constructor(props) {
    this.handleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.handleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Код

class SearchForm extends React.Component {
  constructor(props) {
    this.handleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.handleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Код

class SearchForm extends React.Component {
  constructor(props) {
    this.handleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.handleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Тест

1. Мокаем ответ сервера
2. Заменить реальный таймер поддельным
3. Изменить значение инпута
4. Вызвать handleChange
5. Послать поддельному таймеру сигнал о прохождении 200 мс
6. Проверить state
7. Вернуть реальный таймер на место
8. Возвращаем моки сервера на место

Асинхронный код - Правильный код

class SearchForm extends React.Component {
  constructor(props) {
    this.handleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.handleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Правильный код

class SearchForm extends React.Component {
  constructor(props) {
    this.handleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.handleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Правильный код

class SearchForm extends React.Component {
  constructor(props) {
    this.debouncedHandleChange =
      _.debounce(this.handleChange.bind(this), 200);
  }
  renderInput() {
    return <input ref="query" onChange={this.debouncedHandleChange}/>;
  }
  handleChange() {
    this.setState({ state: 'loading' });
    fetchResults(this.refs.query.value).then(results => {
      this.setState({ state: 'loaded', results });
    });
  }
}
    

Асинхронный код - Правильный тест

1. Замокать ответ сервера
2. Изменить значение инпута
3. Вызвать метод handleChange
4. Проверить state
5. Вернуть моки сервера на место

Асинхронный код - Советы

1. Отделите тестируемую логику от кода асинхронных библиотек
2. Тестируйте скрытую логику отдельно
3. Тестируйте асинхронные библиотеки отдельно

Слишком сложный тест - Опасность

1. Прекращение тестирования уже покрытого тестами кода
2. Отключение существующего теста

Критерии оценки

1. Критерии против написания теста
   • Сложность написания теста
   • Сложность поддержки теста
2. За написание теста
   • Стоимость ошибки
   • Вероятность ошибки

Поводы написать тест

1. console.log
2. debugger
3. Ощущение запутанности

Ощущение запутанности