From 9d7f940851ed7d99343dcdcc03083574832c3017 Mon Sep 17 00:00:00 2001 From: AlcalaJulian Date: Thu, 4 Dec 2025 10:30:44 +0100 Subject: [PATCH] fixing golden test --- packages/design_system/test/widget_test.dart | 472 ++++++++++++++----- 1 file changed, 366 insertions(+), 106 deletions(-) diff --git a/packages/design_system/test/widget_test.dart b/packages/design_system/test/widget_test.dart index 17517e9d..9e518317 100644 --- a/packages/design_system/test/widget_test.dart +++ b/packages/design_system/test/widget_test.dart @@ -7,195 +7,455 @@ void main() { themePackages(); testGoldens('Step Indicator', (tester) async { - final widget = (int step)=>StepIndicator(total: 3, current: step, color: Colors.blueAccent); + StepIndicator stepIndicator(int step) => + StepIndicator(total: 3, current: step, color: Colors.blueAccent); + final builder = GoldenBuilder.column() - ..addScenario('step -1', widget(-1)) - ..addScenario('step 0', widget(0)) - ..addScenario('step 1', widget(1)) - ..addScenario('step 2', widget(2)) - ..addScenario('step 3', widget(3)) - ..addScenario('step 4', widget(4)); + ..addScenario('step -1', stepIndicator(-1)) + ..addScenario('step 0', stepIndicator(0)) + ..addScenario('step 1', stepIndicator(1)) + ..addScenario('step 2', stepIndicator(2)) + ..addScenario('step 3', stepIndicator(3)) + ..addScenario('step 4', stepIndicator(4)); + await tester.pumpWidgetBuilder(builder.build()); await screenMatchesGolden(tester, 'step_indicator'); }); testGoldens('Progress Bar - Small', (tester) async { - final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 24, textSize: 16, textSecondarySize: 12, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87); + ProgressBar progressBar(double value, double max) => ProgressBar( + max: max, + value: value, + height: 24, + textSize: 16, + textSecondarySize: 12, + backgroundColor: Colors.blueGrey, + foregroundColor: Colors.blueAccent, + textColor: Colors.black87, + ); final builder = GoldenBuilder.column() - ..addScenario('full', widget(100, 100)) - ..addScenario('empty', widget(0, 100)) - ..addScenario('half', widget(75, 150)) - ..addScenario('overflowing', widget(200, 150)) - //..addScenario('negative', widget(-20, 83)) - ..addScenario('tiny value', widget(2.15, 150)); + ..addScenario('full', progressBar(100, 100)) + ..addScenario('empty', progressBar(0, 100)) + ..addScenario('half', progressBar(75, 150)) + ..addScenario('overflowing', progressBar(200, 150)) + // ..addScenario('negative', progressBar(-20, 83)) + ..addScenario('tiny value', progressBar(2.15, 150)); + await tester.pumpWidgetBuilder(builder.build()); await screenMatchesGolden(tester, 'progress_bar_small'); }); testGoldens('Progress Bar - Large', (tester) async { - final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 83, textSize: 40, textSecondarySize: 24, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87); + ProgressBar progressBar(double value, double max) => ProgressBar( + max: max, + value: value, + height: 83, + textSize: 40, + textSecondarySize: 24, + backgroundColor: Colors.blueGrey, + foregroundColor: Colors.blueAccent, + textColor: Colors.black87, + ); final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1) - ..addScenario('full', widget(100, 100)) - ..addScenario('empty', widget(0, 100)) - ..addScenario('half', widget(75, 150)) - ..addScenario('overflowing', widget(200, 150)) - ..addScenario('tiny value', widget(2.15, 150)); + ..addScenario('full', progressBar(100, 100)) + ..addScenario('empty', progressBar(0, 100)) + ..addScenario('half', progressBar(75, 150)) + ..addScenario('overflowing', progressBar(200, 150)) + ..addScenario('tiny value', progressBar(2.15, 150)); + await tester.pumpWidgetBuilder(builder.build()); await screenMatchesGolden(tester, 'progress_bar_large'); }); testGoldens('Text Field', (tester) async { - final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1) - ..addScenario('basic', SizedBox(height: 70, width: 250, child: CustomTextField())) - ..addScenario('hint', SizedBox(height: 70, width: 250, child: CustomTextField(hint: "type something"))) - ..addScenario('label', SizedBox(height: 100, width: 250, child: CustomTextField(hint: "type something", label: "text input"))) - ..addScenario('numeric', SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true))) - ..addScenario('password', SizedBox(height: 70, width: 250, child: CustomTextField(showPassword: false))) - ..addScenario('multiline', SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4))); + ..addScenario( + 'basic', + SizedBox(height: 70, width: 250, child: CustomTextField()), + ) + ..addScenario( + 'hint', + SizedBox( + height: 70, + width: 250, + child: CustomTextField(hint: "type something"), + ), + ) + ..addScenario( + 'label', + SizedBox( + height: 100, + width: 250, + child: CustomTextField(hint: "type something", label: "text input"), + ), + ) + ..addScenario( + 'numeric', + SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true)), + ) + ..addScenario( + 'password', + SizedBox( + height: 70, + width: 250, + child: CustomTextField(showPassword: false), + ), + ) + ..addScenario( + 'multiline', + SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4)), + ); await tester.pumpWidgetBuilder(builder.build()); await screenMatchesGolden(tester, 'textfield'); }); testGoldens('Primary Button', (tester) async { - final widget = ({onPressed, text}) => SizedBox( - height: 70, width: 250, - child:PrimaryButton(onPressed: onPressed, text: text, color: Colors.blueAccent) - ); + const double buttonHeight = 70; + const double buttonWidth = 250; final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1) - ..addScenario('empty', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "", color: Colors.blueAccent))) - ..addScenario('basic', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent))) - ..addScenario('round', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent))) - ..addScenario('small', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, width: 100, text: "press me", color: Colors.blueAccent))); + ..addScenario( + 'empty', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: PrimaryButton( + onPressed: () {}, + text: "", + color: Colors.blueAccent, + ), + ), + ) + ..addScenario( + 'basic', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: PrimaryButton( + onPressed: () {}, + text: "press me", + color: Colors.blueAccent, + ), + ), + ) + ..addScenario( + 'round', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: PrimaryButton( + onPressed: () {}, + radius: 100, + text: "press me", + color: Colors.blueAccent, + ), + ), + ) + ..addScenario( + 'small', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: PrimaryButton( + onPressed: () {}, + width: 100, + text: "press me", + color: Colors.blueAccent, + ), + ), + ); await tester.pumpWidgetBuilder(builder.build()); - await screenMatchesGolden(tester, 'primary_button'); }); testGoldens('Text Button', (tester) async { - final tapTarget = Key("tap-target"); + const tapTarget = Key("tap-target"); final builder = GoldenBuilder.column() - ..addScenario('empty', CustomTextButton(onPressed: ()=>{}, text: "")) - ..addScenario('basic', CustomTextButton(onPressed: ()=>{}, text: "press me")) - ..addScenario('tapped', CustomTextButton(onPressed: ()=>{}, text: "press me", key: tapTarget)) - ..addScenario('large text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 40, weight: FontWeight.w500)) - ..addScenario('small text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 10)) - ..addScenario('colored', CustomTextButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent)); + ..addScenario('empty', CustomTextButton(onPressed: () {}, text: "")) + ..addScenario( + 'basic', + CustomTextButton(onPressed: () {}, text: "press me"), + ) + ..addScenario( + 'tapped', + CustomTextButton(onPressed: () {}, text: "press me", key: tapTarget), + ) + ..addScenario( + 'large text', + CustomTextButton( + onPressed: () {}, + text: "press me", + size: 40, + weight: FontWeight.w500, + ), + ) + ..addScenario( + 'small text', + CustomTextButton(onPressed: () {}, text: "press me", size: 10), + ) + ..addScenario( + 'colored', + CustomTextButton( + onPressed: () {}, + text: "press me", + color: Colors.blueAccent, + ), + ); + await tester.pumpWidgetBuilder(builder.build()); await tester.tap(find.byKey(tapTarget)); - await tester.pump(); + await tester.pumpAndSettle(); await screenMatchesGolden(tester, 'text_button'); }); testGoldens('Money Text', (tester) async { final builder = GoldenBuilder.column() - ..addScenario('basic', MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent)) - ..addScenario('without cents', MoneyText(text: "50€", size: 20, color: Colors.blueAccent)) - ..addScenario('different sizes', MoneyText(text: "29.13€", size: 30, secondarySize: 15, color: Colors.blueAccent)) - ..addScenario('different sizes without cents', MoneyText(text: "50€", size: 30, secondarySize: 15, color: Colors.blueAccent)); + ..addScenario( + 'basic', + MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent), + ) + ..addScenario( + 'without cents', + MoneyText(text: "50€", size: 20, color: Colors.blueAccent), + ) + ..addScenario( + 'different sizes', + MoneyText( + text: "29.13€", + size: 30, + secondarySize: 15, + color: Colors.blueAccent, + ), + ) + ..addScenario( + 'different sizes without cents', + MoneyText( + text: "50€", + size: 30, + secondarySize: 15, + color: Colors.blueAccent, + ), + ); await tester.pumpWidgetBuilder(builder.build()); - await screenMatchesGolden(tester, 'money_text'); }); testGoldens('Secondary Button', (tester) async { - final widget = ({onPressed, text}) => SizedBox( - height: 70, width: 250, - child:SecondaryButton(onPressed: onPressed, text: text) - ); + const double buttonHeight = 70; + const double buttonWidth = 250; final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1) - ..addScenario('empty', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: ""))) - ..addScenario('text', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me"))) - ..addScenario('icon', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, icon: Icons.account_circle_outlined))) - ..addScenario('colored', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent,))) - ..addScenario('small', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, width: 100, text: "press me"))) - ..addScenario('round', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent,))); + ..addScenario( + 'empty', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: SecondaryButton(onPressed: () {}, text: ""), + ), + ) + ..addScenario( + 'text', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: SecondaryButton(onPressed: () {}, text: "press me"), + ), + ) + ..addScenario( + 'icon', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: SecondaryButton( + onPressed: () {}, + icon: Icons.account_circle_outlined, + ), + ), + ) + ..addScenario( + 'colored', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: SecondaryButton( + onPressed: () {}, + text: "press me", + color: Colors.blueAccent, + ), + ), + ) + ..addScenario( + 'small', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: SecondaryButton( + onPressed: () {}, + width: 100, + text: "press me", + ), + ), + ) + ..addScenario( + 'round', + SizedBox( + height: buttonHeight, + width: buttonWidth, + child: SecondaryButton( + onPressed: () {}, + radius: 100, + text: "press me", + color: Colors.blueAccent, + ), + ), + ); await tester.pumpWidgetBuilder(builder.build()); - await screenMatchesGolden(tester, 'secondary_button'); }); - final snackbarTest = ({message, type, testName}) { + void snackbarTest({ + required String message, + required MessageType? type, + required String testName, + }) { testGoldens('Snackbar $testName', (tester) async { const Key tapTarget = Key('tap-target'); - final widget = () => - SizedBox( - width: 800, - height: 600, - child: MaterialApp( - home: Scaffold( - body: Builder( - builder: (BuildContext context) { - return GestureDetector( - onTap: () { - ScaffoldMessenger.of(context).showSnackBar( - CustomSnackBar( - message: message, - type: type, - ).build(context) - ); - }, - behavior: HitTestBehavior.opaque, - key: tapTarget, - ); - } - ), + SizedBox buildScaffold() => SizedBox( + width: 800, + height: 600, + child: MaterialApp( + home: Scaffold( + body: Builder( + builder: (BuildContext context) { + return GestureDetector( + onTap: () { + ScaffoldMessenger.of(context).showSnackBar( + CustomSnackBar( + message: message, + type: type, + ).build(context), + ); + }, + behavior: HitTestBehavior.opaque, + key: tapTarget, + ); + }, ), ), - ); + ), + ); final builder = DeviceBuilder() - ..overrideDevicesForAllScenarios(devices: [ - Device(size: Size(750, 550), name: 'base') - ]) - ..addScenario(name: testName, widget: widget()); + ..overrideDevicesForAllScenarios( + devices: const [Device(size: Size(750, 550), name: 'base')], + ) + ..addScenario(name: testName, widget: buildScaffold()); await tester.pumpWidgetBuilder(builder.build()); await tester.tap(find.byKey(tapTarget)); + await tester.pumpAndSettle(); await screenMatchesGolden(tester, 'snackbar/$testName'); }); - }; + } - final shortText = "Mensaje de prueba"; - final longText = "Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas"; + const shortText = "Mensaje de prueba"; + const longText = + "Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas"; snackbarTest(message: "", type: null, testName: "default_empty"); snackbarTest(message: shortText, type: null, testName: "default"); snackbarTest(message: longText, type: null, testName: "default_long_text"); snackbarTest(message: "", type: MessageType.info, testName: "info_empty"); snackbarTest(message: shortText, type: MessageType.info, testName: "info"); - snackbarTest(message: longText, type: MessageType.info, testName: "info_long_text"); - snackbarTest(message: "", type: MessageType.success, testName: "success_empty"); - snackbarTest(message: shortText, type: MessageType.success, testName: "success"); - snackbarTest(message: longText, type: MessageType.success, testName: "success_long_text"); - snackbarTest(message: "", type: MessageType.warning, testName: "warning_empty"); - snackbarTest(message: shortText, type: MessageType.warning, testName: "warning"); - snackbarTest(message: longText, type: MessageType.warning, testName: "warning_long_text"); + snackbarTest( + message: longText, + type: MessageType.info, + testName: "info_long_text", + ); + snackbarTest( + message: "", + type: MessageType.success, + testName: "success_empty", + ); + snackbarTest( + message: shortText, + type: MessageType.success, + testName: "success", + ); + snackbarTest( + message: longText, + type: MessageType.success, + testName: "success_long_text", + ); + snackbarTest( + message: "", + type: MessageType.warning, + testName: "warning_empty", + ); + snackbarTest( + message: shortText, + type: MessageType.warning, + testName: "warning", + ); + snackbarTest( + message: longText, + type: MessageType.warning, + testName: "warning_long_text", + ); snackbarTest(message: "", type: MessageType.error, testName: "error_empty"); snackbarTest(message: shortText, type: MessageType.error, testName: "error"); - snackbarTest(message: longText, type: MessageType.error, testName: "error_long_text"); + snackbarTest( + message: longText, + type: MessageType.error, + testName: "error_long_text", + ); testGoldens('Dropdown', (tester) async { - final List emptyList = []; - final List shortList = [Text("A"), Text("B"), Text("C")]; + const List emptyList = []; + const List shortList = [Text("A"), Text("B"), Text("C")]; final builder = GoldenBuilder.column() - ..addScenario('empty', CustomDropdown(items: emptyList, onChanged: (_)=>{}, width: 200)) - ..addScenario('initial value', CustomDropdown(items: shortList, value: 1, onChanged: (_)=>{}, width: 300)) - ..addScenario('hint', CustomDropdown(items: shortList, hint: "choose an option", onChanged: (_)=>{})) - ..addScenario('label', CustomDropdown(items: shortList, label: "select", onChanged: (_)=>{}, width: 200)); + ..addScenario( + 'empty', + CustomDropdown(items: emptyList, onChanged: (_) {}, width: 200), + ) + ..addScenario( + 'initial value', + CustomDropdown( + items: shortList, + value: 1, + onChanged: (_) {}, + width: 300, + ), + ) + ..addScenario( + 'hint', + CustomDropdown( + items: shortList, + hint: "choose an option", + onChanged: (_) {}, + ), + ) + ..addScenario( + 'label', + CustomDropdown( + items: shortList, + label: "select", + onChanged: (_) {}, + width: 200, + ), + ); + await tester.pumpWidgetBuilder(builder.build()); await screenMatchesGolden(tester, 'dropdown'); }); -} \ No newline at end of file +}