docs(ui): screenshots

melos.yaml

@@ -33,6 +33,7 @@ command:
       cupertino_icons: ^1.0.3
       desktop_drop: '>=0.5.0 <0.8.0'
       device_info_plus: '>=11.0.0 <13.0.0'
+      device_preview: ^1.2.0
       diacritic: ^0.1.5
       dio: ^5.4.3+1
       drift: ^2.28.0
@@ -106,7 +107,7 @@ command:
 
     # List of all the dev_dependencies used in the project.
     dev_dependencies:
-      alchemist: ^0.13.0
+      alchemist: ^0.14.0
       build_runner: ^2.4.9
       connectivity_plus_platform_interface: ^2.0.0
       drift_dev: ^2.28.0
@@ -119,6 +120,11 @@ command:
       path: ^1.8.3
       path_provider_platform_interface: ^2.0.0
       plugin_platform_interface: ^2.0.0
+      stream_core_flutter:
+        git:
+          url: https://github.com/GetStream/stream-core-flutter.git
+          ref: b76e39961f25334e691934f289022fbda863aed2
+          path: packages/stream_core_flutter
       test: ^1.24.6
       theme_extensions_builder: ^7.2.0
 

packages/docs_screenshots/.gitignore

@@ -0,0 +1,2 @@
+# docs_screenshots uses platform (macOS) goldens only
+!**/goldens/macos/*

packages/docs_screenshots/dart_test.yaml

@@ -0,0 +1,5 @@
+# The existence of this file prevents warnings about unrecognized tags when running Alchemist tests.
+
+tags:
+  golden:
+    timeout: 15s

packages/docs_screenshots/pubspec.yaml

@@ -0,0 +1,37 @@
+name: docs_screenshots
+description: Golden test screenshots for Stream Chat Flutter documentation.
+publish_to: none
+
+# Note: The environment configuration and dependency versions are managed by Melos.
+#
+# Do not edit them manually.
+#
+# Steps to update dependencies:
+#   1. Modify the version in the melos.yaml file.
+#   2. Run `melos bootstrap` to apply changes.
+
+environment:
+  sdk: ^3.10.0
+  flutter: ">=3.38.1"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  stream_chat_flutter: ^10.0.0-beta.13
+
+dev_dependencies:
+  alchemist: ^0.14.0
+  device_preview: ^1.2.0
+  flutter_test:
+    sdk: flutter
+  mocktail: ^1.0.0
+  plugin_platform_interface: ^2.0.0
+  record: ">=5.2.0 <7.0.0"
+  stream_core_flutter:
+    git:
+      url: https://github.com/GetStream/stream-core-flutter.git
+      ref: b76e39961f25334e691934f289022fbda863aed2
+      path: packages/stream_core_flutter
+
+flutter:
+  uses-material-design: true

packages/docs_screenshots/test/channel/channel_header_test.dart

@@ -0,0 +1,85 @@
+import 'package:alchemist/alchemist.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+import '../src/golden_theme.dart';
+import '../src/mocks.dart';
+
+Widget _buildChannelHeaderScaffold({
+  required MockClient client,
+  required MockChannel channel,
+  StreamChannelHeader? header,
+}) {
+  return MaterialApp(
+    theme: docsScreenshotsTheme(),
+    debugShowCheckedModeBanner: false,
+    home: StreamChat(
+      client: client,
+      streamChatThemeData: docsStreamChatThemeData(),
+      connectivityStream: Stream.value([ConnectivityResult.mobile]),
+      child: StreamChannel(
+        showLoading: false,
+        channel: channel,
+        child: Scaffold(
+          appBar: header ?? const StreamChannelHeader(showBackButton: false),
+        ),
+      ),
+    ),
+  );
+}
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  goldenTest(
+    'channel header default',
+    fileName: 'channel_header',
+    constraints: const BoxConstraints.tightFor(width: 375, height: 56),
+    builder: () {
+      final client = MockClient();
+      final clientState = MockClientState();
+      final channel = MockChannel();
+      final channelState = MockChannelState();
+
+      setupMockChannel(
+        client: client,
+        clientState: clientState,
+        channel: channel,
+        channelState: channelState,
+        channelName: 'General',
+      );
+
+      return _buildChannelHeaderScaffold(client: client, channel: channel);
+    },
+  );
+
+  goldenTest(
+    'channel header with custom title',
+    fileName: 'channel_header_custom_title',
+    constraints: const BoxConstraints.tightFor(width: 375, height: 56),
+    builder: () {
+      final client = MockClient();
+      final clientState = MockClientState();
+      final channel = MockChannel();
+      final channelState = MockChannelState();
+
+      setupMockChannel(
+        client: client,
+        clientState: clientState,
+        channel: channel,
+        channelState: channelState,
+        channelName: 'General',
+      );
+
+      return _buildChannelHeaderScaffold(
+        client: client,
+        channel: channel,
+        header: const StreamChannelHeader(
+          showBackButton: false,
+          title: Text('My Custom Title'),
+        ),
+      );
+    },
+  );
+}

packages/docs_screenshots/test/channel/channel_list_header_test.dart

@@ -0,0 +1,63 @@
+import 'package:alchemist/alchemist.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+import '../src/golden_theme.dart';
+import '../src/mocks.dart';
+
+Widget _buildListHeaderScaffold({
+  required MockClient client,
+  StreamChannelListHeader? header,
+}) {
+  return MaterialApp(
+    theme: docsScreenshotsTheme(),
+    debugShowCheckedModeBanner: false,
+    home: StreamChat(
+      client: client,
+      streamChatThemeData: docsStreamChatThemeData(),
+      connectivityStream: Stream.value([ConnectivityResult.mobile]),
+      child: Scaffold(
+        appBar: header ?? const StreamChannelListHeader(),
+      ),
+    ),
+  );
+}
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  goldenTest(
+    'channel list header default',
+    fileName: 'channel_list_header',
+    constraints: const BoxConstraints.tightFor(width: 375, height: 56),
+    builder: () {
+      final client = MockClient();
+      final clientState = MockClientState();
+      when(() => client.state).thenReturn(clientState);
+      when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id', name: 'Alice'));
+
+      return _buildListHeaderScaffold(client: client);
+    },
+  );
+
+  goldenTest(
+    'channel list header with custom subtitle',
+    fileName: 'channel_list_header_custom_subtitle',
+    constraints: const BoxConstraints.tightFor(width: 375, height: 56),
+    builder: () {
+      final client = MockClient();
+      final clientState = MockClientState();
+      when(() => client.state).thenReturn(clientState);
+      when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id', name: 'Alice'));
+
+      return _buildListHeaderScaffold(
+        client: client,
+        header: const StreamChannelListHeader(
+          subtitle: Text('12 channels'),
+        ),
+      );
+    },
+  );
+}