From 3ac64a7fa68de77d865c0f95745fdbac760d0984 Mon Sep 17 00:00:00 2001 From: Daniel Eshkeri Date: Fri, 6 Sep 2024 10:20:04 +0100 Subject: [PATCH] fix: chat item (#174) fix: chat item actions _getSlidableExtend now won't return over 1.0 chore(automated): Lint commit and format --- lib/src/components/chat_item/chat_item.dart | 4 + .../components/chat_item/chat_item_test.dart | 807 ++++++++++-------- ...chat_item_small_screen_slidable_button.png | Bin 0 -> 2713 bytes 3 files changed, 441 insertions(+), 370 deletions(-) create mode 100644 test/src/components/chat_item/golden/chat_item_small_screen_slidable_button.png diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index 4241fff5..22613101 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -115,6 +115,9 @@ class ZetaChatItem extends ZetaStatelessWidget { final actionWith = slidableActionsCount * Zeta.of(context).spacing.xl_10; final maxButtonWidth = actionWith / maxScreenWidth; final extend = actionWith / maxScreenWidth; + if (extend.clamp(0, maxButtonWidth).toDouble() > 1) { + return 1; + } return extend.clamp(0, maxButtonWidth).toDouble(); } @@ -279,6 +282,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ], ), Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.end, children: [ if (subtitle != null) diff --git a/test/src/components/chat_item/chat_item_test.dart b/test/src/components/chat_item/chat_item_test.dart index d2a685b5..7e3456f7 100644 --- a/test/src/components/chat_item/chat_item_test.dart +++ b/test/src/components/chat_item/chat_item_test.dart @@ -70,415 +70,482 @@ void main() { matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_default.png')), ); }); - }); - testWidgets('ZetaChatItem highlighted', (WidgetTester tester) async { - tester.view.devicePixelRatio = 1.0; - tester.view.physicalSize = const Size(481, 480); - const title = Text('John Doe'); - const subtitle = Text('Hello, how are you?'); - final time = DateTime.now(); - final timeFormat = DateFormat('hh:mm a'); - - await tester.pumpWidget( - TestApp( - home: Column( - children: [ - ZetaChatItem( - explicitChildNodes: false, - time: time, - enabledWarningIcon: true, - enabledNotificationIcon: true, - leading: const ZetaAvatar(initials: 'AZ'), - count: 100, - onTap: () {}, - paleButtonColors: false, - starred: true, - slidableActions: [ - ZetaSlidableAction.menuMore(onPressed: () {}), - ZetaSlidableAction.call(onPressed: () {}), - ZetaSlidableAction.ptt(onPressed: () {}), - ZetaSlidableAction.delete(onPressed: () {}), - ], - highlighted: true, - title: title, - subtitle: subtitle, - ), - ], + testWidgets('ZetaChatItem highlighted', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(481, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); + final timeFormat = DateFormat('hh:mm a'); + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + explicitChildNodes: false, + time: time, + enabledWarningIcon: true, + enabledNotificationIcon: true, + leading: const ZetaAvatar(initials: 'AZ'), + count: 100, + onTap: () {}, + paleButtonColors: false, + starred: true, + slidableActions: [ + ZetaSlidableAction.menuMore(onPressed: () {}), + ZetaSlidableAction.call(onPressed: () {}), + ZetaSlidableAction.ptt(onPressed: () {}), + ZetaSlidableAction.delete(onPressed: () {}), + ], + highlighted: true, + title: title, + subtitle: subtitle, + ), + ], + ), ), - ), - ); + ); - // Verify that the title, subtitle, and time are displayed correctly - expect(find.text('John Doe'), findsOneWidget); - expect(find.text('Hello, how are you?'), findsOneWidget); - expect(find.text(timeFormat.format(time)), findsOneWidget); + // Verify that the title, subtitle, and time are displayed correctly + expect(find.text('John Doe'), findsOneWidget); + expect(find.text('Hello, how are you?'), findsOneWidget); + expect(find.text(timeFormat.format(time)), findsOneWidget); - final chatItemFinder = find.byType(ZetaChatItem); + final chatItemFinder = find.byType(ZetaChatItem); - // Verify that the widget is tappable - await tester.tap(chatItemFinder); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + // Verify that the widget is tappable + await tester.tap(chatItemFinder); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - await expectLater( - chatItemFinder, - matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_highlighted.png')), - ); - }); + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_highlighted.png')), + ); + }); - testWidgets('ZetaChatItem slidable actions', (WidgetTester tester) async { - tester.view.devicePixelRatio = 1.0; - tester.view.physicalSize = const Size(481, 480); - const title = Text('John Doe'); - const subtitle = Text('Hello, how are you?'); - final time = DateTime.now(); - - await tester.pumpWidget( - TestApp( - home: Column( - children: [ - ZetaChatItem( - time: time, - leading: const ZetaAvatar(initials: 'AZ'), - slidableActions: [ - ZetaSlidableAction.menuMore(onPressed: () {}), - ZetaSlidableAction.call(onPressed: () {}), - ZetaSlidableAction.ptt(onPressed: () {}), - ZetaSlidableAction.delete(onPressed: () {}), - ], - title: title, - subtitle: subtitle, - ), - ], + testWidgets('ZetaChatItem slidable actions', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(481, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + slidableActions: [ + ZetaSlidableAction.menuMore(onPressed: () {}), + ZetaSlidableAction.call(onPressed: () {}), + ZetaSlidableAction.ptt(onPressed: () {}), + ZetaSlidableAction.delete(onPressed: () {}), + ], + title: title, + subtitle: subtitle, + ), + ], + ), ), - ), - ); + ); - final chatItemFinder = find.byType(ZetaChatItem); + final chatItemFinder = find.byType(ZetaChatItem); + + await tester.drag(chatItemFinder, const Offset(-200, 0)); + await tester.pumpAndSettle(); - await tester.drag(chatItemFinder, const Offset(-200, 0)); - await tester.pumpAndSettle(); + // Verify that the slidable actions are displayed correctly + expect(find.byIcon(ZetaIcons.more_vertical_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.phone_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.ptt_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.delete_round), findsOneWidget); - // Verify that the slidable actions are displayed correctly - expect(find.byIcon(ZetaIcons.more_vertical_round), findsOneWidget); - expect(find.byIcon(ZetaIcons.phone_round), findsOneWidget); - expect(find.byIcon(ZetaIcons.ptt_round), findsOneWidget); - expect(find.byIcon(ZetaIcons.delete_round), findsOneWidget); + // Verify that tapping on the slidable actions triggers the corresponding callbacks + await tester.tap(find.byIcon(ZetaIcons.more_vertical_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - // Verify that tapping on the slidable actions triggers the corresponding callbacks - await tester.tap(find.byIcon(ZetaIcons.more_vertical_round)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + await tester.tap(find.byIcon(ZetaIcons.phone_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - await tester.tap(find.byIcon(ZetaIcons.phone_round)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + await tester.tap(find.byIcon(ZetaIcons.ptt_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - await tester.tap(find.byIcon(ZetaIcons.ptt_round)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + await tester.tap(find.byIcon(ZetaIcons.delete_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - await tester.tap(find.byIcon(ZetaIcons.delete_round)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_slidable_actions.png')), + ); + }); - await expectLater( - chatItemFinder, - matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_slidable_actions.png')), - ); - }); + testWidgets('ZetaChatItem with pale slidable button colors', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(481, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); - testWidgets('ZetaChatItem with pale slidable button colors', (WidgetTester tester) async { - tester.view.devicePixelRatio = 1.0; - tester.view.physicalSize = const Size(481, 480); - const title = Text('John Doe'); - const subtitle = Text('Hello, how are you?'); - final time = DateTime.now(); - - await tester.pumpWidget( - TestApp( - home: Column( - children: [ - ZetaChatItem( - time: time, - leading: const ZetaAvatar(initials: 'AZ'), - paleButtonColors: true, - slidableActions: [ - ZetaSlidableAction.menuMore( - onPressed: () {}, - ), - ZetaSlidableAction.call( - onPressed: () {}, - ), - ZetaSlidableAction.ptt( - onPressed: () {}, - ), - ZetaSlidableAction.delete( - onPressed: () {}, - ), - ], - title: title, - subtitle: subtitle, - ), - ], + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + paleButtonColors: true, + slidableActions: [ + ZetaSlidableAction.menuMore( + onPressed: () {}, + ), + ZetaSlidableAction.call( + onPressed: () {}, + ), + ZetaSlidableAction.ptt( + onPressed: () {}, + ), + ZetaSlidableAction.delete( + onPressed: () {}, + ), + ], + title: title, + subtitle: subtitle, + ), + ], + ), ), - ), - ); + ); - final chatItemFinder = find.byType(ZetaChatItem); + final chatItemFinder = find.byType(ZetaChatItem); - await tester.drag(chatItemFinder, const Offset(-200, 0)); - await tester.pumpAndSettle(); + await tester.drag(chatItemFinder, const Offset(-200, 0)); + await tester.pumpAndSettle(); - // Verify that the slidable actions have pale button colors - expect(find.byIcon(ZetaIcons.more_vertical_round), findsOneWidget); - expect(find.byIcon(ZetaIcons.phone_round), findsOneWidget); - expect(find.byIcon(ZetaIcons.ptt_round), findsOneWidget); - expect(find.byIcon(ZetaIcons.delete_round), findsOneWidget); + // Verify that the slidable actions have pale button colors + expect(find.byIcon(ZetaIcons.more_vertical_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.phone_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.ptt_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.delete_round), findsOneWidget); - await expectLater( - chatItemFinder, - matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_pale_slidable_buttons.png')), - ); - }); + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_pale_slidable_buttons.png')), + ); + }); - testWidgets('ZetaChatItem with 2 pale buttons and 2 regular buttons', (WidgetTester tester) async { - tester.view.devicePixelRatio = 1.0; - tester.view.physicalSize = const Size(481, 480); - const title = Text('John Doe'); - const subtitle = Text('Hello, how are you?'); - final time = DateTime.now(); - - await tester.pumpWidget( - TestApp( - home: Column( - children: [ - ZetaChatItem( - time: time, - leading: const ZetaAvatar(initials: 'AZ'), - slidableActions: [ - ZetaSlidableAction( - onPressed: () {}, - paleColor: true, - icon: Icons.star, - ), - ZetaSlidableAction( - onPressed: () {}, - paleColor: true, - icon: Icons.delete, - ), - ZetaSlidableAction( - onPressed: () {}, - icon: Icons.call, - ), - ZetaSlidableAction( - onPressed: () {}, - icon: Icons.message, + testWidgets('ZetaChatItem with 2 pale buttons and 2 regular buttons', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(481, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + slidableActions: [ + ZetaSlidableAction( + onPressed: () {}, + paleColor: true, + icon: Icons.star, + ), + ZetaSlidableAction( + onPressed: () {}, + paleColor: true, + icon: Icons.delete, + ), + ZetaSlidableAction( + onPressed: () {}, + icon: Icons.call, + ), + ZetaSlidableAction( + onPressed: () {}, + icon: Icons.message, + ), + ], + title: title, + subtitle: subtitle, + ), + ], + ), + ), + ); + + final chatItemFinder = find.byType(ZetaChatItem); + + await tester.drag(chatItemFinder, const Offset(-200, 0)); + await tester.pumpAndSettle(); + + // Verify that the slidable actions are displayed correctly + expect(find.byIcon(Icons.star), findsOneWidget); + expect(find.byIcon(Icons.delete), findsOneWidget); + expect(find.byIcon(Icons.call), findsOneWidget); + expect(find.byIcon(Icons.message), findsOneWidget); + + // Verify that the pale buttons have the correct color + final paleButtons = tester.widgetList( + find.byWidgetPredicate((widget) => widget is ZetaSlidableAction && widget.paleColor), + ); + expect(paleButtons.length, 2); + + // Verify that the non-pale buttons have the correct color + final nonPaleButtons = tester.widgetList( + find.byWidgetPredicate((widget) => widget is ZetaSlidableAction && !widget.paleColor), + ); + expect(nonPaleButtons.length, 2); + + // Verify that tapping on the slidable actions triggers the corresponding callbacks + await tester.tap(find.byIcon(Icons.star)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + + await tester.tap(find.byIcon(Icons.delete)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + + await tester.tap(find.byIcon(Icons.call)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + + await tester.tap(find.byIcon(Icons.message)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_pale_and_regular_buttons.png')), + ); + }); + + testWidgets('ZetaChatItem with custom leading widget', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(481, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + time: time, + leading: Container( + width: 40, + height: 40, + color: Colors.blue, ), - ], - title: title, - subtitle: subtitle, - ), - ], + slidableActions: [ + ZetaSlidableAction.menuMore(onPressed: () {}), + ZetaSlidableAction.call(onPressed: () {}), + ZetaSlidableAction.ptt(onPressed: () {}), + ZetaSlidableAction.delete(onPressed: () {}), + ], + title: title, + subtitle: subtitle, + ), + ], + ), ), - ), - ); - - final chatItemFinder = find.byType(ZetaChatItem); - - await tester.drag(chatItemFinder, const Offset(-200, 0)); - await tester.pumpAndSettle(); - - // Verify that the slidable actions are displayed correctly - expect(find.byIcon(Icons.star), findsOneWidget); - expect(find.byIcon(Icons.delete), findsOneWidget); - expect(find.byIcon(Icons.call), findsOneWidget); - expect(find.byIcon(Icons.message), findsOneWidget); - - // Verify that the pale buttons have the correct color - final paleButtons = tester.widgetList( - find.byWidgetPredicate((widget) => widget is ZetaSlidableAction && widget.paleColor), - ); - expect(paleButtons.length, 2); - - // Verify that the non-pale buttons have the correct color - final nonPaleButtons = tester.widgetList( - find.byWidgetPredicate((widget) => widget is ZetaSlidableAction && !widget.paleColor), - ); - expect(nonPaleButtons.length, 2); - - // Verify that tapping on the slidable actions triggers the corresponding callbacks - await tester.tap(find.byIcon(Icons.star)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); - - await tester.tap(find.byIcon(Icons.delete)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); - - await tester.tap(find.byIcon(Icons.call)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); - - await tester.tap(find.byIcon(Icons.message)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); - - await expectLater( - chatItemFinder, - matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_pale_and_regular_buttons.png')), - ); - }); + ); + + final chatItemFinder = find.byType(ZetaChatItem); + + // Verify that the custom leading widget is displayed correctly + expect(find.byType(Container), findsOneWidget); + expect(find.byWidgetPredicate((widget) => widget is Container && widget.color == Colors.blue), findsOneWidget); - testWidgets('ZetaChatItem with custom leading widget', (WidgetTester tester) async { - tester.view.devicePixelRatio = 1.0; - tester.view.physicalSize = const Size(481, 480); - const title = Text('John Doe'); - const subtitle = Text('Hello, how are you?'); - final time = DateTime.now(); - - await tester.pumpWidget( - TestApp( - home: Column( - children: [ - ZetaChatItem( - time: time, - leading: Container( - width: 40, - height: 40, - color: Colors.blue, + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_custom_leading.png')), + ); + }); + + testWidgets('ZetaChatItem with custom slidable buttons', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(481, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + slidableActions: [ + ZetaSlidableAction( + onPressed: () {}, + color: ZetaColorBase.orange, + icon: Icons.star, + ), + ZetaSlidableAction( + onPressed: () {}, + color: ZetaColorBase.red, + icon: Icons.delete, + ), + ], + title: title, + subtitle: subtitle, ), - slidableActions: [ - ZetaSlidableAction.menuMore(onPressed: () {}), - ZetaSlidableAction.call(onPressed: () {}), - ZetaSlidableAction.ptt(onPressed: () {}), - ZetaSlidableAction.delete(onPressed: () {}), - ], - title: title, - subtitle: subtitle, - ), - ], + ], + ), ), - ), - ); + ); - final chatItemFinder = find.byType(ZetaChatItem); + final chatItemFinder = find.byType(ZetaChatItem); - // Verify that the custom leading widget is displayed correctly - expect(find.byType(Container), findsOneWidget); - expect(find.byWidgetPredicate((widget) => widget is Container && widget.color == Colors.blue), findsOneWidget); + await tester.drag(chatItemFinder, const Offset(-200, 0)); + await tester.pumpAndSettle(); - await expectLater( - chatItemFinder, - matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_custom_leading.png')), - ); - }); + // Verify that the slidable actions are displayed correctly + expect(find.byIcon(Icons.star), findsOneWidget); + expect(find.byIcon(Icons.delete), findsOneWidget); - testWidgets('ZetaChatItem with custom slidable buttons', (WidgetTester tester) async { - tester.view.devicePixelRatio = 1.0; - tester.view.physicalSize = const Size(481, 480); - const title = Text('John Doe'); - const subtitle = Text('Hello, how are you?'); - final time = DateTime.now(); - - await tester.pumpWidget( - TestApp( - home: Column( - children: [ - ZetaChatItem( - time: time, - leading: const ZetaAvatar(initials: 'AZ'), - slidableActions: [ - ZetaSlidableAction( - onPressed: () {}, - color: ZetaColorBase.orange, - icon: Icons.star, - ), - ZetaSlidableAction( - onPressed: () {}, - color: ZetaColorBase.red, - icon: Icons.delete, - ), - ], - title: title, - subtitle: subtitle, - ), - ], + // Verify that tapping on the slidable actions triggers the corresponding callbacks + await tester.tap(find.byIcon(Icons.star)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + + await tester.tap(find.byIcon(Icons.delete)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_custom_slidable_buttons.png')), + ); + }); + + testWidgets('debugFillProperties works correctly', (WidgetTester tester) async { + final diagnosticsZetaChatItem = DiagnosticPropertiesBuilder(); + final time = DateTime.now(); + ZetaChatItem( + title: const Text('Title'), + subtitle: const Text('Subtitle'), + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + slidableActions: [ + ZetaSlidableAction.menuMore(onPressed: () {}), + ZetaSlidableAction.call(onPressed: () {}), + ZetaSlidableAction.ptt(onPressed: () {}), + ZetaSlidableAction.delete(onPressed: () {}), + ], + count: 1, + enabledNotificationIcon: true, + highlighted: true, + enabledWarningIcon: true, + starred: true, + ).debugFillProperties(diagnosticsZetaChatItem); + + expect(diagnosticsZetaChatItem.finder('rounded'), 'null'); + expect(diagnosticsZetaChatItem.finder('highlighted'), 'true'); + expect(diagnosticsZetaChatItem.finder('time'), time.toString()); + expect(diagnosticsZetaChatItem.finder('timeFormat'), 'null'); + expect(diagnosticsZetaChatItem.finder('enabledWarningIcon'), 'true'); + expect(diagnosticsZetaChatItem.finder('enabledNotificationIcon'), 'true'); + expect(diagnosticsZetaChatItem.finder('count'), '1'); + expect(diagnosticsZetaChatItem.finder('onTap'), 'null'); + expect(diagnosticsZetaChatItem.finder('starred'), 'true'); + expect(diagnosticsZetaChatItem.finder('onMenuMoreTap'), 'null'); + expect(diagnosticsZetaChatItem.finder('onCallTap'), 'null'); + expect(diagnosticsZetaChatItem.finder('onDeleteTap'), 'null'); + expect(diagnosticsZetaChatItem.finder('onPttTap'), 'null'); + expect(diagnosticsZetaChatItem.finder('explicitChildNodes'), 'true'); + expect(diagnosticsZetaChatItem.finder('paleButtonColors'), 'null'); + + final diagnosticsZetaSlidableAction = DiagnosticPropertiesBuilder(); + const ZetaSlidableAction(icon: Icons.star).debugFillProperties(diagnosticsZetaSlidableAction); + + expect(diagnosticsZetaSlidableAction.finder('onPressed'), 'null'); + expect(diagnosticsZetaSlidableAction.finder('icon'), 'IconData(U+0E5F9)'); + expect(diagnosticsZetaSlidableAction.finder('foregroundColor'), null); + expect(diagnosticsZetaSlidableAction.finder('backgroundColor'), null); + expect(diagnosticsZetaSlidableAction.finder('color'), ZetaColorBase.blue.toString()); + expect(diagnosticsZetaSlidableAction.finder('semanticLabel'), 'null'); + expect(diagnosticsZetaSlidableAction.finder('paleColor'), 'false'); + }); + + testWidgets('ZetaChatItem displays correctly', (WidgetTester tester) async { + tester.view.devicePixelRatio = 1.0; + tester.view.physicalSize = const Size(315, 480); + const title = Text('John Doe'); + const subtitle = Text('Hello, how are you?'); + final time = DateTime.now(); + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaChatItem( + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + slidableActions: [ + ZetaSlidableAction.menuMore(onPressed: () {}), + ZetaSlidableAction.call(onPressed: () {}), + ZetaSlidableAction.ptt(onPressed: () {}), + ZetaSlidableAction.delete(onPressed: () {}), + ], + title: title, + count: 1, + subtitle: subtitle, + ), + ], + ), ), - ), - ); + ); - final chatItemFinder = find.byType(ZetaChatItem); + final chatItemFinder = find.byType(ZetaChatItem); + final chatItem = tester.firstWidget(chatItemFinder) as ZetaChatItem; + final avatarFinder = find.byType(ZetaAvatar); + final avatar = tester.firstWidget(avatarFinder) as ZetaAvatar; + expect(chatItem.count, 1); + expect(avatar.initials, 'AZ'); + await tester.drag(chatItemFinder, const Offset(-200, 0)); + await tester.pumpAndSettle(); - await tester.drag(chatItemFinder, const Offset(-200, 0)); - await tester.pumpAndSettle(); + // Verify that the slidable actions are displayed correctly + expect(find.byIcon(ZetaIcons.more_vertical_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.phone_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.ptt_round), findsOneWidget); + expect(find.byIcon(ZetaIcons.delete_round), findsOneWidget); - // Verify that the slidable actions are displayed correctly - expect(find.byIcon(Icons.star), findsOneWidget); - expect(find.byIcon(Icons.delete), findsOneWidget); + // Verify that tapping on the slidable actions triggers the corresponding callbacks + await tester.tap(find.byIcon(ZetaIcons.more_vertical_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - // Verify that tapping on the slidable actions triggers the corresponding callbacks - await tester.tap(find.byIcon(Icons.star)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + await tester.tap(find.byIcon(ZetaIcons.phone_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - await tester.tap(find.byIcon(Icons.delete)); - await tester.pumpAndSettle(); - expect(tester.takeException(), isNull); + await tester.tap(find.byIcon(ZetaIcons.ptt_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - await expectLater( - chatItemFinder, - matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_custom_slidable_buttons.png')), - ); - }); + await tester.tap(find.byIcon(ZetaIcons.delete_round)); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); - testWidgets('debugFillProperties works correctly', (WidgetTester tester) async { - final diagnosticsZetaChatItem = DiagnosticPropertiesBuilder(); - final time = DateTime.now(); - ZetaChatItem( - title: const Text('Title'), - subtitle: const Text('Subtitle'), - time: time, - leading: const ZetaAvatar(initials: 'AZ'), - slidableActions: [ - ZetaSlidableAction.menuMore(onPressed: () {}), - ZetaSlidableAction.call(onPressed: () {}), - ZetaSlidableAction.ptt(onPressed: () {}), - ZetaSlidableAction.delete(onPressed: () {}), - ], - count: 1, - enabledNotificationIcon: true, - highlighted: true, - enabledWarningIcon: true, - starred: true, - ).debugFillProperties(diagnosticsZetaChatItem); - - expect(diagnosticsZetaChatItem.finder('rounded'), 'null'); - expect(diagnosticsZetaChatItem.finder('highlighted'), 'true'); - expect(diagnosticsZetaChatItem.finder('time'), time.toString()); - expect(diagnosticsZetaChatItem.finder('timeFormat'), 'null'); - expect(diagnosticsZetaChatItem.finder('enabledWarningIcon'), 'true'); - expect(diagnosticsZetaChatItem.finder('enabledNotificationIcon'), 'true'); - expect(diagnosticsZetaChatItem.finder('count'), '1'); - expect(diagnosticsZetaChatItem.finder('onTap'), 'null'); - expect(diagnosticsZetaChatItem.finder('starred'), 'true'); - expect(diagnosticsZetaChatItem.finder('onMenuMoreTap'), 'null'); - expect(diagnosticsZetaChatItem.finder('onCallTap'), 'null'); - expect(diagnosticsZetaChatItem.finder('onDeleteTap'), 'null'); - expect(diagnosticsZetaChatItem.finder('onPttTap'), 'null'); - expect(diagnosticsZetaChatItem.finder('explicitChildNodes'), 'true'); - expect(diagnosticsZetaChatItem.finder('paleButtonColors'), 'null'); - - final diagnosticsZetaSlidableAction = DiagnosticPropertiesBuilder(); - const ZetaSlidableAction(icon: Icons.star).debugFillProperties(diagnosticsZetaSlidableAction); - - expect(diagnosticsZetaSlidableAction.finder('onPressed'), 'null'); - expect(diagnosticsZetaSlidableAction.finder('icon'), 'IconData(U+0E5F9)'); - expect(diagnosticsZetaSlidableAction.finder('foregroundColor'), null); - expect(diagnosticsZetaSlidableAction.finder('backgroundColor'), null); - expect(diagnosticsZetaSlidableAction.finder('color'), ZetaColorBase.blue.toString()); - expect(diagnosticsZetaSlidableAction.finder('semanticLabel'), 'null'); - expect(diagnosticsZetaSlidableAction.finder('paleColor'), 'false'); + await expectLater( + chatItemFinder, + matchesGoldenFile(join(getCurrentPath('chat_item'), 'chat_item_small_screen_slidable_button.png')), + ); + }); }); } diff --git a/test/src/components/chat_item/golden/chat_item_small_screen_slidable_button.png b/test/src/components/chat_item/golden/chat_item_small_screen_slidable_button.png new file mode 100644 index 0000000000000000000000000000000000000000..703aadbcf4601fb5f2db9067eac974d631775b96 GIT binary patch literal 2713 zcmeHJe^AnA7{{|_+03?;rDk-yE$>=rW?=%tv^?`P>zcELXcnncP-7^N3N&ZSEx~PW zDuKGzs$~i>^9QN;BgG8SJAZ)+QhrTC5OgR%5@EQzZGX=G*?s-1X z`@Y|tjtX;e_HYJ)KrZ1Yj-LU69N_l-eA8R@$k>O^KC&MU#4}+bAa37ol^tv#hJ;6N zvaj4tmkK~2=VRf=gQF>&ImNkxII>sUf-Ul9rynjQZ?hXZjgfV0Y|M#|##C(#7;<_i zG|p$r;pv5v`YFdV)4n|olrNB^-@h?6- zyrJl15na%MA0vPiHgA(mUKArl@!EY^wYGmG8x08S8b_l-${! zN)DcT?y{sp++7sEB;;R6x1yG#D%}B9Wzb<7?fKBJwKe2`_@;x%*BubCp&WL(-!xcU zaimX9&-`7G)Ly}xfKH#)T6(-=<}P0Ax{Z|+#{W=fYNj^df^Q+qbBrb}m|llhl6CRh zAJ@*`2ZO=gF^B>$t9&km?6#F^8hn5?HZ)D&WhIF$bKIBXWE^|3`D=t8rUFN@x~^z&z_d;&OtQxZ!VFxMd1it}qaC(sU4=MI<{*1SWAV085-i$* z2U3m2Hr@BPlKk)yO$f~2*?IBcx?NZZmZMk*W0cA2LWlAS&% z@cM2q>Ek?^!{&?s4LTm15KUnyVxduvTH0Q#x_eKUDPJ5ajS3P)R?+q-1Y?w*F5ufc zt@eOTQvMHharJ09PpNu+x^dB;$Ii}YWeI6KH5yLQ=XAHTmGGrqGrj+2uR+LK^gi5A zVmF-fe_B1-OidXz^hsj(u@gr$pAl+E2YOfgIx3h%OEQdK2YKq@^)*Zdmm1+}O)VL% z%P<>W?$nm2{>UPBg%)9iEjdpv)%M;L`=V(zP^8vx)h*Dtg|cCO&KSEt(qHoS=%cJc zTzr!SmNwdWMNV1Ld$Utw5Q+VXKwv3GfL9WIl!v(jQ(jNf%^jZ~n*qMvH20`%hz42ZAr0>`Rv!Kz;I3Defw ztDF*@90@&7eJNY%F&065vnR@8F_=a6Mvl=E;P&Ptu*OMQPh0b)vR