О том, как не надо тестировать

О чем доклад?

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
   • Проверить, что VideoView показывает кнопку редактирования
   • Проверить, что при нажатии на кнопку, показывается форма

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

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('/dir1');
  });

  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('/dir1');
  });

  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('/dir1');
  });

  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('/dir1');
  });

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

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

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

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

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

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

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

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

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

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

test() {
    form.toggleTube();
    form.avitoBalloon().hide();
    form.toggleAvito();
    assert(form.avitoBalloon().visible === false);
}
    

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

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

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

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

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

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

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

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

      

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

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

      

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

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

1. Замокать fetchResults
2. Вызвать handleChange с новым значением
3. Проверить state
4. Размокать fetchResults

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

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

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

1. Сложность написания
2. Сложность поддержки
3. Стоимость ошибки
4. Вероятность ошибки