Online Quality Assurance Day 2020 #2 ОЛЕКСАНДР ХОТЕМСЬКИЙ «Антипаттерни та велосипеди в JavaScript автоматизації» telegram: wwww.t.me/goqameetup fb: www.fb.com/goqaevent fb: www.fb.com/qaday.org Сайт: www.qaday.org

1. Anti-patterns and hacks in
JavaScript
2020
xotabu4.github.io

2. Oleksandr Khotemskyi
• Software Development Engineer in Test
• Independent Contractor
• 9+ years in testing
• Primary stack - JavaScript

3. Agenda
• Дырки в языке
• Асинхронные костыли
• NodeJS и его велосипеды
• Квадратные колеса в MochaJS
• Горбы в WebdriverIO

5. Ключевые особенности
• Можно запускать практически везде
• Низкий порог входа
• Нацелен на асинхронность и события

9. https://2019.stateofjs.com/
Front End Frameworks
Front-end frameworks and libraries.

10. Back End Frameworks
JavaScript on the server.
https://2019.stateofjs.com/

11. Mobile & Desktop
JavaScript for mobile devices and desktop apps
https://2019.stateofjs.com/

12. Дырки в языке
Синтаксис и семантика языка

13. Редкие ошибки
• JS старается до последнего не бросать
ошибки и не валить ваш код
• Сравнения - никогда не бросают
ошибок, даже если сравниваются
разные типы
• Математические операции никогда не
бросают ошибок
• Можно обращаться к несуществующим
свойствам массивов и объектов

14. Сравнение
через ==
• Нестрогое сравнение
• Иногда будет приводить к
интересным результатам
• Может неявно приводить
один тип к другому
• Неиссякаемый источник
мемов и троллинга
• На практике же - сравнивать
массив и объект нужно чуть
реже чем никогда

15. Сравнение
через ===
• Строгое сравнение
• Скучней, работает
предсказуемо
• JS хейтеры не любят
вспоминать про него
• На практике - должно
использоваться в первую
очередь

16. Математика в JS
• Математические операции
никогда не бросают
исключений
• Даже деление на 0 не кидает
ошибку а возвращает Infinity
• Максимум что вы получите
NaN (not a number)
• Не делайте всю математику в
одной строке
• Проверяйте результат вашей
математики на NaN

17. Несуществующие свойства
• В JS можно обращаться к несуществующим
свойствам
• А в некоторых случаях - несуществующим
переменным
• Вы получите undefined, что опять же может вызвать
ошибки позже

18. Обращение к свойствам undefined объекта

19. Проверяйте!
До ES2020

20. Проверяйте!
ES2020

21. Проверка - nullish coalescence

22. Необязательные аргументы функций
• Если НЕ передать аргумент в функцию -
ошибка не возникнет
• Аргументы которые не передали будут
undefined
• Это возможно вызовет ошибки в
последующем коде

23. Проблема

24. Аргументы по умолчанию

26. TypeScript
• Опциональная строгая типизация
• Более легкий переход из языков с
строгой типизацией (Java)
• Обратная совместимость с JavaScript
• Автодополнение
• Упрощенный рефакторинг

29. Асинхронные костыли

30. Функции обратного вызова
• Весь асинхронный API NodeJS по
умолчанию на коллбеках
• Хотя еще в 2009 году Promises были
добавлены в NodeJS, но их удалили - для
упрощения
• Коллбеки есть и в других языках
программирования (с похожими
проблемами)

31. Обработка асинхронных ошибок

32. Callback hell
http://callbackhell.com/

33. Решение - promisify+async/await

34. NodeJS и его велосипеды
JavaScript на сервере

35. Dependencies
• Стандартная поставка NodeJS очень
скудная - только самое необходимое
• Все остальное - через npm
• NPM registry - крупнейшее в мире
публичное хранилище библиотек (более
чем 700 тысяч)
• Но нужно тщательно выбирать что
устанавливаешь

36. 1
2
3

37. Local dependencies
• NPM имеет возможность локальной
установки библиотек
• Это удобно если библиотека используется
только в одном проекте
• Библиотеки не будут доступны глобально
через терминал

38. Global dependencies

39. Global vs Local
Скрипты в package.json
сначала пытаются
использовать local
dependencies

40. Global vs Local
Скрипты в терминале будут
использовать GLOBAL
dependencies

41. import/export vs require
• NodeJS как серверная платформа,
нуждался в модульной системе
• Решением стал CommonJS с его -
require/module.exports
синтаксисом
• Но появился ES6 стандарт -
import/export с возможностью
асинхронного импорта
• В NodeJS 14 import/export теперь
stable
• TypeScript дает import/export в
подарок

42. Квадратные колеса в MochaJS

44. Стрелочные функции и this
Имена для
describe/it
Нужна дополнительная
библиотека

46. MochaJS
• Невозможно подключить больше одного
репортера из коробки
• Тяжело указать метаинформацию для
теста (номер тикета, автор, теги…)
• Тяжело формировать свою выборку
тестов для запуска

47. Затычки в WebdriverIO
Selenium Webdriver на JS

48. WebdriverIO
• Требует python и Fibers (courtines
для nodejs)
• Базовый минимальный комплект
чтобы написать простой тест - 55
мегабайт (protractor 18mb)
• При контейнеризации - нужен более
тяжелый контейнер с python
(например ubuntu-based)
• Время установки дольше, и
появляются ошибки специфичные
для операционной системы

49. WebdriverIO
• WebdriverIO требует чтобы в PageObjects
элементы были завернуты в функции
• Это нужно чтобы инициализация
элементов не произошла раньше времени
• Хотя в то же время WebdriverIO заявляет о
поддержке ленивых элементов
• Ошибки будут странными и неочевидными

52. –Bjarne Stroustrup, автор С++
«Есть всего два
типа языков программирования: те,
на которые люди всё время ругаются, и
те, которые никто не использует.»
2020 xotabu4.github.io