Что лучше начать изучать для тестирования js кода (AngularJS, jQuery)?

Question

[faragly]

Здравствуйте! Настала пора для изучения нового, остановился на тестировании. В данный момент я в этом 0, на чем начать учиться писать тесты, (mocha, karma, jasmine или другое) и хотелось бы узнать о вашем личном опыте - какие общие впечатления, стоит ли время затрат, в чем вам помогают тесты и ссылочки для развития в этом направлении. Заранее благодарю за ответы!

Answer 1

[Константин Китманов]

> mocha, karma, jasmine
mocha и jasmine — это библиотеки для написания юнит-тестов. karma — тулза для запуска тестов в браузерах (открывает кучу новых окошек и в них автоматически прогоняет тесты при изменении кода и тестов).
К mocha в пару еще нужна библотека ассертов, например, chai.

> стоит ли время затрат
Стоит — если делаете что-то, что потом будет поддерживаться. В этом случае экономится время в долгой перспективе.

Answer 2

[Сергей Протько]

тест помогают если они нормально написаны. Например если нет моков апишки, если у вас это есть - беда, обычно все выносится в сервисы и мокается, хотя я не особо люблю такое тестить.

e2e тесты сильно помогают, но я использую для них cucumber.js + protractor, точнее только начинаю.

Comments

[faragly]

спасибо за ответ, можно подробнее на моем примере - у меня есть ангуляр модуль, все файлы модуля отдельно (сервисы, фабрики, котроллер, директива, конфиг и др.), что даст мне написание тестов и вообще как организовать код тестов? Надо к каждому файлу отдельный файл с тестом? Где можно про это прочитать

[Сергей Протько]

faragly: прочитать можно в документации. Юнит тестами скажем стоит покрывать только фильтры, сервисы, директивы. В идеале у вас не должно быть контроллера конкретного состояния и т.д. но если оно и есть - это покрывается только e2e тестами. Взаимодействие с API обычно выносится так же в отдельные сервисы, которые покрываются только e2e тестами, а везде просто мокаются. Писать на все тесты или нет - решать вам. Покрывать тестами все подряд тоже не гуд, ибо если опыта в этом мало есть риск написать кучу тестов которые тестируют сами себя.

Написание тестов всегда дает одно - возможность производить рефакторинг чаще за счет минимизации рисков регрессий. А частый рефакторинг залог чистой архитектуры и уменьшения технического долга.

[faragly]

Сергей Протько: смотрю видео - www.youtube.com/watch?v=KAny2OSYY3Y, начинаю понимать суть... На живом примере можете пальцем ткнуть что нужно покрыть тестами? Вот написанный мной ангуляр-модуль

[Сергей Протько]

faragly: почитайте https://github.com/johnpapa/angular-styleguide, откажитесь от такой структуры проекта

Знаете, если смотреть на ugoria.js то там и без тестирования проблем хватает. Контроллер директивы не должен работать с DOM, вся работа с DOM должна быть вынесена в link. Но это мелочь. Так же не понятно зачем там $compile, насколько я виду это все можно сделать просто указав templateUrl.

Собственно вот эту директиву полюбому надо покрывать тестами, ибо ее надо будет рефакторить в первую очередь.

Сервис keys.js вы тестами особо и не покроете, так как там идет взаимодействие с глобальными элементами какими-то, какой-то jquery... вообще мега стремная штука. Вот эта штука должна быть директивой. Вообще вы не должны использовать выборки по селекторам в angular (только в ооочень редких случаях).

[faragly]

Сергей Протько: Отчасти я руководствовался этим styleguide при написании кода, но структуру впредь сменю. Не вызывал подключение шаблона потому что в этом случае код шаблона вставлялся ВНУТРЬ input поля (replace: false), при replace: true сам input тоже заменяется, это тоже недопустимо, а мне нужно было сразу после input вывести dropdown (спрашивал на тостере). В моем случае функции контроллера работают с dom, в link если переносить, то рушится логика всей директивы... Я над этим вопросом кстати думал, но так и не нашел иного варианта реализации задачи. От jQuery не пытался избавляться, он прям глубоко используется, это очевидный минус, но вот такие вещи как поиск родительского элемента включая сам элемент .closest() не имеет аналога в jqLite, а писать чистый js функции тоже не самый лучший вариант. Я понимаю что работа с dom в angular это редкое явление, но ввиду отсутствия необходимого опыта в построении angular-приложений, ничего другого не удалось придумать. Я отвлекся от первоначального вопроса, плавно перешел к другому)) Но все же был бы рад вашим советам с учетом моего ответа. Спасибо за развернутый ответ.

Answer 3

[DigitalSmile]

Использовали Jasmine + Karma, тестировали сервисы и контроллеры. Помогало сильно, поскольку тесты запускались в CI билде и помогали отсекать много ошибок и опечаток.
Инфы маловато про тестирование (больше "hello world" я ничего толкового не смог найти), поэтому решал проблемы по мерее их поступления через гугл.

Comments

[faragly]

а есть какие то статьи по сравнению различных инструментов, что мне начать изучать - mocha, jasmine или другое? Почему вы выбрали связку Jasmine + Karma, а не что то другое? На чем основан ваш личный выбор?

[Сергей Протько]

faragly: Лично я для юнит тестов выбрал jasmine потому что все остальное то же самое и профита я не увидел в других вариантах. Больше веселья с e2e тестами, тут хоть варианты есть. Опять же у меня бэкэнд покрыт behat-ом (аналог cucumber) так что писать e2e на cucumber.js казалось логичным (с четом того что часть тасков для установки прекондишена просто отправлялась на сервак, чем уменьшалось дублирование кода).

[DigitalSmile]

faragly: именно по тем же критериям, что и Сергей - больших различий в инструментах не заметил, хотя они наверняка есть если прям копнуть. Можно сказать, что основной критерий был "что первое заработает как требуется".