Added marketing golden scene to Slack clone

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,
+    );
   }
 }
 

super_clones/slack/lib/fake_data/fake_messages.dart

@@ -36,7 +36,7 @@ final fakeMessages = <Message>[
     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",

super_clones/slack/lib/main.dart

@@ -82,7 +82,9 @@ class _SlackChatPageState extends State<SlackChatPage> {
         // ^ 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,

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,
+    );
   },
 );
 

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"

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

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<void> testExecutable(FutureOr<void> 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();
+}

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);
+  });
+}