I'm simply trying to imetiate the introduction to widget testing in Flutter, but I'm keep seeing test failure on my basic code example that I implemented.
Here is the test:
void main() {
testWidgets(
"OrderDetailsItemWidget - all fields are provided (quantity, name, and subtext)",
(WidgetTester tester) async {
// Arrange, Act
await tester.pumpWidget(
const OrderDetailsItemWidget(
1,
"name",
"subtext",
),
);
// Assert
expect(
find.byKey(const Key("order_details_item_widget_quantity")),
findsOneWidget,
);
expect(
find.byKey(const Key("order_details_item_widget_name")),
findsOneWidget,
);
expect(
find.byKey(const Key("order_details_item_widget_subtext")),
findsOneWidget,
);
},
);
}
and here is the OrderDetailsItemWidget
to be tested:
class OrderDetailsItemWidget extends StatelessWidget {
final int _quantity;
final String _name;
final String _subtext;
const OrderDetailsItemWidget(
this._quantity,
this._name,
this._subtext, {
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
const double quantitySquareSideValue = 25.0;
return Container(
margin: const EdgeInsets.only(
top: Dimens.sizeXxxs,
bottom: Dimens.sizeXxxs,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: quantitySquareSideValue,
height: quantitySquareSideValue,
decoration: const BoxDecoration(
color: DesignColor.colorNeutral4,
borderRadius: BorderRadius.all(
Radius.circular(2.0),
),
),
child: Center(
child: Text(
"$_quantity",
key: const Key("order_details_item_widget_quantity"),
style: DesignTypography.typographyBody1.copyWith(
color: DesignColor.colorNeutral100,
),
),
),
),
const SizedBox(
width: Dimens.sizeS,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 5.0,
),
Text(
_name,
key: const Key("order_details_item_widget_name"),
textAlign: TextAlign.left,
style: DesignTypography.typographySubheading2.copyWith(
color: DesignColor.colorNeutral100,
),
),
if (_subtext != null)
Text(
_subtext,
key: const Key("order_details_item_widget_subtext"),
textAlign: TextAlign.left,
style: DesignTypography.typographyCaption.copyWith(
color: DesignColor.colorNeutral70,
),
),
],
),
)
],
),
);
}
}
However, it keeps failing:
I assume that I'm not doing something special here, it's just a widget basically with three Text
s.
All I need is to verify that the subwidgets (the Texts
) are visible when providing the values of the fields. What am I missing here?!
Please note I tried to use the find.text("...")
instead of keys, but it didn't work as well.
Wrap the OrderDetailsItemWidget
in MaterialApp
void main() {
testWidgets(
"OrderDetailsItemWidget - all fields are provided (quantity, name, and
subtext)",
(WidgetTester tester) async {
// Arrange, Act
await tester.pumpWidget(
MaterialApp(
home: const OrderDetailsItemWidget(
1,
"name",
"subtext",
),
),
);
// Assert
expect(
find.byKey(const Key("order_details_item_widget_quantity")),
findsOneWidget,
);
expect(
find.byKey(const Key("order_details_item_widget_name")),
findsOneWidget,
);
expect(
find.byKey(const Key("order_details_item_widget_subtext")),
findsOneWidget,
);
},
);
}