SaveFamily/sf-app-platform
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing golden test

Browse Source
This commit is contained in:
AlcalaJulian
2025-12-04 10:30:44 +01:00
parent 14d0f1515b
commit 9d7f940851
1 changed files with 366 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
packages/design_system/test/widget_test.dart
View File

@@ -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<Widget> emptyList = [];
final List<Widget> shortList = [Text("A"), Text("B"), Text("C")];
const List<Widget> emptyList = [];
const List<Widget> 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');
});
}
}