diff --git a/super_clones/slack/lib/chat_thread.dart b/super_clones/slack/lib/chat_thread.dart index 8b0e70629..2de714461 100644 --- a/super_clones/slack/lib/chat_thread.dart +++ b/super_clones/slack/lib/chat_thread.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:golden_bricks/golden_bricks.dart'; import 'package:intl/intl.dart'; import 'package:slack/domain/message.dart'; import 'package:slack/domain/user.dart'; @@ -272,11 +273,17 @@ class _MessageTileState extends State<_MessageTile> { padding: const EdgeInsets.only(top: 8.0, right: 10), child: ClipRRect( borderRadius: BorderRadius.circular(6), - child: Image.network( - avatarUrl, - height: 36, + // Switched out network image for rectangle to be able to run golden tests. + child: Container( width: 36, + height: 36, + color: Colors.grey, ), + // child: Image.network( + // avatarUrl, + // height: 36, + // width: 36, + // ), ), ); } @@ -351,7 +358,9 @@ class _MessageTileState extends State<_MessageTile> { ); } - return style; + return style.copyWith( + fontFamily: goldenBricks, + ); } } diff --git a/super_clones/slack/lib/fake_data/fake_messages.dart b/super_clones/slack/lib/fake_data/fake_messages.dart index 557b296a4..008da5bb9 100644 --- a/super_clones/slack/lib/fake_data/fake_messages.dart +++ b/super_clones/slack/lib/fake_data/fake_messages.dart @@ -36,7 +36,7 @@ final fakeMessages = [ from: "2", dateTime: DateTime(2025, 5, 16, 17, 01), message: - "Oh, I've been on the YouTube channel! So many tutorials and demos. Also, here's a visual representation of Flutter's architecture I found useful:\n\n![Flutter Architecture](https://docs.flutter.dev/assets/images/docs/arch-overview/archdiagram.png)", + "Oh, I've been on the YouTube channel! So many tutorials and demos. Also, here's a visual representation of Flutter's architecture I found useful:\n\n", // Temp removed for golden tests:![Flutter Architecture](https://docs.flutter.dev/assets/images/docs/arch-overview/archdiagram.png)", ), _buildMessage( from: "1", diff --git a/super_clones/slack/lib/main.dart b/super_clones/slack/lib/main.dart index 7dd46ad63..2ecccae60 100644 --- a/super_clones/slack/lib/main.dart +++ b/super_clones/slack/lib/main.dart @@ -82,7 +82,9 @@ class _SlackChatPageState extends State { // ^ Don't add padding at the bottom of the screen because // we handle it ourselves. child: DefaultTextStyle( - style: const TextStyle(color: Colors.white), + style: DefaultTextStyle.of(context).style.copyWith( + color: Colors.white, + ), child: _buildBody(), ), ), @@ -205,11 +207,17 @@ class _SlackChatMobileState extends State<_SlackChatMobile> { children: [ ClipRRect( borderRadius: BorderRadius.circular(12), - child: Image.network( - widget.user.avatarUrl, - fit: BoxFit.cover, + // Switched out network image for rectangle to be able to run golden tests. + child: Container( + width: 50, height: 50, + color: Colors.grey, ), + // child: Image.network( + // widget.user.avatarUrl, + // fit: BoxFit.cover, + // height: 50, + // ), ), Positioned( bottom: -1, diff --git a/super_clones/slack/lib/styles.dart b/super_clones/slack/lib/styles.dart index 61871677e..af38be0c7 100644 --- a/super_clones/slack/lib/styles.dart +++ b/super_clones/slack/lib/styles.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:golden_bricks/golden_bricks.dart'; import 'package:super_editor/super_editor.dart'; const backgroundColor = Color(0xFF191E22); @@ -74,7 +75,9 @@ final messageEditorStylesheet = defaultStylesheet.copyWith( style = style.copyWith(color: Colors.orange); } - return style; + return style.copyWith( + fontFamily: goldenBricks, + ); }, ); diff --git a/super_clones/slack/pubspec.lock b/super_clones/slack/pubspec.lock index ff44b7306..071874aac 100644 --- a/super_clones/slack/pubspec.lock +++ b/super_clones/slack/pubspec.lock @@ -17,6 +17,14 @@ packages: url: "https://pub.dev" source: hosted version: "7.4.5" + archive: + dependency: transitive + description: + name: archive + sha256: "2fde1607386ab523f7a36bb3e7edb43bd58e6edaf2ffb29d8a6d578b297fdbbd" + url: "https://pub.dev" + source: hosted + version: "4.0.7" args: dependency: transitive description: @@ -112,6 +120,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.0.8" + device_frame: + dependency: "direct dev" + description: + name: device_frame + sha256: a58796a9a2efc0fd8a7903cee0eed2e2d111f4a7d81fa2319ab89430b020f624 + url: "https://pub.dev" + source: hosted + version: "1.3.0" fake_async: dependency: transitive description: @@ -120,6 +136,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.3.3" + ffi: + dependency: transitive + description: + name: ffi + sha256: "289279317b4b16eb2bb7e271abccd4bf84ec9bdcbe999e278a94b804f5630418" + url: "https://pub.dev" + source: hosted + version: "2.1.4" file: dependency: transitive description: @@ -157,6 +181,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.0.28" + flutter_staggered_grid_view: + dependency: transitive + description: + name: flutter_staggered_grid_view + sha256: "19e7abb550c96fbfeb546b23f3ff356ee7c59a019a651f8f102a4ba9b7349395" + url: "https://pub.dev" + source: hosted + version: "0.7.0" flutter_svg: dependency: "direct main" description: @@ -170,8 +202,15 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_test_goldens: + dependency: "direct dev" + description: + path: "/Users/admin/Projects/flutter_test_goldens" + relative: false + source: path + version: "0.0.1" flutter_test_robots: - dependency: transitive + dependency: "direct dev" description: name: flutter_test_robots sha256: "3b00f2081148bde55190997c2772f934ad2f4529cbcfc4ccfa593f8ddc117a28" @@ -199,6 +238,14 @@ packages: url: "https://pub.dev" source: hosted version: "0.0.4+8" + freezed_annotation: + dependency: transitive + description: + name: freezed_annotation + sha256: c2e2d632dd9b8a2b7751117abcfc2b4888ecfe181bd9fca7170d9ef02e595fe2 + url: "https://pub.dev" + source: hosted + version: "2.4.4" frontend_server_client: dependency: transitive description: @@ -215,6 +262,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.1.3" + golden_bricks: + dependency: "direct main" + description: + name: golden_bricks + sha256: "91fa33d4f65dbb6911214915b3e601ad558ac3c4ff1faf2dd2a57ffe0af35a03" + url: "https://pub.dev" + source: hosted + version: "1.0.0" http: dependency: transitive description: @@ -239,6 +294,14 @@ packages: url: "https://pub.dev" source: hosted version: "4.1.2" + image: + dependency: transitive + description: + name: image + sha256: "4e973fcf4caae1a4be2fa0a13157aa38a8f9cb049db6529aa00b4d71abc4d928" + url: "https://pub.dev" + source: hosted + version: "4.5.4" intl: dependency: "direct main" description: @@ -263,6 +326,14 @@ packages: url: "https://pub.dev" source: hosted version: "0.7.2" + json_annotation: + dependency: transitive + description: + name: json_annotation + sha256: "1ce844379ca14835a50d2f019a3099f419082cfdd231cd86a142af94dd5c6bb1" + url: "https://pub.dev" + source: hosted + version: "4.9.0" leak_tracker: dependency: transitive description: @@ -391,6 +462,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.1.0" + patterns_canvas: + dependency: transitive + description: + name: patterns_canvas + sha256: f839fcc2b365a16c8391f488cb3ef9c78c565fe590664ce29f68fc4cf54f90b8 + url: "https://pub.dev" + source: hosted + version: "0.5.0" petitparser: dependency: transitive description: @@ -399,6 +478,14 @@ packages: url: "https://pub.dev" source: hosted version: "6.1.0" + platform: + dependency: transitive + description: + name: platform + sha256: "5d6b1b0036a5f331ebc77c850ebc8506cbc1e9416c27e59b439f917a902a4984" + url: "https://pub.dev" + source: hosted + version: "3.1.6" plugin_platform_interface: dependency: transitive description: @@ -415,6 +502,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.5.1" + posix: + dependency: transitive + description: + name: posix + sha256: f0d7856b6ca1887cfa6d1d394056a296ae33489db914e365e2044fdada449e62 + url: "https://pub.dev" + source: hosted + version: "6.0.2" pub_semver: dependency: transitive description: @@ -756,5 +851,5 @@ packages: source: hosted version: "3.1.3" sdks: - dart: ">=3.7.0-0 <4.0.0" + dart: ">=3.7.0 <4.0.0" flutter: ">=3.27.0" diff --git a/super_clones/slack/pubspec.yaml b/super_clones/slack/pubspec.yaml index 3c2b35f03..dd2dc4760 100644 --- a/super_clones/slack/pubspec.yaml +++ b/super_clones/slack/pubspec.yaml @@ -28,6 +28,7 @@ dependencies: cupertino_icons: ^1.0.2 flutter_svg: ^2.1.0 intl: ^0.20.2 + golden_bricks: ^1.0.0 dependency_overrides: super_editor: @@ -43,6 +44,11 @@ dev_dependencies: flutter_lints: ^5.0.0 + flutter_test_goldens: + path: /Users/admin/Projects/flutter_test_goldens + device_frame: ^1.3.0 + flutter_test_robots: ^0.0.24 + flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in diff --git a/super_clones/slack/test_goldens/flutter_test_config.dart b/super_clones/slack/test_goldens/flutter_test_config.dart new file mode 100644 index 000000000..2b7e9cdb5 --- /dev/null +++ b/super_clones/slack/test_goldens/flutter_test_config.dart @@ -0,0 +1,17 @@ +import 'dart:async'; +import 'dart:io'; + +import 'package:flutter_test_goldens/flutter_test_goldens.dart'; +import 'package:super_text_layout/super_text_layout.dart'; + +Future testExecutable(FutureOr Function() testMain) async { + // Adjust the theme that's applied to all golden tests in this suite. + GoldenSceneTheme.push(GoldenSceneTheme.standard.copyWith( + directory: Directory("."), + )); + + // Disable animations in Super Editor. + BlinkController.indeterminateAnimationsEnabled = false; + + return testMain(); +} diff --git a/super_clones/slack/test_goldens/slack_bk.png b/super_clones/slack/test_goldens/slack_bk.png new file mode 100644 index 000000000..e67304d47 Binary files /dev/null and b/super_clones/slack/test_goldens/slack_bk.png differ diff --git a/super_clones/slack/test_goldens/slack_chat_magazine_layout.png b/super_clones/slack/test_goldens/slack_chat_magazine_layout.png new file mode 100644 index 000000000..c3795acb3 Binary files /dev/null and b/super_clones/slack/test_goldens/slack_chat_magazine_layout.png differ diff --git a/super_clones/slack/test_goldens/slack_test.dart b/super_clones/slack/test_goldens/slack_test.dart new file mode 100644 index 000000000..24bb09a60 --- /dev/null +++ b/super_clones/slack/test_goldens/slack_test.dart @@ -0,0 +1,73 @@ +import 'package:device_frame/device_frame.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:flutter_test_goldens/flutter_test_goldens.dart'; +import 'package:flutter_test_robots/flutter_test_robots.dart'; +import 'package:slack/main.dart'; +import 'package:slack/mobile_message_editor.dart'; +import 'package:super_editor/super_editor_test.dart'; + +void main() { + testGoldenSceneOnIOS("Slack chat magazine", (tester) async { + final backgroundImage = await tester.loadImageFromFile("test_goldens/slack_bk.png"); + + await Gallery( + "Slack Clone", + fileName: "slack_chat_magazine_layout", + itemConstraints: BoxConstraints.tight( + Devices.ios.iPhone16.screenSize, + ), + itemBoundsFinder: find.byType(MobileMessageEditor), + layout: MagazineGoldenSceneLayout( + featureTitle: "Slack Clone", + featureFrameBuilder: (BuildContext context, Widget featuredGolden) { + return DeviceFrame( + device: Devices.ios.iPhone16, + screen: featuredGolden, + ); + }, + featureBackground: GoldenSceneBackground.widget( + Image.memory(backgroundImage.bytes, fit: BoxFit.cover), + ), + ), + ) + .itemFromWidget( + description: "Chat Page", + boundsFinder: find.byType(GoldenImageBounds), + widget: SlackChatPage(), + ) + .itemFromWidget( + description: "Editor - Collapsed", + widget: SlackChatPage(), + ) + .itemFromWidget( + description: "Editor - Focused, Empty, with Hint", + widget: SlackChatPage(), + setup: (tester) async { + await tester.tap(find.byType(MobileMessageEditor)); + await tester.pumpAndSettle(); + }, + ) + .itemFromWidget( + description: "Editor - Typing 'Hello, World!'", + widget: SlackChatPage(), + setup: (tester) async { + await tester.tap(find.byType(MobileMessageEditor)); + await tester.pumpAndSettle(); + await tester.typeImeText("Hello, World!"); + }, + ) + .itemFromWidget( + description: "Editor - Multiple lines", + widget: SlackChatPage(), + setup: (tester) async { + await tester.tap(find.byType(MobileMessageEditor)); + await tester.pumpAndSettle(); + await tester.typeImeText("Hello, World!"); + await tester.pressEnterAdaptive(); + await tester.typeImeText("This is line two"); + }, + ) + .run(tester); + }); +} diff --git a/super_editor/pubspec.yaml b/super_editor/pubspec.yaml index c6b439ffa..0748c8d20 100644 --- a/super_editor/pubspec.yaml +++ b/super_editor/pubspec.yaml @@ -55,6 +55,7 @@ dependency_overrides: # path: ../attributed_text super_text_layout: path: ../super_text_layout + url_launcher_android: 6.3.16 dev_dependencies: flutter_lints: ^2.0.1