Что общего у космического корабля и JavaScript? Оба уже достигли космоса.

Космический корабль Crew Dragon от SpaceX использует JavaScript в основных панелях кабины [1]. Очень круто видеть, куда пришел язык и чего с его помощью можно достичь.

Так же, как ракеты, космические корабли и многие другие, критические и некритические проекты требуют большого количества испытаний перед запуском в производство. В противном случае 'KaBuM! Эффект' может произойти, и если это не фейерверк, он никого не сделает счастливым.

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

Прежде чем начать, нам нужно взглянуть и понять, как все работает под капотом. В этой статье будут рассмотрены основы тестирования с использованием JavaScript, в том числе:

  • Основы тестирования
  • Тестирование с помощью Jest
  • Основы имитации
  • Статический анализ кода

Основы тестирования

Одна из самых распространенных фраз в разработке программного обеспечения: «какого х**…», некоторые говорят, что качество кода можно измерить FPS (f*cks в секунду), слышимым во время разработки. процесс. Дерьмо случается, и исправить его может быть просто, но если оно немного сложнее, то на его решение могут уйти дни, недели и даже месяцы. Таким образом, идея создания автоматизированного теста состоит в том, чтобы попытаться поймать как можно больше ошибок в нашем коде до того, как они произойдут.

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

Чтобы протестировать этот код, вы должны проверить результат своей функции, чтобы подтвердить свое предположение.

В примере вы запускаете и тестируете, чтобы проверить, соответствует ли результат ожидаемому. Хотя эта реализация работает, ее нельзя использовать повторно. Чтобы упростить процесс тестирования, извлеките логику в новый метод, чтобы теперь его можно было использовать для большего количества случаев.

Теперь обновите предыдущий код.

Намного лучше! Тем не менее, нет описания, показывающего, что тестируется, и если вы начнете добавлять больше тестов, и один из них не будет работать, остальные тесты не будут выполняться, поэтому давайте исправим это, инкапсулировав этот код внутри try/catch:

Теперь используйте новую функцию внутри тестового кода.

Открываем терминал и запускаем наш тест:

$ npx babel-node calculator.test.js

В случае ошибки в коде вы увидите следующее сообщение об ошибке.

Поздравляем! Вы создали простую среду тестирования JavaScript. Хорошая новость заключается в том, что уже есть несколько отличных инструментов для автоматизации тестирования. Самый известный — Jest, и вы можете сделать свой тест совместимым с ним, просто удалив одну строку кода и запустив его:

В терминале выполните команду:

$ npx jest calculator.test.js

Это не только это. Давайте продолжим и узнаем больше о том, как тестировать приложение, даже не запуская код (да, это возможно в JavaScript).

Тестирование с Jest

Jest — это восхитительная платформа для тестирования JavaScript с упором на простоту. В него уже встроено большинство функций, которые вы ожидаете от среды тестирования: отличный набор исключений, покрытие кода, насмешки, быстрая работа, хорошая документация и невероятное сообщество вокруг него.

Перво-наперво, вам нужно установить Jest

$ npm install --save-dev jest

После этого обновите файл package.json, чтобы запустить его:

// package.json
...
"scripts": {
  "test": "jest"
},
...

npm run test или также вручную: npx jest

Если хотите, вы также можете запустить jest --init для создания файла конфигурации.

Сравнение значений

Идем дальше, сейчас вы собираетесь создать оружейный модуль для своего космического корабля. Начните создавать простой тестовый пример:

После запуска Jest вот такой результат:

Основными методами сравнения являются toBe и toEqual, toBe использует === для проверки строгого равенства, а toEqual выполняет глубокое сравнение свойств значений с помощью Object.is. эм>. Проверьте этот пример:

Запустив этот тест, мы получим следующий результат:

Вам решать, какой из них лучше подходит для вашего теста, но если вы начинаете с тестирования, использование метода toEqual, вероятно, будет лучшей альтернативой.

Сравнение строк

Регулярное выражение

Jest поддерживает сравнение строк. Кроме того, для сравнения можно использовать обычное регулярное выражение toEqual. Все, что вам нужно, это вызвать метод toMatch и передать строку регулярного выражения.

Длина

Также возможно сравнить длину между двумя строками, используя toHaveLength.

Он работает и с массивом.

Сравнение чисел

Помимо основных методов сравнения, вы можете легко сравнивать числа в своих тестах, используя следующие методы:

  • бытьбольшечемилиравно
  • быть больше, чем
  • бытьменьшечемилиравно
  • toBeLessThan

В следующем примере вы можете использовать цикл, чтобы проверить, меньше ли результат 10.

При изменении значения с 10 на 5 вы получите следующее сообщение об ошибке.

Сравнение массивов

Метод toContain используется для сравнения массивов, которое проверяет, включены ли значения в список.

Сравнение динамических значений

В ситуации, когда у вас нет точного значения, но вы знаете тип объекта, вы можете использовать метод expect.any.

Примитивные значения

Для примитивных значений, таких как строка, число и логические значения, вы можете использовать:

  • expect.any(String)
  • expect.any(Число)
  • expect.any(логическое)

Объекты

Вы можете проверить объект с помощью objectContaining, чтобы увидеть, содержит ли объект некоторые свойства внутри. В этом случае вам не нужно сопоставлять те же свойства объекта, который вы хотите оценить.

Массивы

Также можно использовать arrayContaining для проверки значений и даже комбинировать их со всеми предыдущими проверками.

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

Существует несколько способов обработки асинхронного кода в зависимости от ваших потребностей.

Обратный звонок

Самый простой способ обработки обратного вызова — использовать аргумент single-done при вызове функции обратного вызова. Например,

Обещание

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

Асинхронно/ждите

С другой стороны, использование async/await намного проще. Итак, давайте повторно используем предыдущий пример и изменим его, чтобы вместо этого использовать async/await.

Это просто вкус. Полный список совпадений смотрите в справочной документации.

Основы JavaScript-мока

Иногда при выполнении наших тестов вы не можете полагаться на реальные данные, потому что они медленные, конфиденциальные или по другим причинам.

Насмешки позволяют вам перехватывать или стирать реальную реализацию функции, перехватывать вызовы (и параметры, передаваемые в этих вызовах), а также включать настройку возвращаемых значений во время тестирования.

Один из способов справиться с этой ситуацией — имитировать (подделывать) ваши данные. В Jest уже встроено несколько отличных инструментов для имитации данных. Он использует настраиваемый преобразователь для импорта в ваши тесты, что упрощает имитацию любого объекта за пределами вашего теста. Кроме того, вы можете использовать имитацию импорта с богатым API-интерфейсом Mock Functions, чтобы отслеживать вызовы функций с помощью читаемого тестового синтаксиса.

Давайте сосредоточимся на двух типах макетов, используя Jest, функцию mock и модуль mock.

Мок-функции

Чтобы имитировать функцию, вам просто нужно объявить метод как шутливую функцию: jest.fn(), с этого вы можете начать нашу оценку. Вот краткий пример:

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

Если вы хотите узнать больше, ознакомьтесь со справочной документацией

Мок-модули

Имитация модуля работает так же, как имитация функции, но вместо того, чтобы применять ее к функции, вы должны перехватить импорт модуля.

Вернемся к идее космического корабля. Создайте метод startEngine, который получает функцию обратного вызова в качестве параметра и выполняет HTTP-запрос к серверу API. В этом случае вам нужно имитировать модуль unfetch.

Теперь объявите значения, которые вы хотите для фиктивного модуля.

Существует также альтернативный способ объявить ваш модуль как esModule.

Первый параметр — это имя модуля, а второй — фабричный метод. Теперь вы настроили его так, чтобы выходные значения всегда были одинаковыми.

Используя предыдущий макет, вы можете проверить результаты. При выполнении вывод должен быть таким же, как объявлено ранее.

$ npm run test

Полный список фиктивных функций можно найти в справочной документации.

Статический анализ кода в JavaScript

Существует множество способов, которыми ваше приложение может сломаться. JavaScript — это свободно типизированный язык. Наиболее распространенными ошибками являются опечатки и неправильные типы, такие как неправильное имя переменной или операция суммирования двух строк вместо целых чисел.

Что такое «статический анализ»?

Итак, что же означает «статический анализ» кода? Ответ:

Прогнозирование дефектов в коде без его запуска.

Поскольку JavaScript — это язык сценариев, вместо компилятора, выполняющего анализ кода, вам нужно использовать форматтеры и линтеры, чтобы выполнить работу.

Форматтеры

Средства форматирования — это инструменты, которые могут исправить любые несоответствия стиля, обнаруженные автоматически. Для этой цели могут подойти такие инструменты, как Prettier или StandardJS. Есть несколько вариантов его настройки в соответствии с вашими критериями, и его можно интегрировать с самыми популярными редакторами и IDE.

Чтобы показать вам, как это работает, вот пример неформатированного кода:

Используя красивее, вот результат:

$ npx prettier --write unformatted_code.jsx

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

Помните, что вы пишете код для того, чтобы машина его интерпретировала, а люди — для чтения.

Чем чище и последовательнее ваш код, тем легче понять, что происходит.

Линтеры

Анализ кода — это способ повысить качество кода. Он анализирует код и сообщает список потенциальных проблем с качеством кода. В настоящее время наиболее часто используемым инструментом для этого является ESLint.

ESLint — это инструмент для выявления шаблонов, обнаруженных в коде ECMAScript/JavaScript, и составления отчетов о них.

Давайте проверим наш пример:

Чтобы использовать ESLint, вам необходимо сначала установить его. Затем откройте терминал и введите папку вашего проекта.

$ npx eslint --init

После этого вы можете запустить ESLint для любого файла или каталога, как в этом примере.

$ npx eslint unconsistent_code.js

Линтер показывает, где находятся ошибки в нашем коде, основываясь на наборе правил в файле eslinrc.{js,json,yaml}. Вы также можете добавлять, удалять или изменять любые правила. Например, давайте добавим правило для проверки отсутствия точки с запятой.

// eslint.js
...
rules: {
  semi: ['error', 'always']
},
...

При повторном выполнении результат покажет вам ошибку с новым правилом.

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

Есть некоторые наборы правил, которые можно расширить, поэтому вам не нужно будет устанавливать один за другим, как рекомендуемые правила (" extends": "eslint:recommended"), и другие, созданные сообществом, такие как Airbnb или Стандартные, которые вы можете включить в свой проект.

Полный список правил смотрите в справочной документации.

Заключение

В этой статье вы узнали больше о том, как начать добавлять тесты в свое приложение и понять основы тестирования в JavaScript, Jest, Mocking и Static Code Analysis, и это только начало. Но не беспокойтесь об этом, самое главное — добавлять свои тесты во время написания кода, что избавит вас от многочисленных проблем в будущем.

Ссылка

Узнать больше



Автоматизированный рабочий процесс внешнего интерфейса
Узнайте о современных инструментах, используемых в разработке внешнего интерфейса, и о том, как автоматизировать их в своем рабочем процессе.medium.com





Использовать Tailwind без Tailwind
Tailwind — это очень круто, но пробовали ли вы CSS?medium.com





Разработка собственных веб-компонентов
Веб-компоненты предлагают простой, безопасный и быстрый способ создания компонентов с использованием только технологии браузера.medium.com