Тестирование в Ember.js никогда не было таким простым, а с генераторами Ember-CLI вы получаете простые тесты бесплатно всякий раз, когда создаете новый компонент, контроллер, маршрут или что-то еще! Например, мы можем запустить

$ ember g component foo-bar

Ember-CLI не только сгенерирует класс компонента и его шаблон, но и предоставит вам простой интеграционный тест.

Разрабатывая свой новый блестящий компонент, вы, вероятно, захотите расширить и свои тесты, хотя этот первый выглядит неплохо, не так ли? Так я думал до создания компонента, который присоединял события вне контекста. В частности, компонент, который должен был прослушивать события щелчка, которые происходят вне его самого, чтобы он знал, что он больше не нужен, и мог закрыть. Это обычное поведение во всплывающих подсказках, всплывающих окнах и других функциях пользовательского интерфейса.

Добавление этой функции в Ember довольно тривиально, особенно если вы используете ember-click-outside. Поскольку мы хорошие граждане (и не являемся поклонниками утечек памяти), мы покорно удаляем прослушиватели событий при разрушении компонента, гарантируя, что ничего не останется позади. Все это отлично работает в обычной среде приложения, и я сделал Ember Twiddle, показывающий, что это работает и при дублировании компонента.

Https://ember-twiddle.com/fc5dd5d2cf970d4c3cd944f88c77d6c5

И если вы запустите простой включенный тест, все пройдет успешно.

Однако если щелкнуть в любом месте тестовой страницы, произойдет что-то странное.

Похоже, что к окну все еще прикреплено событие, и это вызовет проблемы, если у вас есть несколько тестов компонентов, которые реализуют это поведение. Так что же здесь произошло?

Возможно, вы помните, что первый тест, который был сгенерирован для нашего компонента, визуализировал компонент с содержанием блока и без него в одном тесте. Похоже, что разборка ссылается только на один из обработчиков событий, оставляя другой на странице осиротевшим. (если у вас есть дополнительная информация о том, почему это происходит, дайте мне знать!)

К счастью, исправить это довольно просто. Мы позаботимся о том, чтобы компонент отображался только один раз за тест. Это дает нам следующие более безопасные тесты.

Приведенный выше макет обеспечивает правильную настройку и удаление глобальных событий каждый раз.

Резюме

Если вы создаете компоненты, которые регистрируют события вне экосистемы Ember, обязательно удалите их в ловушке willDestroyElement жизненного цикла. В тестах интеграции компонентов обязательно визуализируйте компонент только один раз за тест, чтобы события можно было правильно удалить. Это приведет к более счастливым испытаниям для всех.