Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot)

• Автор канала отвечает на просьбы зрителей о создании курса по тестированию JavaScript-приложений.  

• Курс будет полным и всеобъемлющим, охватывающим все аспекты тестирования.  

• Включает теорию, практику и примеры использования различных библиотек и фреймворков.  

• Обсуждение теории тестирования и технологий, используемых в курсе.  

• Практика написания различных видов тестов для различных кейсов и сценариев.  

• Призыв к подписке на телеграм-канал для обсуждения тем, связанных с JavaScript.  

• Введение в пирамиду тестирования и добавление скриншотных тестов.  

• Обзор стека технологий, включая Jest, React Testing Library, и другие.  

• Обучение написанию юнит-тестов, интеграционных тестов и энту-тестов.  

• Тестирование помогает проверить, что функциональность соответствует требованиям.  

• Автотесты позволяют проводить регрессионное тестирование реже.  

• Пример с форматированием даты для демонстрации важности тестов.  

• Тесты делятся на функциональные и нефункциональные.  

• Функциональные тесты включают модульное, интеграционное и энту-тестирование.  

• Нефункциональные тесты проверяют нагрузку, безопасность и регрессионное тестирование.  

• Пирамида тестирования: юнит-тесты должны быть максимально многочисленными, а энту-тесты - минимальными.  

• Описание каждого слоя пирамиды: юнит-тесты, скриншотные тесты, интеграционные тесты и энту-тесты.  

• Юнит-тесты пишутся на отдельные функции, методы и компоненты.  

• Примеры: функции для возведения числа в квадрат, валидации чисел, преобразования массивов.  

• Юнит-тесты помогают проверить функциональность отдельных модулей.  

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

• Пример: сравнение скриншотов до и после изменений для проверки корректности верстки.  

• Скриншотные тесты помогают выявить ошибки в визуальном отображении.  

• Интеграционные тесты проверяют функциональность в связке нескольких модулей.  

• Примеры: тестирование реакт-компонентов, классов и роутеров.  

• Интеграционные тесты помогают проверить ключевые функциональные блоки.  

• Значения в центре квадрата считаются валидными.  

• Один тест-кейс на положительный результат, второй на пограничные значения.  

• Проверка невалидных данных: больше и меньше валидного значения.  

• Вызов функции с валидным значением 50.  

• Проверка пограничных значений 0 и 100.  

• Передача невалидных значений -50 и 150.  

• Инициализация приложения с помощью npm init.  

• Установка jest как зависимости для разработки.  

• Создание папки src и файла test.js для функции валидации.  

• Функция принимает числовое значение и возвращает true или false.  

• Экспорт функции с помощью module.exports.  

• Написание первого теста с использованием функции expect.  

• Запуск тестов через npm run test или веб-шторм.  

• Описание нескольких сценариев с помощью обертки.  

• Проверка валидных и невалидных значений.  

• Добавление тестов для пограничных значений 0 и 100.  

• Запуск тестов и проверка корректности работы функции.  

• Использование метода deepEqual для сравнения объектов.  

• Создание функции для фильтрации массива чисел и преобразования их в строки.  

• Написание тестов для проверки корректности работы функции.  

• Использование метода deepEqual для сравнения массивов.  

• Добавление тестов для проверки работы функции с пустым массивом.  

• Использование метода not для проверки неравенства.  

• Запуск всех тестов и проверка корректности работы функции.  

• Создание функции для возведения числа в квадрат.  

• Написание тестов для проверки корректности работы функции.  

• Использование методов deepEqual и not для сравнения значений.  

• Функция beforeEach вызывается перед каждым тестом и позволяет выполнять операции перед запуском каждого теста.  

• Функция afterEach вызывается после каждого теста и позволяет выполнять операции после завершения каждого теста.  

• Эти функции полезны для очистки данных и выполнения общих действий перед и после тестов.  

• Моки позволяют имитировать поведение функций и проверять их вызовы.  

• Пример использования моков: проверка вызова метода pow при различных значениях аргумента.  

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

• Пример использования метода spy для замокания метода объекта.  

• Пример теста, который проверяет вызов замоканного метода при различных значениях аргумента.  

• Очистка моков перед и после тестов с помощью функции clearMocks.  

• Пример создания функции с задержкой и тестирования её работы.  

• Использование Promises и setTimeout для создания задержки.  

• Пример теста, который проверяет результат выполнения функции с задержкой.  

• Создание функции для отправки запроса на сервер и получения данных.  

• Использование Axios для отправки запроса и получения данных.  

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

• Мокирование Axios для тестирования функции, которая отправляет запрос на сервер.  

• Использование метода mock для замокания Axios.  

• Пример согласования схемы данных с методом get Axios и проверка корректности возвращаемых данных.  

• Функция синхронная, поэтому добавляем приставку "осин".  

• Ожидаем, что метод "аксиус гет" вызовется хотя бы один раз.  

• Проверяем, что метод вернул массив айдишников, преобразованный в строку.  

• Используем метод "у игл" для передачи трех айдишников.  

• Запускаем тест-кейс и проверяем, что все работает корректно.  

• Функция вызвалась один раз, тест провалился при некорректном массиве.  

• Тесты проверяют, как должна работать функция, и сравнивают данные.  

• Даже если функция ничего не возвращает, можно проверить количество вызовов вложенных функций.  

• После вызова "экспект" можно вызвать "ту меч снапшот".  

• Снэпшот сохраняет результат вычислений в файл.  

• Удобно для тестирования компонентов и проверки изменений.  

• Развернули React-приложение с настроенным Jest.  

• Создали файлик для конфигурации тестирования.  

• Добавили логику в компонент и начали тестирование.  

• Используем селекторы для поиска элементов.  

• Проверяем содержимое элемента с помощью регулярного выражения.  

• Проверяем, что элемент появился на странице с помощью функции "тест".  

• Метод "дебак" возвращает разметку после рендеринга компонента.  

• Удобно для отладки и понимания причин ошибок.  

• Снимаем снэпшот с инпута для проверки изменений.  

• Снэпшот сравнивается с текущим состоянием при перезапуске теста.  

• Методы селекторов: "файнт", "гет", "сквери".  

• "Файн" возвращает массив элементов, "файнт бай" ищет один элемент.  

• "Гет" гарантирует наличие элемента, "сквери" проверяет отсутствие элемента.  

• GetByText возвращает объект, а findByText возвращает объект, завернутый в промес.  

• FindByText используется для синхронного использования, а getByText - для гарантированного получения элемента.  

• QueryByText используется для проверки отсутствия элемента на странице.  

• Пример использования findByText для асинхронного кода.  

• Добавление состояния с помощью useState и использование useEffect для асинхронного обновления.  

• Проверка наличия элемента с помощью findByText и добавление условия для отображения блока.  

• Замена регулярного выражения на findByText и добавление условия для отображения блока.  

• Использование expect.then для проверки наличия элемента.  

• Добавление скринкаста для проверки состояния страницы.  

• Проверка наличия стилей у элемента с помощью expect.style.  

• Добавление состояния и функции для переключения состояния кнопки.  

• Добавление блока, который отображается по условию состояния.  

• Использование ID для получения элементов с помощью getByTestId.  

• Пример получения кнопки и проверки её состояния.  

• Использование fireEvent для работы с событиями.  

• Оживление ввода данных с помощью useState и двустороннего связывания.  

• Проверка значения ввода с помощью fireEvent.input.  

• Ожидание изменения состояния заголовка при вводе данных.  

• UserEvent эмулирует полноценное взаимодействие пользователя с системой.  

• Пример использования userEvent для тестирования ввода данных.  

• Сравнение с fireEvent и их различия.  

• Создание файла для тестирования сложного компонента с асинхронной логикой.  

• Инициализация состояния и отображение данных с помощью map.  

• Пример тестирования компонента с асинхронной логикой и подгрузкой данных.  

• Вспоминаем, как мокали Axios для тестирования функции getData.  

• Подготавливаем функцию для получения пользователей с помощью Axios.  

• Импортируем Axios и используем его для асинхронной загрузки данных.  

• Устанавливаем Axios через npm.  

• Копируем и переносим код из первой части урока.  

• Удаляем ненужные данные для упрощения теста.  

• Рендерим компонент и ожидаем, что Axios сделает запрос.  

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

• Проверяем, что список пользователей отображается корректно.  

• Устанавливаем React Router и оборачиваем компонент в роутер.  

• Создаем компоненты для страниц и описываем роуты.  

• Добавляем ссылки для перехода между страницами и тестируем их.  

• Добавляем роуты для обработки несуществующих путей.  

• Создаем компонент для страницы с ошибкой и тестируем его.  

• Проверяем, что при открытии несуществующей страницы происходит редирект на страницу с ошибкой.  

• Тестируем корневой компонент с роутами и ссылками.  

• Создаем компонент Users, который будет отображать список пользователей.  

• Добавляем роуты для отображения детальной информации о пользователях.  

• Добавляем ссылку на страницу Users.  

• Тестируем переход по ссылке на страницу с детальной информацией о пользователе.  

• Обнаруживаем проблему с рендерингом ссылок и роутов.  

• Обертываем компонент Users в Memory Router.  

• Добавляем нужные роуты в Memory Router.  

• Тестируем переход на страницу с детальной информацией о пользователе.  

• Создаем компонент AppRouter для хранения всех роутов.  

• Импортируем AppRouter в корневой компонент.  

• Тестируем переходы между страницами с использованием AppRouter.  

• Создаем хелпер для тестирования переходов между страницами.  

• Функция рендер виз роутер возвращает Memory Router.  

• Используем хелпер для тестирования переходов между страницами.  

• Создаем компонент NavBar для хранения ссылок.  

• Тестируем переходы по ссылкам в NavBar.  

• Исправляем ошибку с тестовым айдишником для компонента Users.  

• Устанавливаем редактор и связываем его с React.  

• Создаем папку store и файл store.js.  

• Создаем редуктор для управления счетчиком.  

• Создаем функцию для создания редактора store.  

• Добавляем корневой редуктор в файл index.js.  

• Тестируем компонент Counter с помощью хука useDispatch.  

• Создаем папку "селекторы" и внутри нее папку "гет каунтер велью".  

• Создаем файл "гет катер джес" для селектора.  

• Используем селектор в компоненте, передавая его как аргумент в useSelector.  

• Открываем браузер и проверяем работу счетчика.  

• Тестируем селектор, передавая пустой объект и ожидая ноль.  

• Если стейт не инициализирован, тест падает.  

• Тестируем инкремент и декремент редюсера.  

• Проверяем, что велью изменяется при изменении стейта.  

• Тестируем случай, когда стейт не инициализирован.  

• Добавляем тесты на кнопки и заголовок.  

• Используем функцию рендер из React Testing Library.  

• Проверяем, что значение счетчика изменяется при клике на кнопку.  

• Создаем провайдер для компонента.  

• Тестируем компонент с использованием провайдера.  

• Проверяем, что тест проходит успешно.  

• Создаем хелпер для обертывания компонента в провайдер.  

• Используем хелпер для тестирования компонента.  

• Проверяем, что хелпер работает корректно.  

• Создаем хелпер, сочетающий роутер и редактор.  

• Используем хелпер для тестирования компонента с роутом и нишел стейтом.  

• Проверяем, что тест проходит успешно.  

• етуе-тесты запускаются на реальных данных в реальном браузере.  

• Используем фреймворк веб-драйвер для етуе-тестов.  

• Устанавливаем веб-драйвер и продолжаем работу в проекте.  

• Инициализация тестов и указание настроек.  

• Использование фреймворкаmocha для запуска тестов.  

• Указание пути для хранения тестов и регулярное выражение для названий файлов.  

• Инициализация базового URL и браузера.  

• Пример теста: открытие страницы, вызов функции логин и проверка алерта.  

• Запуск теста и добавление скрипта для запуска тестов в package.json.  

• Описание взаимодействия с реальной страницей.  

• Создание класса для описания поведения страницы.  

• Пример добавления новой страницы и тестирования.  

• Добавление элементов на страницу и настройка состояний.  

• Написание теста для переключения видимости заголовка.  

• Добавление компонента в роутер для тестирования.  

• Создание файла для Page Object и базового класса.  

• Настройка селекторов для элементов страницы.  

• Написание асинхронного метода для переключения видимости заголовка.  

• Создание файла для теста и импорт Page Object.  

• Описание поведения страницы и проверка ожидаемых результатов.  

• Запуск теста и исправление ошибок при открытии страницы.  

• Проверка валидности ввода текста в инпут.  

• Написание теста для проверки валидного и не валидного ввода.  

• Успешное прохождение тестов и проверка результатов.  

• Создаем компонент для тестирования с асинхронностью.  

• Используем массив пользователей и состояние для отображения загрузки.  

• Применяем функцию для удаления пользователя по ID.  

• Добавляем новый путь в роутер и класс для пейдж обжиг паттерна.  

• Создаем селекторы для получения индикатора загрузки и обертки над списком пользователей.  

• Создаем функцию для проверки загрузки данных с использованием метода waitForDisplay.  

• Создаем отдельный файл для тестирования и импортируем необходимые компоненты.  

• Вызываем функцию для проверки загрузки данных и ожидаем появления индикатора и списка пользователей.  

• Проверяем успешность теста.  

• Создаем функцию для удаления пользователя по ID.  

• Описываем логику внутри блока try-catch для обработки ошибок.  

• Проверяем количество пользователей до и после удаления.  

• Подводим итоги тестирования и подчеркиваем важность написания тестов только на ключевой функционал.  

• Переходим к изучению скриншотных тестов и знакомимся с Storybook.  

• Устанавливаем Storybook и инициализируем его в проекте.  

• Запускаем Storybook и видим, что он позволяет просматривать компоненты в разных состояниях.  

• Используем Storybook для написания тестов и проверки состояний компонентов.  

• Для снятия скриншотов будем использовать библиотеку Loki.  

• Loki позволяет снимать скриншоты со страницы и проверять изменения в компонентах.  

• Примеры будут взяты из нового проекта, развернутого на Mac.  

• Развернули свежий проект с помощью Create-React-App.  

• Инициализировали Storybook и установили зависимости.  

• Запустили Storybook и добавили конфигурацию для скриншотов с разных устройств.  

• Сняли скриншоты с компьютера и iPhone.  

• Скрипты прошли успешно, скриншоты сохранены в папке.  

• Изменили стиль и сняли новые скриншоты, тесты провалились.  

• В папке локи появились папки референс, дифференс и карен.  

• Открыли файл из папки дифференс, чтобы увидеть изменения.  

• Заменили старые скриншоты на новые и продолжили тестирование.  

• Юнит-тесты тестируют отдельные функции и методы.  

• Интеграционные тесты включают несколько модулей.  

• Энту-тесты прогоняются на реальных данных и покрывают ключевой функционал.  

• Видео охватывает различные виды тестов и инструменты.  

• Автор потратил четыре недели на создание материала.  

• Призыв оставить комментарий, поставить лайк и поделиться видео.