Skip to content

Commit 2ea40fb

Browse files
renefloorrenefloor
committed
started with the screenshots for the docs
1 parent 5dfcda0 commit 2ea40fb

21 files changed

+2273
-0
lines changed

‎melos.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ command:
113113
fake_async: ^1.3.1
114114
faker_dart: ^0.2.1
115115
flutter_launcher_icons: ^0.14.2
116+
golden_toolkit: ^0.15.0
116117
freezed: ">=2.4.2 <4.0.0"
117118
json_serializable: ^6.7.1
118119
mocktail: ^1.0.0

‎packages/docs_screenshots/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# docs_screenshots uses platform (macOS) goldens only; CI variants are disabled in flutter_test_config.
2+
**/goldens/ci/
3+
# !**/goldens/macos/*

‎packages/docs_screenshots/dart_test.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# The existence of this file prevents warnings about unrecognized tags when running Alchemist tests.
2+
3+
tags:
4+
golden:
5+
timeout: 15s

‎packages/docs_screenshots/pubspec.yaml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: docs_screenshots
2+
description: Golden test screenshots for Stream Chat Flutter documentation.
3+
publish_to: none
4+
5+
# Note: The environment configuration and dependency versions are managed by Melos.
6+
#
7+
# Do not edit them manually.
8+
#
9+
# Steps to update dependencies:
10+
# 1. Modify the version in the melos.yaml file.
11+
# 2. Run `melos bootstrap` to apply changes.
12+
13+
environment:
14+
sdk: ^3.10.0
15+
flutter: ">=3.38.1"
16+
17+
dependencies:
18+
flutter:
19+
sdk: flutter
20+
stream_chat_flutter: ^10.0.0-beta.12
21+
22+
dev_dependencies:
23+
alchemist: ^0.13.0
24+
golden_toolkit: ^0.15.0
25+
flutter_test:
26+
sdk: flutter
27+
mocktail: ^1.0.0
28+
plugin_platform_interface: ^2.0.0
29+
record: ">=5.2.0 <7.0.0"
30+
31+
flutter:
32+
uses-material-design: true

‎packages/docs_screenshots/test/channel/channel_header_test.dart‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import 'package:alchemist/alchemist.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_test/flutter_test.dart';
4+
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
5+
6+
import '../src/golden_theme.dart';
7+
import '../src/mocks.dart';
8+
9+
Widget _buildChannelHeaderScaffold({
10+
required MockClient client,
11+
required MockChannel channel,
12+
StreamChannelHeader? header,
13+
}) {
14+
return MaterialApp(
15+
theme: docsScreenshotsTheme(),
16+
debugShowCheckedModeBanner: false,
17+
home: StreamChat(
18+
client: client,
19+
connectivityStream: Stream.value([ConnectivityResult.mobile]),
20+
child: StreamChannel(
21+
showLoading: false,
22+
channel: channel,
23+
child: Scaffold(
24+
appBar: header ?? const StreamChannelHeader(showBackButton: false),
25+
),
26+
),
27+
),
28+
);
29+
}
30+
31+
void main() {
32+
TestWidgetsFlutterBinding.ensureInitialized();
33+
34+
goldenTest(
35+
'channel header default',
36+
fileName: 'channel_header',
37+
constraints: const BoxConstraints.tightFor(width: 375, height: 56),
38+
builder: () {
39+
final client = MockClient();
40+
final clientState = MockClientState();
41+
final channel = MockChannel();
42+
final channelState = MockChannelState();
43+
44+
setupMockChannel(
45+
client: client,
46+
clientState: clientState,
47+
channel: channel,
48+
channelState: channelState,
49+
channelName: 'General',
50+
);
51+
52+
return _buildChannelHeaderScaffold(client: client, channel: channel);
53+
},
54+
);
55+
56+
goldenTest(
57+
'channel header with custom title',
58+
fileName: 'channel_header_custom_title',
59+
constraints: const BoxConstraints.tightFor(width: 375, height: 56),
60+
builder: () {
61+
final client = MockClient();
62+
final clientState = MockClientState();
63+
final channel = MockChannel();
64+
final channelState = MockChannelState();
65+
66+
setupMockChannel(
67+
client: client,
68+
clientState: clientState,
69+
channel: channel,
70+
channelState: channelState,
71+
channelName: 'General',
72+
);
73+
74+
return _buildChannelHeaderScaffold(
75+
client: client,
76+
channel: channel,
77+
header: const StreamChannelHeader(
78+
showBackButton: false,
79+
title: Text('My Custom Title'),
80+
),
81+
);
82+
},
83+
);
84+
}

‎packages/docs_screenshots/test/channel/channel_list_header_test.dart‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import 'package:alchemist/alchemist.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_test/flutter_test.dart';
4+
import 'package:mocktail/mocktail.dart';
5+
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
6+
7+
import '../src/golden_theme.dart';
8+
import '../src/mocks.dart';
9+
10+
Widget _buildListHeaderScaffold({
11+
required MockClient client,
12+
StreamChannelListHeader? header,
13+
}) {
14+
return MaterialApp(
15+
theme: docsScreenshotsTheme(),
16+
debugShowCheckedModeBanner: false,
17+
home: StreamChat(
18+
client: client,
19+
connectivityStream: Stream.value([ConnectivityResult.mobile]),
20+
child: Scaffold(
21+
appBar: header ?? const StreamChannelListHeader(),
22+
),
23+
),
24+
);
25+
}
26+
27+
void main() {
28+
TestWidgetsFlutterBinding.ensureInitialized();
29+
30+
goldenTest(
31+
'channel list header default',
32+
fileName: 'channel_list_header',
33+
constraints: const BoxConstraints.tightFor(width: 375, height: 56),
34+
builder: () {
35+
final client = MockClient();
36+
final clientState = MockClientState();
37+
when(() => client.state).thenReturn(clientState);
38+
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id', name: 'Alice'));
39+
40+
return _buildListHeaderScaffold(client: client);
41+
},
42+
);
43+
44+
goldenTest(
45+
'channel list header with custom subtitle',
46+
fileName: 'channel_list_header_custom_subtitle',
47+
constraints: const BoxConstraints.tightFor(width: 375, height: 56),
48+
builder: () {
49+
final client = MockClient();
50+
final clientState = MockClientState();
51+
when(() => client.state).thenReturn(clientState);
52+
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id', name: 'Alice'));
53+
54+
return _buildListHeaderScaffold(
55+
client: client,
56+
header: const StreamChannelListHeader(
57+
subtitle: Text('12 channels'),
58+
),
59+
);
60+
},
61+
);
62+
}

‎packages/docs_screenshots/test/channel/channel_preview_test.dart‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import 'package:alchemist/alchemist.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_test/flutter_test.dart';
4+
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
5+
6+
import '../src/golden_client_stubs.dart';
7+
import '../src/golden_theme.dart';
8+
import '../src/mocks.dart';
9+
10+
void main() {
11+
TestWidgetsFlutterBinding.ensureInitialized();
12+
13+
goldenTest(
14+
'channel preview tile',
15+
fileName: 'channel_preview',
16+
constraints: const BoxConstraints.tightFor(width: 375, height: 80),
17+
builder: () {
18+
final client = MockClient();
19+
final channel = fakeChannel(
20+
client: client,
21+
id: 'general',
22+
name: 'General',
23+
messages: [
24+
Message(
25+
id: 'msg-1',
26+
text: 'Hey everyone! 👋',
27+
user: User(id: 'user-2', name: 'Bob'),
28+
createdAt: DateTime(2024, 6, 1, 10, 30),
29+
),
30+
],
31+
);
32+
33+
return MaterialApp(
34+
theme: docsScreenshotsTheme(),
35+
debugShowCheckedModeBanner: false,
36+
home: StreamChat(
37+
client: client,
38+
connectivityStream: Stream.value([ConnectivityResult.mobile]),
39+
child: Scaffold(
40+
body: StreamChannelListItem(channel: channel),
41+
),
42+
),
43+
);
44+
},
45+
);
46+
47+
goldenTest(
48+
'channel list view',
49+
fileName: 'channel_list_view',
50+
constraints: const BoxConstraints.tightFor(width: 375, height: 400),
51+
builder: () {
52+
final client = MockClient();
53+
54+
final channels = [
55+
fakeChannel(
56+
client: client,
57+
id: 'general',
58+
name: 'General',
59+
messages: [
60+
Message(
61+
id: 'msg-1',
62+
text: 'Hey, how is everyone doing?',
63+
user: User(id: 'user-2', name: 'Bob'),
64+
createdAt: DateTime(2024, 6, 1, 10, 30),
65+
),
66+
],
67+
unreadCount: 2,
68+
),
69+
fakeChannel(
70+
client: client,
71+
id: 'design',
72+
name: 'Design',
73+
messages: [
74+
Message(
75+
id: 'msg-2',
76+
text: 'New mockups are ready!',
77+
user: User(id: 'user-3', name: 'Carol'),
78+
createdAt: DateTime(2024, 6, 1, 9, 15),
79+
),
80+
],
81+
),
82+
fakeChannel(
83+
client: client,
84+
id: 'random',
85+
name: 'Random',
86+
messages: [
87+
Message(
88+
id: 'msg-3',
89+
text: 'Anyone up for lunch?',
90+
user: User(id: 'user-4', name: 'Dave'),
91+
createdAt: DateTime(2024, 5, 31, 12, 0),
92+
),
93+
],
94+
),
95+
fakeChannel(
96+
client: client,
97+
id: 'engineering',
98+
name: 'Engineering',
99+
messages: [
100+
Message(
101+
id: 'msg-4',
102+
text: 'PR #42 is ready for review',
103+
user: User(id: 'user-5', name: 'Eve'),
104+
createdAt: DateTime(2024, 5, 30, 15, 45),
105+
),
106+
],
107+
),
108+
];
109+
110+
final controller = StreamChannelListController.fromValue(
111+
PagedValue(items: channels),
112+
client: client,
113+
);
114+
115+
stubQueryChannelsForGoldens(client, channels);
116+
117+
return MaterialApp(
118+
theme: docsScreenshotsTheme(),
119+
debugShowCheckedModeBanner: false,
120+
home: StreamChat(
121+
client: client,
122+
connectivityStream: Stream.value([ConnectivityResult.mobile]),
123+
child: Scaffold(
124+
body: StreamChannelListView(
125+
controller: controller,
126+
shrinkWrap: true,
127+
),
128+
),
129+
),
130+
);
131+
},
132+
);
133+
134+
goldenTest(
135+
'swipe channel to reveal actions',
136+
fileName: 'swipe_channel',
137+
constraints: const BoxConstraints.tightFor(width: 375, height: 80),
138+
builder: () {
139+
final client = MockClient();
140+
final channel = fakeChannel(
141+
client: client,
142+
id: 'general',
143+
name: 'General',
144+
messages: [
145+
Message(
146+
id: 'msg-1',
147+
text: 'Hey, how is everyone doing?',
148+
user: User(id: 'user-2', name: 'Bob'),
149+
createdAt: DateTime(2024, 6, 1, 10, 30),
150+
),
151+
],
152+
);
153+
154+
return MaterialApp(
155+
theme: docsScreenshotsTheme(),
156+
debugShowCheckedModeBanner: false,
157+
home: StreamChat(
158+
client: client,
159+
connectivityStream: Stream.value([ConnectivityResult.mobile]),
160+
child: Scaffold(
161+
body: Swipeable(
162+
key: const ValueKey('swipeable-channel'),
163+
backgroundBuilder: (context, details) => Container(
164+
color: Colors.red,
165+
alignment: Alignment.centerRight,
166+
padding: const EdgeInsets.symmetric(horizontal: 20),
167+
child: const Icon(Icons.delete, color: Colors.white),
168+
),
169+
child: StreamChannelListItem(channel: channel),
170+
),
171+
),
172+
),
173+
);
174+
},
175+
);
176+
}

0 commit comments

Comments
 (0)