Fix Integration Test section of 'How to test a Flutter app' page

[LokieVikky]

Page URL

https://codelabs.developers.google.com/codelabs/flutter-app-testing#6

Page source

No response

Describe the problem

"How to Test a Flutter App" Code lab has a problem in the Integration Test Section

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:testing_app/main.dart';

void main() {
  group('Testing App', () {
    testWidgets('Favorites operations test', (tester) async {
      await tester.pumpWidget(const TestingApp());

      final iconKeys = [
        'icon_0',
        'icon_1',
        'icon_2',
      ];

      for (var icon in iconKeys) {
        await tester.tap(find.byKey(ValueKey(icon)));
        await tester.pumpAndSettle(const Duration(seconds: 1));

        expect(find.text('Added to favorites.'), findsOneWidget);
      }

      await tester.tap(find.text('Favorites'));
      await tester.pumpAndSettle();

      final removeIconKeys = [
        'remove_icon_0',
        'remove_icon_1',
        'remove_icon_2',
      ];

      for (final iconKey in removeIconKeys) {
        await tester.tap(find.byKey(ValueKey(iconKey)));
        await tester.pumpAndSettle(const Duration(seconds: 1));

        expect(find.text('Removed from favorites.'), findsOneWidget);
      }
    });
  });
}

This Test will fail because we are adding three favourites by finding the icon keys 1 to 3
and we are trying to remove the added favourites on another page using 3 keys which are

      final removeIconKeys = [
        'remove_icon_0',
        'remove_icon_1',
        'remove_icon_2',
      ];

Since the page is rebuilding for every remove action
Indexes before performing the remove action: 0, 1, 2.
Indexes after first remove action: 0, 1.
Indexes after second remove action: 0.

So when trying to find the widget using the value key 'remove_key_2', the test will fail because that left the list after removing the first item itself.

Expected fix

Replace

      final removeIconKeys = [
        'remove_icon_0',
        'remove_icon_1',
        'remove_icon_2',
      ];

with

      final removeIconKeys = [
        'remove_icon_0',
        'remove_icon_0',
        'remove_icon_0',
      ];

Additional context

No response

[droidbg]

@LokieVikky I've checked this test, and it's passing as expected. The reason for this behaviour is as follows:

• In the FavouritesPage, the value.items list is initially set to [0, 1, 2], which serves as the key for the FavoriteItemTile components. Consequently, the initial keys for FavoriteItemTile will be [remove_icon_0, remove_icon_1, remove_icon_2].

• After one removal action, value.items is updated to [1, 2], resulting in keys [remove_icon_1, remove_icon_2].

• Finally, after two removal actions, value.items is further updated to [2], and the keys are reduced to [remove_icon_2].

I hope this clarifies the behaviour and answers your question.