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

2024-04-03 09:31:10 +07:00
parent 90ab1283d1
commit ec3953a6ed
3 changed files with 126 additions and 22 deletions
@@ -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(
-                  icon: _isAllRecipientInputEnabled
-                    ? widget.imagePaths.icChevronUp
-                    : widget.imagePaths.icChevronDownOutline,
-                  backgroundColor: Colors.transparent,
-                  iconSize: 24,
-                  padding: const EdgeInsets.all(5),
-                  iconColor: AppColor.colorLabelComposer,
-                  margin: RecipientComposerWidgetStyle.enableRecipientButtonMargin,
-                  onTapActionCallback: () => widget.onEnableAllRecipientsInputAction?.call(_isAllRecipientInputEnabled),
-                )
-              ]
-          else if (PlatformInfo.isWeb)
+              TMailButtonWidget.fromIcon(
+                key: Key('prefix_${widget.prefix.name}_recipient_expand_button'),
+                icon: _isAllRecipientInputEnabled
+                  ? widget.imagePaths.icChevronUp
+                  : widget.imagePaths.icChevronDownOutline,
+                backgroundColor: Colors.transparent,
+                iconSize: 24,
+                padding: const EdgeInsets.all(5),
+                iconColor: AppColor.colorLabelComposer,
+                margin: RecipientComposerWidgetStyle.enableRecipientButtonMargin,
+                onTapActionCallback: () => widget.onEnableAllRecipientsInputAction?.call(_isAllRecipientInputEnabled),
+              )
+          else if (PlatformInfo.isWeb || widget.isTestingForWeb)
            TMailButtonWidget.fromIcon(
              icon: widget.imagePaths.icClose,
              backgroundColor: Colors.transparent,
@@ -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;
@@ -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);
+    });
  });
 }