{"id":21748296,"url":"https://github.com/surfstudio/flutter-surf-widget-test-composer","last_synced_at":"2026-04-13T22:02:15.858Z","repository":{"id":196499865,"uuid":"693511920","full_name":"surfstudio/flutter-surf-widget-test-composer","owner":"surfstudio","description":"Utility that simplifies widget and golden testing. Made by Surf 🏄","archived":false,"fork":false,"pushed_at":"2024-04-18T15:15:04.000Z","size":1935,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-08-04T09:32:45.475Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surfstudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-19T07:13:54.000Z","updated_at":"2024-07-17T08:45:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"7dad55a3-92d1-4bdd-bcf8-8b8fb48c1fb4","html_url":"https://github.com/surfstudio/flutter-surf-widget-test-composer","commit_stats":null,"previous_names":["surfstudio/flutter-surf-widget-test-composer"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/surfstudio/flutter-surf-widget-test-composer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surfstudio%2Fflutter-surf-widget-test-composer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surfstudio%2Fflutter-surf-widget-test-composer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surfstudio%2Fflutter-surf-widget-test-composer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surfstudio%2Fflutter-surf-widget-test-composer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surfstudio","download_url":"https://codeload.github.com/surfstudio/flutter-surf-widget-test-composer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surfstudio%2Fflutter-surf-widget-test-composer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31772642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T08:12:56.720Z","updated_at":"2026-04-13T22:02:15.843Z","avatar_url":"https://github.com/surfstudio.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Widget Test Composer\n\n\u003cimg src=\"https://raw.githubusercontent.com/surfstudio/flutter-open-source/main/assets/logo_black.png#gh-light-mode-only\" width=\"200\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/surfstudio/flutter-open-source/main/assets/logo_white.png#gh-dark-mode-only\" width=\"200\"\u003e\n\nMade by [Surf 🏄‍♂️🏄‍♂️🏄‍♂️](https://surf.dev/)\n\n[![Build Status](https://shields.io/github/actions/workflow/status/surfstudio/flutter-surf-widget-test-composer/on_pull_request.yml?logo=github\u0026logoColor=white)](https://github.com/surfstudio/flutter-surf-widget-test-composer)\n[![Coverage Status](https://img.shields.io/codecov/c/github/surfstudio/flutter-surf-widget-test-composer?logo=codecov\u0026logoColor=white)](https://app.codecov.io/gh/surfstudio/flutter-surf-widget-test-composer)\n[![Pub Version](https://img.shields.io/pub/v/surf_widget_test_composer?logo=dart\u0026logoColor=white)](https://pub.dev/packages/surf_widget_test_composer)\n[![Pub Likes](https://badgen.net/pub/likes/surf_widget_test_composer)](https://pub.dev/packages/surf_widget_test_composer)\n[![Pub popularity](https://badgen.net/pub/popularity/surf_widget_test_composer)](https://pub.dev/packages/surf_widget_test_composer/score)\n[![License: Apache 2.0](https://img.shields.io/badge/license-apache-purple.svg)](https://www.apache.org/licenses/LICENSE-2.0)\n\n## Overview\n\nWidget Test Composer is a utility package designed to simplify widget and golden testing processes using [golden_toolkit](https://pub.dev/packages/golden_toolkit) package for Flutter applications. Developed by [Surf :surfer:](https://surf.dev/flutter/) Flutter team :cow2:, it offers comprehensive features to facilitate efficient testing workflows.\n\n## Installation\n\nAdd `surf_widget_test_composer` to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  surf_widget_test_composer: $currentVersion$\n```\n\n## Example\n\n### Getting started\n\nYou need to create file `test/flutter_test_config.dart`. There you will specify:\n\n- localizations of your app;\n- themes of your app you need to test;\n- list of devices you want to test on;\n- tolerance for golden tests (the resulting [diffPercent](https://api.flutter.dev/flutter/flutter_test/ComparisonResult/diffPercent.html) must be less than the `tolerance` settings property).\n\nE.g. you have two themes: light and dark. You need to test the app on two devices: iPhone 11, Google Pixel 4a and iPhone SE 1. You need to test the app in two languages: English and Russian. You need to test your app on two locales: US and RU. You also have DI scope that you need to wrap your widget with.\n\nThen your file `test/flutter_test_config.dart` will look like this:\n\n```dart\nimport 'package:surf_widget_test_composer/surf_widget_test_composer.dart'\n    as helper;\n\n/// Localization and locales from auto-generated AppLocalizations.\nconst _localizations = AppLocalizations.localizationsDelegates;\nconst _locales = AppLocalizations.supportedLocales;\n\nFuture\u003cvoid\u003e testExecutable(FutureOr\u003cvoid\u003e Function() testMain) {\n  /// You can specify your own themes.\n  /// Stringified is used for naming screenshots.\n  final themes = [\n    helper.TestingTheme(\n      data: ThemeData.dark(),\n      stringified: 'dark',\n      type: helper.ThemeType.dark,\n    ),\n    helper.TestingTheme(\n      data: ThemeData.light(),\n      stringified: 'light',\n      type: helper.ThemeType.light,\n    ),\n  ];\n\n  /// You can specify your own devices.\n  final devices = [\n    helper.TestDevice(\n      name: 'iphone11',\n      size: const Size(414, 896),\n      safeArea: const EdgeInsets.only(top: 44, bottom: 34),\n    ),\n    helper.TestDevice(\n      name: 'pixel 4a',\n      size: const Size(393, 851),\n    ),\n    helper.TestDevice(\n      name: 'iphone_se_1',\n      size: const Size(640 / 2, 1136 / 2),\n    ),\n  ];\n\n  return helper.testExecutable(\n    testMain: testMain,\n    themes: themes,\n    localizations: _localizations,\n    locales: _locales,\n    wrapper: (child, mode, theme, localizations, locales) =\u003e\n        helper.BaseWidgetTestWrapper(\n      childBuilder: child,\n      mode: mode,\n      themeData: theme,\n      localizations: localizations,\n      localeOverrides: locales,\n      // You can specify dependencies here.\n      dependencies: (child) =\u003e child,\n    ),\n\n    /// You can specify background color of golden test based on current theme.\n    backgroundColor: (theme) =\u003e theme.colorScheme.background,\n    devicesForTest: devices,\n\n    /// You can specify tolerance for golden tests.\n    tolerance: 0.5,\n  );\n}\n```\n\nAccording to the config, **12 goldens** will be generated for each test: **2 locales** x **2 themes** x **3 devises**.\n\n\u003e For example [goldens for SampleItemListView](example/test/src/settings/goldens).\n\n### Usage\n\nNow we can prepare tests.\n\nIf in addition to golden tests you also need widget tests, then you can make something like this:\n\n```dart\nclass MockSettingsService extends Mock implements SettingsService {}\n\nvoid main() {\n  final mockSettingsService = MockSettingsService();\n\n  const widget = SettingsScreen();\n\n  /// Generate golden.\n  testWidget\u003cSettingsScreen\u003e(\n    desc: 'SettingsScreen',\n    widgetBuilder: (context, theme) =\u003e ProviderScope(\n      overrides: [\n        settingsServiceProvider.overrideWithValue(mockSettingsService),\n      ],\n      child: Consumer(\n        builder: (context, ref, _) =\u003e widget.build(context, ref),\n      ),\n    ),\n    setup: (context, mode) {\n      registerFallbackValue(ThemeMode.light);\n\n      when(() =\u003e mockSettingsService.themeMode()).thenAnswer(\n        (_) =\u003e Future.value(ThemeMode.dark),\n      );\n      when(() =\u003e mockSettingsService.updateThemeMode(any()))\n          .thenAnswer((_) =\u003e Future.value());\n    },\n\n    /// Widget tests.\n    test: (tester, context) async {\n      final button = find.byType(DropdownButton\u003cThemeMode\u003e);\n      expect(button, findsOneWidget);\n\n      final floatingActionButton = find.byIcon(Icons.light_mode);\n      expect(floatingActionButton, findsOneWidget);\n\n      verifyNever(() =\u003e mockSettingsService.updateThemeMode(any()));\n      await tester.tap(floatingActionButton);\n      verify(() =\u003e mockSettingsService.updateThemeMode(any())).called(1);\n      await tester.pumpAndSettle();\n\n      expect(find.byIcon(Icons.mode_night), findsOneWidget);\n    },\n  );\n}\n```\n\nIf you just need goldens, then the test might look like this:\n\n```dart\nvoid main() {\n  const widget = SampleItemListView();\n\n  /// Nothing to test, just want to generate the golden.\n  testWidget\u003cSampleItemListView\u003e(\n    desc: 'SampleItemListView - result',\n    widgetBuilder: (context, _) =\u003e widget.build(context),\n    // If we need to indicate that we are testing a specific widget/screen state,\n    // we can fill in the [screenState] field.\n    screenState: 'result',\n  );\n}\n```\n\n\u003e [!WARNING]\n\u003e Always specify the generic type of the widget you are testing (e.g.,`testWidget\u003cTestableScreen\u003e`), as the golden's name generation is based on the widget class name.\n\n### Example for Elementary\n\n```dart\nclass MockElementaryCounterWM extends Mock implements IElementaryCounterWM {}\n\nvoid main() {\n  const int testValue = 5;\n  const widget = ElementaryCounterScreen();\n  final wm = MockElementaryCounterWM();\n\n  /// Generate golden.\n  testWidget\u003cElementaryCounterScreen\u003e(\n    desc: 'ElementaryCounterScreen',\n    widgetBuilder: (context, theme) =\u003e widget.build(wm),\n    setup: (context, mode) {\n      when(() =\u003e wm.title).thenReturn('Elementary Counter');\n      when(() =\u003e wm.value).thenReturn(StateNotifier\u003cint\u003e(initValue: testValue));\n      when(() =\u003e wm.increment()).thenReturn(null);\n    },\n\n    /// Widget tests.\n    test: (tester, context) async {\n      expect(find.widgetWithText(Center, testValue.toString()), findsOneWidget);\n\n      final floatingActionButton = find.byIcon(Icons.add);\n      expect(floatingActionButton, findsOneWidget);\n\n      await tester.tap(floatingActionButton);\n      verify(wm.increment);\n    },\n  );\n}\n```\n\n### Example for Riverpod\n\n```dart\nclass MockRiverpodCounterScreenController extends AutoDisposeNotifier\u003cint\u003e\n    with Mock\n    implements RiverpodCounterScreenController {}\n\nvoid main() {\n  const int testValue = 5;\n  const widget = RiverpodCounterScreen();\n  final mockController = MockRiverpodCounterScreenController();\n\n  final container = ProviderContainer(\n    overrides: [\n      riverpodCounterScreenControllerProvider\n          .overrideWith(() =\u003e mockController),\n    ],\n  );\n\n  /// Generate golden.\n  testWidget\u003cRiverpodCounterScreen\u003e(\n    desc: 'RiverpodCounterScreen',\n    widgetBuilder: (context, theme) =\u003e UncontrolledProviderScope(\n      container: container,\n      child: Consumer(\n        builder: (context, ref, _) =\u003e widget.build(context, ref),\n      ),\n    ),\n\n    setup: (context, mode) {\n      when(() =\u003e mockController.build()).thenReturn(testValue);\n      when(() =\u003e mockController.increment()).thenReturn(null);\n    },\n\n    /// Widget tests.\n    test: (tester, context) async {\n      expect(find.widgetWithText(Center, testValue.toString()), findsOneWidget);\n\n      final floatingActionButton = find.byIcon(Icons.add);\n      expect(floatingActionButton, findsOneWidget);\n\n      await tester.tap(floatingActionButton);\n      verify(() =\u003e mockController.increment()).called(1);\n    },\n  );\n}\n```\n\n### Example for BLoC\n\n```dart\nclass MockBlocCounterBloc extends Mock implements BlocCounterBloc {}\n\nvoid main() {\n  const int testValue = 5;\n  final mockBloc = MockBlocCounterBloc();\n  const widget = BlocCounterView();\n\n  /// Generate golden.\n  testWidget\u003cBlocCounterView\u003e(\n    desc: 'BlocCounterView',\n    widgetBuilder: (context, theme) =\u003e MultiBlocProvider(\n      providers: [\n        BlocProvider\u003cBlocCounterBloc\u003e(create: (_) =\u003e mockBloc),\n      ],\n      child: widget,\n    ),\n\n    setup: (context, mode) {\n      when(() =\u003e mockBloc.state).thenReturn(testValue);\n      when(() =\u003e mockBloc.stream).thenAnswer(\n        (_) =\u003e Stream\u003cint\u003e.fromIterable([testValue]),\n      );\n      when(() =\u003e mockBloc.add(Increment())).thenAnswer((_) =\u003e Future.value());\n      when(() =\u003e mockBloc.close()).thenAnswer((_) =\u003e Future.value());\n    },\n\n    /// Widget tests.\n    test: (tester, context) async {\n      expect(find.widgetWithText(Center, testValue.toString()), findsOneWidget);\n\n      final floatingActionButton = find.byIcon(Icons.add);\n      expect(floatingActionButton, findsOneWidget);\n\n      await tester.tap(floatingActionButton);\n      verify(() =\u003e mockBloc.add(Increment())).called(1);\n    },\n  );\n}\n```\n\n## Generating goldens\n\nDon't forget to generate goldens before use:\n\n```sh\nflutter test --update-goldens --tags=golden\n```\n\n## Additional Information\n\nWhile testing, you can face the following errors:\n\n```sh\n00:05 +0: WHEN tasks are not completedTHEN shows `CircularProgressIndicator`\n══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════\nThe following assertion was thrown while running async test code:\npumpAndSettle timed out\n```\n\nThis error means that the widget you are testing has an infinite loop. Usually this happens when you use looped animations. In order to fix this you can:\n\n- define your custom pump function. E.g.:\n\n```dart\n/// Nothing to test, just want to generate the golden.\n  testWidget\u003cTestableScreen\u003e(\n    'Test screen - loading',\n    widgetBuilder: (_) =\u003e widget.build(wm),\n    /// Since we are testing a specific widget state, we fill in the [screenState] property.\n    screenState: 'loading',\n    /// We define our custom pump function - golden will be generated after 100 milliseconds no matter animation is finished or not.\n    customPump: (tester) =\u003e tester.pump(const Duration(milliseconds: 100)),\n    setup: (context, data) {\n      when(() =\u003e wm.data).thenReturn(EntityValueNotifier.loading());\n      when(() =\u003e wm.theme).thenReturn(Theme.of(context));\n    }\n  );\n```\n\n\u003e **NOTE**: This may lead to a mismatch between same goldens - every time you run the test, the golden may be different.\n\n- you also can use `TestEnvDetector.isTestEnvironment` in your widget. E.g.:\n\n  ```dart\n  CircularProgressIndicator(\n      value: TestEnvDetector.isTestEnvironment ? 0.5 : value,\n      color: Colors.blue,\n    )\n  ```\n\n## Changelog\n\nAll notable changes to this project will be documented in [this file](./CHANGELOG.md).\n\n## Issues\n\nTo report your issues, submit them directly in the [Issues](https://github.com/surfstudio/flutter-surf-widget-test-composer/issues) section.\n\n## Contribute\n\nIf you would like to contribute to the package (e.g. by improving the documentation, fixing a bug or adding a cool new feature), please read our [contribution guide](./CONTRIBUTING.md) first and send us your pull request.\n\nYour PRs are always welcome.\n\n## How to reach us\n\nPlease feel free to ask any questions about this package. Join our community chat on Telegram. We speak English and Russian.\n\n[![Telegram](https://img.shields.io/badge/chat-on%20Telegram-blue.svg)](https://t.me/SurfGear)\n\n## License\n\n[Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurfstudio%2Fflutter-surf-widget-test-composer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurfstudio%2Fflutter-surf-widget-test-composer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurfstudio%2Fflutter-surf-widget-test-composer/lists"}