Show me the money#

Here is a full example for testing a simple button

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:housemates_suite_components/widgets/buttons/button_base.dart';
import 'package:housemates_suite_components/widgets/buttons/primary_button.dart';

void main() {
  testWidgets('Base button renders correctly', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: ButtonBase(buttonStyle: ButtonStyle(), buttonChild: Container()),
      ),
    );

    expect(find.byType(ButtonBase), findsOneWidget);
  });
  testWidgets('Buttons on press working', (WidgetTester tester) async {
    int counter = 1;
    await tester.pumpWidget(
      MaterialApp(
        home: ButtonBase(
          buttonStyle: ButtonStyle(),
          buttonChild: Container(),
          onPressed: () => counter += 1,
        ),
      ),
    );
    final button = find.byType(ButtonBase);
    await tester.tap(button);
    await tester.pump();
    expect(counter == 2, true);
  });
  testWidgets('Main buttons renders', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: PrimaryButton(textContent: 'Test'),
      ),
    );

    expect(find.text("Test"), findsOneWidget);
  });
}

Lets break it down#

You do want to wrap your widgets inside of something. So far the simplest solution I found was to wrap them around MaterialApp and then for the home page I would just put the widget I want to render

This is somewhat redundant since the additional tests would all render the widget. I like to be explicit with it so if the test does fail, it would fail while rendering I wouldn’t have to figure out if the additional logic in the test failed

  testWidgets('Base button renders correctly', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: ButtonBase(buttonStyle: ButtonStyle(), buttonChild: Container()),
      ),
    );

    expect(find.byType(ButtonBase), findsOneWidget);
  });

The expect makes an assertion to look for a widget typeOf ButtonBase which is the class for this button. If the assertion only finds one, the test is complete since it rendered the button and rendered only 1

Button Clicks#

  testWidgets('Buttons on press working', (WidgetTester tester) async {
  int counter = 1;
  await tester.pumpWidget(
    MaterialApp(
      home: ButtonBase(
        buttonStyle: ButtonStyle(),
        buttonChild: Container(),
        onPressed: () => counter += 1,
      ),
    ),
  );
  final button = find.byType(ButtonBase);
  await tester.tap(button);
  await tester.pump();
  expect(counter == 2, true);
});

I render the button again but this time I give it a simple function. It will add 1 to my counter each time the button is pressed. The first thing I do is find the button with

final button = find.byType(ButtonBase);

Once I find the button, we want to tap it. Once its tapped you want the tester to update frames to apply the button tap

    await tester.tap(button);
    await tester.pump();

The final piece is to confirm that my counter value did in fact go up by one. So I make an assertion to make sure counter = 2

Show me the money#

Lets break it down#

Render the widget#

Button Clicks#