Test

In the same way that catalog allows you to visualize different examples of the same component to verify if the design is correct based on its dummies, you can also generate unit tests and integration tests.

The tests will be created in the same catalog directory that contains the preview and the dummy of your component.

Tests

dart run catalog:test

your_widget_folder
    |
    |-- catalog
    |   |
    |   |-- dummy
    |   |   |
    |   |   |-- sized_container.dummy.dart      <-- dummy created (only created if not exist)
    |   |   |-- other_container.dummy.dart      <-- dummy created (only created if not exist)
    |   |   
    |   |-- preview
    |   |   |
    |   |   |-- sized_container.preview.dart        <-- preview created (always regenerated) 
    |   |   |-- other_container.preview.dart        <-- preview created (always regenerated) 
    |   |
    |   |-- test
    |       |
    |       |-- sized_container_test.dart      <-- test created (only created if not exist)
    |       |-- other_container_test.dart      <-- test created (only created if not exist)
    |
    |
    |--sized_container.dart                     <-- widget file
    |--other_container.dart                     <-- widget file

After this process, a file named catalog_widget_test.dart will be created inside the root/test directory of your application. This file contains all the tests generated by catalog.

Integration Tests

dart run catalog:integration_test

your_widget_folder
    |
    |-- catalog
    |   |
    |   |-- dummy
    |   |   |
    |   |   |-- sized_container.dummy.dart      <-- dummy created (only created if not exist)
    |   |   |-- other_container.dummy.dart      <-- dummy created (only created if not exist)
    |   |   
    |   |-- integration_test
    |   |   |
    |   |   |-- sized_container_integration_test.dart      <-- instrumented test created (only created if not exist)
    |   |   |-- other_container_integration_test.dart      <-- instrumented test created (only created if not exist)
    |   |   
    |   |-- preview
    |       |
    |       |-- sized_container.preview.dart        <-- preview created (always regenerated) 
    |       |-- other_container.preview.dart        <-- preview created (always regenerated) 
    |
    |--sized_container.dart                     <-- widget file
    |--other_container.dart                     <-- widget file

After this process, a file named catalog_widget_integration_test.dart will be created inside the root/integration_test directory of your application. This file contains all the integration tests generated by catalog.

Test on mobile devices (also emulators):

flutter drive --driver=test_driver/integration_test.dart --target=integration_test/catalog_widget_integration_test.dart

Test on web with:

chromedriver --port=4444

flutter drive --driver=test_driver/integration_test.dart --target=integration_test/catalog_widget_integration_test.dart -d chrome

Sample

import 'package:catalog/catalog.dart';
import 'package:flutter/material.dart';

@Preview(
  description: 'Container with a max width',
  parameters: ['width', 'child'],
)
class SizedContainer extends StatelessWidget {
  final double width;
  final Widget child;

  const SizedContainer({
    super.key,
    this.width = 500,
    required this.child,
  });

  @override
  Widget build(BuildContext context) => Container(
        constraints: BoxConstraints(
          maxWidth: width,
        ),
        child: child,
      );
}

/// AUTOGENERATED FILE.
///
/// Use this file to prepare the preview and the tests:
///
/// - SizedContainerPreview
/// - SizedContainerTest
/// - SizedContainerIntegrationTest
///

import 'package:catalog/catalog.dart';
import 'package:flutter/widgets.dart';

class SizedContainerDummy extends PreviewDummy {
  @override
  List<Dummy> get dummies => List.generate(
        8,
        (index) => Dummy(
          parameters: {
            'width': (index + 1) * 100.0,
            'child': Text(bigText * 4),
          },
        ),
      );
}

/// AUTOGENERATED FILE.
///
/// Use this file to test the widget SizedContainer
///

import 'package:catalog/catalog.dart';
import 'package:flutter/widgets.dart';

import '../dummy/sized_container.dummy.dart';
import '../preview/sized_container.preview.dart';

class SizedContainerTest {
  void main() {
    group(
      'SizedContainer - Tests',
      () {
        testWidgets(
          'Child does not exceed the width',
          (tester) async {
            // prepare the context
            await tester.setupTestContext();

            for (var dummy in SizedContainerDummy().dummies) {
              // prepare the widget
              final widget = buildSizedContainer(dummy);
              await tester.test(widget);

              // get the size of the widget
              final widgetSize = tester.getSize(find.byWidget(widget));

              // check the maximum width
              expect(
                widgetSize.width,
                dummy.parameters['width'],
              );
            }
          },
        );

        testWidgets(
          'Child does exceed the width',
          (tester) async {
            // prepare the context
            await tester.setupTestContext();

            for (var dummy in SizedContainerDummy().dummies) {
              // prepare the widget
              final widget = Container(
                child: dummy.parameters['child'],
              );
              await tester.test(widget);

              // get the size of the widget
              final widgetSize = tester.getSize(find.byWidget(widget));

              // check the maximum width
              expect(
                widgetSize.width,
                greaterThanOrEqualTo(
                  dummy.parameters['width'],
                ),
              );
            }
          },
        );
      },
    );
  }
}