TF-2717 Write widget test for case recipient has expanded button

lib/features/composer/presentation/widgets/recipient_composer_widget.dart

@@ -63,6 +63,7 @@ class RecipientComposerWidget extends StatefulWidget {
   final EdgeInsetsGeometry? padding;
   final EdgeInsetsGeometry? margin;
   final OnEnableAllRecipientsInputAction? onEnableAllRecipientsInputAction;
+  final bool isTestingForWeb;
 
   const RecipientComposerWidget({
     super.key,
@@ -70,6 +71,7 @@ class RecipientComposerWidget extends StatefulWidget {
     required this.listEmailAddress,
     required this.imagePaths,
     required this.maxWidth,
+    @visibleForTesting this.isTestingForWeb = false,
     this.ccState = PrefixRecipientState.disabled,
     this.bccState = PrefixRecipientState.disabled,
     this.fromState = PrefixRecipientState.disabled,
@@ -157,7 +159,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                 },
                 child: StatefulBuilder(
                   builder: (context, stateSetter) {
-                    if (PlatformInfo.isWeb) {
+                    if (PlatformInfo.isWeb || widget.isTestingForWeb) {
                       return DragTarget<DraggableEmailAddress>(
                         builder: (context, candidateData, rejectedData) {
                           return TagEditor<SuggestionEmailAddress>(
@@ -316,10 +318,11 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
           ),
           const SizedBox(width: RecipientComposerWidgetStyle.space),
           if (widget.prefix == PrefixEmailAddress.to)
-            if (PlatformInfo.isWeb)
+            if (PlatformInfo.isWeb || widget.isTestingForWeb)
               ...[
                 if (widget.fromState == PrefixRecipientState.disabled)
                   TMailButtonWidget.fromText(
+                    key: Key('prefix_${widget.prefix.name}_recipient_from_button'),
                     text: AppLocalizations.of(context).from_email_address_prefix,
                     textStyle: RecipientComposerWidgetStyle.prefixButtonTextStyle,
                     backgroundColor: Colors.transparent,
@@ -329,6 +332,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                   ),
                 if (widget.ccState == PrefixRecipientState.disabled)
                   TMailButtonWidget.fromText(
+                    key: Key('prefix_${widget.prefix.name}_recipient_cc_button'),
                     text: AppLocalizations.of(context).cc_email_address_prefix,
                     textStyle: RecipientComposerWidgetStyle.prefixButtonTextStyle,
                     backgroundColor: Colors.transparent,
@@ -338,6 +342,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                   ),
                 if (widget.bccState == PrefixRecipientState.disabled)
                   TMailButtonWidget.fromText(
+                    key: Key('prefix_${widget.prefix.name}_recipient_bcc_button'),
                     text: AppLocalizations.of(context).bcc_email_address_prefix,
                     textStyle: RecipientComposerWidgetStyle.prefixButtonTextStyle,
                     backgroundColor: Colors.transparent,
@@ -347,20 +352,19 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                   ),
               ]
             else if (PlatformInfo.isMobile)
-              ...[
+              TMailButtonWidget.fromIcon(
-                TMailButtonWidget.fromIcon(
+                key: Key('prefix_${widget.prefix.name}_recipient_expand_button'),
-                  icon: _isAllRecipientInputEnabled
+                icon: _isAllRecipientInputEnabled
-                    ? widget.imagePaths.icChevronUp
+                  ? widget.imagePaths.icChevronUp
-                    : widget.imagePaths.icChevronDownOutline,
+                  : widget.imagePaths.icChevronDownOutline,
-                  backgroundColor: Colors.transparent,
+                backgroundColor: Colors.transparent,
-                  iconSize: 24,
+                iconSize: 24,
-                  padding: const EdgeInsets.all(5),
+                padding: const EdgeInsets.all(5),
-                  iconColor: AppColor.colorLabelComposer,
+                iconColor: AppColor.colorLabelComposer,
-                  margin: RecipientComposerWidgetStyle.enableRecipientButtonMargin,
+                margin: RecipientComposerWidgetStyle.enableRecipientButtonMargin,
-                  onTapActionCallback: () => widget.onEnableAllRecipientsInputAction?.call(_isAllRecipientInputEnabled),
+                onTapActionCallback: () => widget.onEnableAllRecipientsInputAction?.call(_isAllRecipientInputEnabled),
-                )
+              )
-              ]
+          else if (PlatformInfo.isWeb || widget.isTestingForWeb)
-          else if (PlatformInfo.isWeb)
             TMailButtonWidget.fromIcon(
               icon: widget.imagePaths.icClose,
               backgroundColor: Colors.transparent,

lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart

@@ -31,6 +31,7 @@ class RecipientTagItemWidget extends StatelessWidget {
   final List<EmailAddress> collapsedListEmailAddress;
   final OnShowFullListEmailAddressAction? onShowFullAction;
   final OnDeleteTagAction? onDeleteTagAction;
+  final bool isTestingForWeb;
 
   const RecipientTagItemWidget({
     super.key,
@@ -40,6 +41,7 @@ class RecipientTagItemWidget extends StatelessWidget {
     required this.currentListEmailAddress,
     required this.collapsedListEmailAddress,
     required this.imagePaths,
+    @visibleForTesting this.isTestingForWeb = false,
     this.isCollapsed = false,
     this.isLatestTagFocused = false,
     this.isLatestEmail = false,
@@ -56,7 +58,7 @@ class RecipientTagItemWidget extends StatelessWidget {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          if (PlatformInfo.isWeb)
+          if (PlatformInfo.isWeb || isTestingForWeb)
             Flexible(
               child: Padding(
                 padding: EdgeInsetsDirectional.only(
@@ -163,7 +165,7 @@ class RecipientTagItemWidget extends StatelessWidget {
               onTapActionCallback: () => onShowFullAction?.call(prefix),
               borderRadius: RecipientTagItemWidgetStyle.radius,
               textStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-              padding: PlatformInfo.isWeb
+              padding: PlatformInfo.isWeb || isTestingForWeb
                 ? RecipientTagItemWidgetStyle.counterPadding
                 : RecipientTagItemWidgetStyle.mobileCounterPadding,
               backgroundColor: AppColor.colorEmailAddressTag,
@@ -174,7 +176,7 @@ class RecipientTagItemWidget extends StatelessWidget {
   }
 
   EdgeInsetsGeometry? get _counterMargin {
-    if (PlatformInfo.isWeb) {
+    if (PlatformInfo.isWeb || isTestingForWeb) {
       return PlatformInfo.isCanvasKit
         ? RecipientTagItemWidgetStyle.webCounterMargin
         : RecipientTagItemWidgetStyle.webMobileCounterMargin;

test/features/features/composer/recipient_composer_widget_test.dart

@@ -1,5 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/utils/app_logger.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -149,7 +150,7 @@ void main() {
       );
     });
 
-    testWidgets('RecipientComponentWidget should have all the components (PrefixLabel, RecipientTagItemWidget)', (tester) async {
+    testWidgets('ToRecipientComponentWidget should have all the components (PrefixLabel, RecipientTagItemWidget)', (tester) async {
       final listEmailAddress = <EmailAddress>[
         EmailAddress('test1', 'test1@example.com'),
       ];
@@ -446,7 +447,7 @@ void main() {
       expect(isExceededTextOverflow, equals(false));
     });
 
-    testWidgets('RecipientComponentWidget should display prefix To label correctly when the locale is fr-FR', (tester) async {
+    testWidgets('ToRecipientComponentWidget should display prefix To label correctly when the locale is fr-FR', (tester) async {
       final listEmailAddress = <EmailAddress>[
         EmailAddress('test1', 'test1@example.com'),
       ];
@@ -475,7 +476,7 @@ void main() {
       expect(prefixRecipientComposerWidget.data, equals('À:'));
     });
 
-    testWidgets('RecipientComponentWidget should display prefix To label correctly when the locale is vi-VN', (tester) async {
+    testWidgets('ToRecipientComponentWidget should display prefix To label correctly when the locale is vi-VN', (tester) async {
       final listEmailAddress = <EmailAddress>[
         EmailAddress('test1', 'test1@example.com'),
       ];
@@ -503,5 +504,102 @@ void main() {
 
       expect(prefixRecipientComposerWidget.data, equals('Đến:'));
     });
+
+    testWidgets('ToRecipientComponentWidget should have all the components (PrefixLabel, RecipientTagItemWidget, ExpandButton) on mobile platform', (tester) async {
+      debugDefaultTargetPlatformOverride = TargetPlatform.android;
+
+      final listEmailAddress = <EmailAddress>[
+        EmailAddress('test1', 'test1@example.com'),
+      ];
+
+      final widget = makeTestableWidget(
+        child: RecipientComposerWidget(
+          prefix: prefix,
+          listEmailAddress: listEmailAddress,
+          imagePaths: imagePaths,
+          maxWidth: 360,
+          keyTagEditor: keyEmailTagEditor,
+        ),
+      );
+
+      await tester.pumpWidget(widget);
+
+      await tester.pumpAndSettle();
+
+      final prefixRecipientComposerWidgetFinder = find.byKey(Key('prefix_${prefix.name}_recipient_composer_widget'));
+      final recipientTagItemWidgetFinder = find.byKey(Key('recipient_tag_item_${prefix.name}_0'));
+
+      final Size prefixRecipientComposerWidgetSize = tester.getSize(prefixRecipientComposerWidgetFinder);
+      final Size recipientTagItemWidgetSize = tester.getSize(recipientTagItemWidgetFinder);
+
+      expect(prefixRecipientComposerWidgetFinder, findsOneWidget);
+      expect(recipientTagItemWidgetFinder, findsOneWidget);
+
+      log('recipient_composer_widget_test::main: PrefixLabelSize = $prefixRecipientComposerWidgetSize | TagSize = $recipientTagItemWidgetSize');
+
+      final recipientExpandButtonFinder = find.byKey(Key('prefix_${prefix.name}_recipient_expand_button'));
+
+      final Size recipientExpandButtonSize = tester.getSize(recipientExpandButtonFinder);
+
+      log('recipient_composer_widget_test::main: ExpandButtonSize = $recipientExpandButtonSize');
+
+      expect(recipientExpandButtonFinder, findsOneWidget);
+
+      final totalComponentsSize = prefixRecipientComposerWidgetSize.width
+        + recipientTagItemWidgetSize.width
+        + recipientExpandButtonSize.width;
+
+      log('recipient_composer_widget_test::main: totalComponentsSize = $totalComponentsSize');
+
+      expect(totalComponentsSize, lessThan(360));
+
+      debugDefaultTargetPlatformOverride = null;
+    });
+
+    testWidgets('ToRecipientComponentWidget should have all the components (PrefixLabel, RecipientTagItemWidget, FromButton, CCButton, BccButton) on web platform', (tester) async {
+      final listEmailAddress = <EmailAddress>[
+        EmailAddress('test1', 'test1@example.com'),
+      ];
+
+      final widget = makeTestableWidget(
+        child: RecipientComposerWidget(
+          prefix: prefix,
+          listEmailAddress: listEmailAddress,
+          imagePaths: imagePaths,
+          maxWidth: 360,
+          keyTagEditor: keyEmailTagEditor,
+          isTestingForWeb: true,
+        ),
+      );
+
+      await tester.pumpWidget(widget);
+
+      await tester.pumpAndSettle();
+
+      final prefixRecipientComposerWidgetFinder = find.byKey(Key('prefix_${prefix.name}_recipient_composer_widget'));
+      final recipientTagItemWidgetFinder = find.byKey(Key('recipient_tag_item_${prefix.name}_0'));
+
+      final Size prefixRecipientComposerWidgetSize = tester.getSize(prefixRecipientComposerWidgetFinder);
+      final Size recipientTagItemWidgetSize = tester.getSize(recipientTagItemWidgetFinder);
+
+      expect(prefixRecipientComposerWidgetFinder, findsOneWidget);
+      expect(recipientTagItemWidgetFinder, findsOneWidget);
+
+      log('recipient_composer_widget_test::main: PrefixLabelSize = $prefixRecipientComposerWidgetSize | TagSize = $recipientTagItemWidgetSize');
+
+      final recipientFromButtonFinder = find.byKey(Key('prefix_${prefix.name}_recipient_from_button'));
+      final recipientCcButtonFinder = find.byKey(Key('prefix_${prefix.name}_recipient_cc_button'));
+      final recipientBccButtonFinder = find.byKey(Key('prefix_${prefix.name}_recipient_bcc_button'));
+
+      final Size recipientFromButtonSize = tester.getSize(recipientFromButtonFinder);
+      final Size recipientCcButtonSize = tester.getSize(recipientCcButtonFinder);
+      final Size recipientBccButtonSize = tester.getSize(recipientBccButtonFinder);
+
+      log('recipient_composer_widget_test::main: FromButtonSize = $recipientFromButtonSize | CcButtonSize = $recipientCcButtonSize | BccButtonSize = $recipientBccButtonSize');
+
+      expect(recipientFromButtonFinder, findsOneWidget);
+      expect(recipientCcButtonFinder, findsOneWidget);
+      expect(recipientBccButtonFinder, findsOneWidget);
+    });
   });
 }