462 lines
12 KiB
Dart
462 lines
12 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
import 'package:golden_toolkit/golden_toolkit.dart';
|
|
import 'package:design_system/design_system.dart';
|
|
|
|
void main() {
|
|
themePackages();
|
|
|
|
testGoldens('Step Indicator', (tester) async {
|
|
StepIndicator stepIndicator(int step) =>
|
|
StepIndicator(total: 3, current: step, color: Colors.blueAccent);
|
|
|
|
final builder = GoldenBuilder.column()
|
|
..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 {
|
|
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', 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 {
|
|
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', 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)),
|
|
);
|
|
|
|
await tester.pumpWidgetBuilder(builder.build());
|
|
await screenMatchesGolden(tester, 'textfield');
|
|
});
|
|
|
|
testGoldens('Primary Button', (tester) async {
|
|
const double buttonHeight = 70;
|
|
const double buttonWidth = 250;
|
|
|
|
final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1)
|
|
..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 {
|
|
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,
|
|
),
|
|
);
|
|
|
|
await tester.pumpWidgetBuilder(builder.build());
|
|
await tester.tap(find.byKey(tapTarget));
|
|
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,
|
|
),
|
|
);
|
|
|
|
await tester.pumpWidgetBuilder(builder.build());
|
|
await screenMatchesGolden(tester, 'money_text');
|
|
});
|
|
|
|
testGoldens('Secondary Button', (tester) async {
|
|
const double buttonHeight = 70;
|
|
const double buttonWidth = 250;
|
|
|
|
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
|
|
..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');
|
|
});
|
|
|
|
void snackbarTest({
|
|
required String message,
|
|
required MessageType? type,
|
|
required String testName,
|
|
}) {
|
|
testGoldens('Snackbar $testName', (tester) async {
|
|
const Key tapTarget = Key('tap-target');
|
|
|
|
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: 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');
|
|
});
|
|
}
|
|
|
|
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: "", type: MessageType.error, testName: "error_empty");
|
|
snackbarTest(message: shortText, type: MessageType.error, testName: "error");
|
|
snackbarTest(
|
|
message: longText,
|
|
type: MessageType.error,
|
|
testName: "error_long_text",
|
|
);
|
|
|
|
testGoldens('Dropdown', (tester) async {
|
|
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,
|
|
),
|
|
);
|
|
|
|
await tester.pumpWidgetBuilder(builder.build());
|
|
await screenMatchesGolden(tester, 'dropdown');
|
|
});
|
|
}
|