Widget тесты с помощью ApprovalTests | Flutter / Dart

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

Давайте вкратце повторим, что именно представляют собой ApprovalTests?

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

📋 Как это работает: шаг за шагом

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

• Если измененные результаты полностью совпадают с .approved файлом, то тест пройден.

• Если есть разница, инструмент reporter выделит несоответствие, и тест будет провален.

• Если тест пройден, то .received файл удаляется автоматически. Вы можете изменить это, изменив значение deleteReceivedFile в options. Если тест не пройден, полученный файл остается для анализа.

Вместо этого:

    testWidgets('home page', (WidgetTester tester) async {         await tester.pumpWidget(const MyApp());         await tester.pumpAndSettle();          expect(find.text('You have pushed the button this many times:'), findsOneWidget);         expect(find.text('0'), findsOneWidget);         expect(find.byWidgetPredicate(             (Widget widget) => widget is Text && widget.data == 'hello' &&              widget.key == ValueKey('myKey'),         ), findsOneWidget);         expect(find.text('Approved Example'), findsOneWidget);     }); 

Мы можем сделать так:

    testWidgets('home page', (WidgetTester tester) async {         await tester.pumpWidget(const MyApp());         await tester.pumpAndSettle();          await tester.approvalTest();     }); 

Чтобы включить кастомные типы виджетов вашего проекта в тест и выполнить пост-тестовую проверку, добавьте метод Approved.setUpAll() в метод setUpAll ваших тестов, как показано ниже:

    main() {         setUpAll(() {             Approved.setUpAll();         });     } 

И результат будет примерно таким:

Но если мы, например, что-то изменим и запустим текст, то он покажет нам разницу, где именно. В проекте есть несколько типов Reporter, но стандартным является CommandLineReporter, который выдает разницу в командной строке. Другие репортеры можно найти в репозитории проекта на Github.

Утверждение результатов

Утверждение результатов означает сохранение файла .approved.txt с нужными вам результатами.

— Через инструмент Diff Tool

Большинство инструментов сравнения (IDE Diff Tool) имеют возможность перемещать текст слева направо и сохранять результат.

Чтобы использовать DiffReporter, нужно просто добавить его в options:

 options: const Options(    reporter: const DiffReporter(),  ), 

— Через терминал

Вы можете выполнить команду в терминале, чтобы пройтись по вашим файлам:

dart run approval_tests:review

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

• y — Одобрить полученный файл.

• n — Отклонить полученный файл.

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

Команда dart run approval_tests:review имеет дополнительные опции, включая вывод списка файлов, выбор файла для просмотра из этого списка по индексу и многое другое. Чтобы узнать о ее текущих возможностях, выполните

dart run approval_tests:review --help

— Через свойство approveResult.

Если вы хотите, чтобы результат автоматически сохранялся после выполнения теста, вам нужно использовать свойство approveResult в Options:

void main() {   test('test JSON object', () {     final complexObject = {       'name': 'JsonTest',       'features': ['Testing', 'JSON'],       'version': 0.1,     };      Approvals.verifyAsJson(       complexObject,       options: const Options(         approveResult: true,       ),     );   }); }

В результате мы получим следующий файл
example_test.test_json_object.approved.txt

{   "name": "JsonTest",   "features": [     "Testing",     "JSON"   ],   "version": 0.1 }

— Переименование файла

Вы можете просто переименовать файл .received в .approved.

❓ Какие файловые артефакты исключить?

Вы должны добавлять любые .approved файлы в свою систему контроля исходных текстов. Но .received файлы могут изменяться при любом запуске и должны игнорироваться. Для Git добавьте это в .gitignore:
«gitignore
.received.

Основной пакет: https://pub.dev/packages/approval_tests
С поддержкой widget тестов: https://pub.dev/packages/approval_tests_flutter

Поставьте звезду 💙 на репозиторий, чтобы поддержать проект! 🫰

По всем вопросам обращайтесь через Telegram или по электронной почте yelaman.yelmuratov@gmail.com.