chore: add snaphot tests in CI

Tests are added for the following widgets:

- `HomeScreen` (desktop layout)
- `ConverstationList`
- `ConversationListContent`
- `Conversation`
- `MessageList`

By default, snapshots are created with loaded fonts, on physical screen
size of a Pixel 8 and pixel density of 3. The snapshot tests tolerance
is 0.022 for ignoring the differences in rendering on different
platforms. The snapshots are stored in git LFS. The tests are run in CI
on macOS and Linux runners.

The line height of a message text is now set to default, because
otherwise it creates inconsistent rendering on different platforms.

Author: boxdot

.gitattributes

@@ -0,0 +1,5 @@
+# SPDX-FileCopyrightText: 2025 Phoenix R&D GmbH <[email protected]>
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+**/goldens/** filter=lfs diff=lfs merge=lfs -text

.github/workflows/flutter_test.yml

@@ -22,6 +22,8 @@ jobs:
     steps:
       - name: Clone repository
         uses: actions/checkout@v4
+        with:
+          lfs: true
 
       - name: Set up Just
         uses: extractions/setup-just@v2
@@ -50,3 +52,10 @@ jobs:
 
       - name: Run Flutter tests
         run: just test-flutter
+
+      - name: Upload golden failures
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: golden-failures
+          path: app/test/**/failures/*

.github/workflows/ios_build.yml

@@ -19,6 +19,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          lfs: true
 
       - name: Set up Just
         uses: extractions/setup-just@v2
@@ -47,6 +49,16 @@ jobs:
       - name: Generate Dart files
         run: just generate-dart-files
 
+      - name: Test flutter
+        run: just test-flutter
+
+      - name: Upload golden failures
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: golden-failures
+          path: app/test/**/failures/*
+
       - name: Build iOS app
         env:
           APP_STORE_KEY_ID: ${{ secrets.APP_STORE_KEY_ID }}

app/lib/conversation_details/conversation_screen.dart

@@ -8,6 +8,7 @@ import 'package:prototype/core/core.dart';
 import 'package:prototype/message_list/message_list.dart';
 import 'package:prototype/navigation/navigation.dart';
 import 'package:prototype/theme/theme.dart';
+import 'package:prototype/user/user.dart';
 import 'package:prototype/widgets/widgets.dart';
 
 import 'conversation_details_cubit.dart';
@@ -24,13 +25,25 @@ class ConversationScreen extends StatelessWidget {
       return const _EmptyConversationPane();
     }
 
-    return BlocProvider(
-      // rebuilds the cubit when the conversation changes
-      key: ValueKey(conversationId),
-      create: (context) => ConversationDetailsCubit(
-        userCubit: context.read(),
-        conversationId: conversationId,
-      ),
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(
+          // rebuilds the cubit when the conversation changes
+          key: ValueKey("conversation-detail-cubit-$conversationId"),
+          create: (context) => ConversationDetailsCubit(
+            userCubit: context.read<UserCubit>(),
+            conversationId: conversationId,
+          ),
+        ),
+        BlocProvider(
+          // rebuilds the cubit when the conversation changes
+          key: ValueKey("message-list-cubit-$conversationId"),
+          create: (context) => MessageListCubit(
+            userCubit: context.read<UserCubit>(),
+            conversationId: conversationId,
+          ),
+        ),
+      ],
       child: const ConversationScreenView(),
     );
   }
@@ -53,18 +66,32 @@ class _EmptyConversationPane extends StatelessWidget {
 }
 
 class ConversationScreenView extends StatelessWidget {
-  const ConversationScreenView({super.key});
+  const ConversationScreenView({
+    super.key,
+    this.createMessageCubit = MessageCubit.new,
+  });
+
+  final MessageCubitCreate createMessageCubit;
 
   @override
   Widget build(BuildContext context) {
+    final conversationId =
+        context.select((NavigationCubit cubit) => cubit.state.conversationId);
+
     final conversationTitle = context.select(
         (ConversationDetailsCubit cubit) => cubit.state.conversation?.title);
 
+    if (conversationId == null) {
+      return const _EmptyConversationPane();
+    }
+
     return Scaffold(
       body: Stack(children: <Widget>[
         Column(
           children: [
-            const MessageListContainer(),
+            Expanded(
+              child: MessageListView(createMessageCubit: createMessageCubit),
+            ),
             const MessageComposer(),
           ],
         ),

app/lib/conversation_list/conversation_list_content.dart

@@ -65,6 +65,7 @@ class _ListTile extends StatelessWidget {
   Widget build(BuildContext context) {
     final currentConversationId =
         context.select((NavigationCubit cubit) => cubit.state.conversationId);
+    final isSelected = currentConversationId == conversation.id;
     return ListTile(
       horizontalTitleGap: 0,
       contentPadding: const EdgeInsets.symmetric(
@@ -79,11 +80,7 @@ class _ListTile extends StatelessWidget {
         padding: const EdgeInsets.all(10),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
-          color: _selectionColor(
-            context,
-            conversation.id,
-            currentConversationId,
-          ),
+          color: isSelected ? convPaneFocusColor : null,
         ),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -110,31 +107,12 @@ class _ListTile extends StatelessWidget {
           ],
         ),
       ),
-      selected: _isConversationSelected(
-        conversation.id,
-        currentConversationId,
-        context,
-      ),
+      selected: isSelected,
       focusColor: convListItemSelectedColor,
-      onTap: () => _onSelectConversation(context, conversation.id),
+      onTap: () =>
+          context.read<NavigationCubit>().openConversation(conversation.id),
     );
   }
-
-  void _onSelectConversation(
-    BuildContext context,
-    ConversationId conversationId,
-  ) {
-    context.read<NavigationCubit>().openConversation(conversationId);
-  }
-
-  Color? _selectionColor(
-    BuildContext context,
-    ConversationId conversationId,
-    ConversationId? currentConversationId,
-  ) =>
-      isLargeScreen(context) && currentConversationId == conversationId
-          ? convPaneFocusColor
-          : null;
 }
 
 class _ListTileTop extends StatelessWidget {
@@ -320,16 +298,6 @@ class _ConversationTitle extends StatelessWidget {
   }
 }
 
-bool _isConversationSelected(
-  ConversationId conversationId,
-  ConversationId? currentConversationId,
-  BuildContext context,
-) {
-  return isLargeScreen(context)
-      ? currentConversationId == conversationId
-      : false;
-}
-
 String formatTimestamp(String t, {DateTime? now}) {
   DateTime timestamp;
   try {

app/lib/conversation_list/conversation_list_view.dart

@@ -17,11 +17,10 @@ class ConversationListContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final userCubit = context.read<UserCubit>();
     return BlocProvider(
-      create: (context) {
-        return ConversationListCubit(userCubit: userCubit);
-      },
+      create: (context) => ConversationListCubit(
+        userCubit: context.read<UserCubit>(),
+      ),
       child: const ConversationListView(),
     );
   }

app/lib/home_screen.dart

@@ -13,21 +13,40 @@ class HomeScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     const mobileLayout = ConversationListContainer();
-    const desktopLayout = Row(
+    const desktopLayout = HomeScreenDesktopLayout(
+      conversationList: ConversationListContainer(),
+      conversation: ConversationScreen(),
+    );
+    return const ResponsiveScreen(
+      mobile: mobileLayout,
+      tablet: desktopLayout,
+      desktop: desktopLayout,
+    );
+  }
+}
+
+class HomeScreenDesktopLayout extends StatelessWidget {
+  const HomeScreenDesktopLayout({
+    required this.conversationList,
+    required this.conversation,
+    super.key,
+  });
+
+  final Widget conversationList;
+  final Widget conversation;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
       children: [
         SizedBox(
           width: 300,
-          child: ConversationListContainer(),
+          child: conversationList,
         ),
         Expanded(
-          child: ConversationScreen(),
+          child: conversation,
         ),
       ],
     );
-    return const ResponsiveScreen(
-      mobile: mobileLayout,
-      tablet: desktopLayout,
-      desktop: desktopLayout,
-    );
   }
 }

app/lib/message_list/message_list.dart

@@ -7,3 +7,5 @@ library;
 
 export 'message_list_view.dart';
 export 'message_composer.dart';
+export 'message_list_cubit.dart';
+export 'message_cubit.dart';

app/lib/message_list/message_list_view.dart

@@ -8,82 +8,62 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:prototype/conversation_details/conversation_details.dart';
 import 'package:prototype/core/core.dart';
-import 'package:prototype/navigation/navigation.dart';
+import 'package:prototype/user/user.dart';
 import 'package:visibility_detector/visibility_detector.dart';
 
 import 'conversation_tile.dart';
 import 'message_cubit.dart';
 import 'message_list_cubit.dart';
 
-class MessageListContainer extends StatelessWidget {
-  const MessageListContainer({
-    super.key,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final conversationId =
-        context.select((NavigationCubit cubit) => cubit.state.conversationId);
-
-    if (conversationId == null) {
-      throw StateError("an active conversation is obligatory");
-    }
-
-    return BlocProvider<MessageListCubit>(
-      create: (context) => MessageListCubit(
-        userCubit: context.read(),
-        conversationId: conversationId,
-      ),
-      child: const MessageListView(),
-    );
-  }
-}
+typedef MessageCubitCreate = MessageCubit Function({
+  required UserCubit userCubit,
+  required MessageState initialState,
+});
 
 class MessageListView extends StatelessWidget {
   const MessageListView({
     super.key,
+    this.createMessageCubit = MessageCubit.new,
   });
 
+  final MessageCubitCreate createMessageCubit;
+
   @override
   Widget build(BuildContext context) {
     final state = context.select((MessageListCubit cubit) => cubit.state);
 
-    return Expanded(
-      child: SelectionArea(
-        child: ListView.custom(
-          physics: _scrollPhysics,
-          reverse: true,
-          childrenDelegate: SliverChildBuilderDelegate(
-            (context, reverseIndex) {
-              final index = state.loadedMessagesCount - reverseIndex - 1;
-              final message = state.messageAt(index);
-              return message != null
-                  ? BlocProvider(
-                      key: ValueKey(message.id),
-                      create: (context) {
-                        return MessageCubit(
-                          userCubit: context.read(),
-                          initialState: MessageState(message: message),
-                        );
-                      },
-                      child: _VisibilityConversationTile(
-                        messageId: message.id,
-                        timestamp: DateTime.parse(message.timestamp),
-                      ),
-                    )
-                  : const SizedBox.shrink();
-            },
-            findChildIndexCallback: (key) {
-              final messageKey = key as ValueKey<ConversationMessageId>;
-              final messageId = messageKey.value;
-              final index = state.messageIdIndex(messageId);
-              // reverse index
-              return index != null
-                  ? state.loadedMessagesCount - index - 1
-                  : null;
-            },
-            childCount: state.loadedMessagesCount,
-          ),
+    return SelectionArea(
+      child: ListView.custom(
+        physics: _scrollPhysics,
+        reverse: true,
+        childrenDelegate: SliverChildBuilderDelegate(
+          (context, reverseIndex) {
+            final index = state.loadedMessagesCount - reverseIndex - 1;
+            final message = state.messageAt(index);
+            return message != null
+                ? BlocProvider(
+                    key: ValueKey(message.id),
+                    create: (context) {
+                      return createMessageCubit(
+                        userCubit: context.read<UserCubit>(),
+                        initialState: MessageState(message: message),
+                      );
+                    },
+                    child: _VisibilityConversationTile(
+                      messageId: message.id,
+                      timestamp: DateTime.parse(message.timestamp),
+                    ),
+                  )
+                : const SizedBox.shrink();
+          },
+          findChildIndexCallback: (key) {
+            final messageKey = key as ValueKey<ConversationMessageId>;
+            final messageId = messageKey.value;
+            final index = state.messageIdIndex(messageId);
+            // reverse index
+            return index != null ? state.loadedMessagesCount - index - 1 : null;
+          },
+          childCount: state.loadedMessagesCount,
         ),
       ),
     );