diff --git a/lib/src/components/chips/status_chip.dart b/lib/src/components/chips/status_chip.dart index 079fd2e7..cdd205dd 100644 --- a/lib/src/components/chips/status_chip.dart +++ b/lib/src/components/chips/status_chip.dart @@ -49,7 +49,7 @@ class ZetaStatusChip extends ZetaStatelessWidget { child: MouseRegion( cursor: draggable ? SystemMouseCursors.click : SystemMouseCursors.basic, child: Semantics( - label: semanticLabel, + label: semanticLabel ?? label, child: SelectionContainer.disabled( child: draggable ? Draggable( @@ -106,7 +106,12 @@ class _Child extends StatelessWidget { horizontal: Zeta.of(context).spacing.small, vertical: Zeta.of(context).spacing.minimum, ), - child: Text(label, style: ZetaTextStyles.bodyXSmall), + child: Text( + label, + style: ZetaTextStyles.bodyXSmall.copyWith( + color: Zeta.of(context).colors.textDefault, + ), + ), ); } diff --git a/test/src/components/chips/golden/status_chip_default.png b/test/src/components/chips/golden/status_chip_default.png new file mode 100644 index 00000000..e0bad968 Binary files /dev/null and b/test/src/components/chips/golden/status_chip_default.png differ diff --git a/test/src/components/chips/golden/status_chip_long.png b/test/src/components/chips/golden/status_chip_long.png new file mode 100644 index 00000000..03f56625 Binary files /dev/null and b/test/src/components/chips/golden/status_chip_long.png differ diff --git a/test/src/components/chips/golden/status_chip_sharp.png b/test/src/components/chips/golden/status_chip_sharp.png new file mode 100644 index 00000000..e0bad968 Binary files /dev/null and b/test/src/components/chips/golden/status_chip_sharp.png differ diff --git a/test/src/components/chips/status_chip_test.dart b/test/src/components/chips/status_chip_test.dart new file mode 100644 index 00000000..5d993228 --- /dev/null +++ b/test/src/components/chips/status_chip_test.dart @@ -0,0 +1,226 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../../test_utils/test_app.dart'; +import '../../../test_utils/tolerant_comparator.dart'; +import '../../../test_utils/utils.dart'; + +void main() { + const String parentFolder = 'chips'; + + const goldenFile = GoldenFiles(component: parentFolder); + setUpAll(() { + goldenFileComparator = TolerantComparator(goldenFile.uri); + }); + + group('Accessibility Tests', () { + testWidgets('label meets accessibility requirements', (WidgetTester tester) async { + final SemanticsHandle handle = tester.ensureSemantics(); + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label', + ), + ), + ); + await expectLater(tester, meetsGuideline(androidTapTargetGuideline)); + await expectLater(tester, meetsGuideline(iOSTapTargetGuideline)); + await expectLater(tester, meetsGuideline(labeledTapTargetGuideline)); + await expectLater(tester, meetsGuideline(textContrastGuideline)); + + handle.dispose(); + }); + }); + + group('Content Tests', () { + final debugFillProperties = { + 'label': '"Label"', + 'draggable': 'false', + 'data': 'null', + 'onDragCompleted': 'null', + 'semanticLabel': 'null', + }; + debugFillPropertiesTest( + const ZetaStatusChip( + label: 'Label', + ), + debugFillProperties, + ); + + testWidgets('renders label correctly', (WidgetTester tester) async { + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label', + ), + ), + ); + + expect(find.text('Label'), findsOneWidget); + }); + + testWidgets('renders label correctly when label is long', (WidgetTester tester) async { + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label that is very very long', + ), + ), + ); + + final Finder textFinder = find.text('Label that is very very long'); + + expect(textFinder, findsOneWidget); + }); + }); + + group('Dimensions Tests', () { + testWidgets('horizontal padding is 8 and vertical padding is 4', (WidgetTester tester) async { + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label', + ), + ), + ); + final Finder finder = find.byType(Container); + expect(finder, findsOneWidget); + final Container widget = tester.widget(finder); + expect( + widget.padding, + const EdgeInsets.symmetric( + horizontal: 8, + vertical: 4, + ), + ); + }); + }); + + group('Styling Tests', () { + testWidgets('background color is ZetaColors.surfaceWarm and border radius is 8', (WidgetTester tester) async { + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label', + ), + ), + ); + final Finder finder = find.byType(Container); + expect(finder, findsOneWidget); + final Container widget = tester.widget(finder); + expect( + widget.decoration, + BoxDecoration( + color: ZetaColors.light().surfaceWarm, + borderRadius: BorderRadius.circular(8), + ), + ); + }); + + testWidgets('border radius is null when rounded is false', (WidgetTester tester) async { + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label', + rounded: false, + ), + ), + ); + final Finder finder = find.byType(Container); + expect(finder, findsOneWidget); + final Container widget = tester.widget(finder); + expect( + widget.decoration, + BoxDecoration( + color: ZetaColors.light().surfaceWarm, + ), + ); + }); + + testWidgets('text style is ZetaTextStyles.bodyXSmall and text color is textDefault', (WidgetTester tester) async { + await tester.pumpWidget( + const TestApp( + home: ZetaStatusChip( + label: 'Label', + ), + ), + ); + final Finder finder = find.byType(Text); + expect(finder, findsOneWidget); + final Text widget = tester.widget(finder); + expect(widget.style, ZetaTextStyles.bodyXSmall.copyWith(color: ZetaColors.light().textDefault)); + }); + }); + + group('Interaction Tests', () { + testWidgets('chip calls onDragCompleted and parses data to DragTarget when drag is completed', + (WidgetTester tester) async { + bool dragCompleted = false; + String? dragData; + + await tester.pumpWidget( + TestApp( + home: Column( + children: [ + ZetaStatusChip( + label: 'Label', + draggable: true, + data: 'data', + onDragCompleted: () { + dragCompleted = true; + }, + ), + DragTarget( + onAcceptWithDetails: (details) => dragData = details.data, + builder: (BuildContext context, List candidateData, List rejectedData) { + return const SizedBox( + width: 100, + height: 100, + ); + }, + ), + ], + ), + ), + ); + + final Finder finder = find.byType(Draggable); + expect(finder, findsOneWidget); + + final TestGesture gesture = await tester.startGesture(tester.getCenter(finder)); + await gesture.moveTo(tester.getCenter(find.byType(DragTarget))); + await gesture.up(); + + expect(dragCompleted, isTrue); + expect(dragData, 'data'); + }); + }); + + group('Golden Tests', () { + goldenTest( + goldenFile, + const ZetaStatusChip( + label: 'Label', + ), + 'status_chip_default', + ); + goldenTest( + goldenFile, + const ZetaStatusChip( + label: 'Label', + rounded: false, + ), + 'status_chip_sharp', + ); + goldenTest( + goldenFile, + const ZetaStatusChip( + label: 'Label that is very very long', + ), + 'status_chip_long', + ); + }); + + group('Performance Tests', () {}); +}