Mobiele ontwikkeling met Flutter · Les

Integratietests

Voer integratietests uit om de interactie tussen meerdere widgets en volledige gebruikersflows binnen uw applicatie te valideren.

Les 2 van 411 stappen

Integratietests is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat zijn integratietests?

Welkom! In deze les verkennen we integratietesten, een essentiële stap bij het bouwen van robuuste Flutter-apps.

Integratietests controleren hoe verschillende onderdelen van je applicatie samenwerken. Je kunt het zien als het simuleren van een gebruiker die je app via een volledige stroom gebruikt, bijvoorbeeld door in te loggen, te navigeren en acties uit te voeren.

Waarom integratietests belangrijk zijn

Terwijl widgettests (die we eerder hebben behandeld) zich richten op afzonderlijke UI-componenten, geven integratietests je het vertrouwen dat volledige gebruikersstromen correct werken.

  • Realistische scenario's: Boots echt gebruikersgedrag na.
  • Fouten vroeg opsporen: Breng problemen aan het licht die alleen optreden wanneer meerdere widgets of services samenwerken.
  • Stabiliteit waarborgen: Controleer of wijzigingen bestaande functies niet breken.

Integratietests instellen

Flutter gebruikt het pakket integration_test om deze tests mogelijk te maken. Je kunt tests rechtstreeks op een echt apparaat of een emulator uitvoeren, waardoor je een waarheidsgetrouwe weergave krijgt van het gedrag van je app.

Voeg eerst de afhankelijkheid integration_test toe aan het pubspec.yaml-bestand van je dependencies en dev_dependencies:

dependencies:
  flutter:
    sdk: flutter
  integration_test:
    sdk: flutter
dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

Structuur van een integratietest

Integratietests bestaan meestal uit twee belangrijke bestanden:

  • De testdriver, meestal in test_driver/app_test.dart. Dit bestand stelt de omgeving in waarin je integratietests worden uitgevoerd.
  • De daadwerkelijke testsuite, meestal in integration_test/app_test.dart. Hier schrijf je de logica van je test.

Toegangspunt van de testdriver

Het bestand test_driver/app_test.dart is eenvoudig. Het initialiseert IntegrationTestWidgetsFlutterBinding en roept integrationDriver() aan om de uitvoering van de test af te handelen.

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() async {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  await integrationDriver();
}

App voor integratietests

We maken een eenvoudige tellerapp om een integratietest te demonstreren. Let erop dat we Keys toevoegen aan widgets die we in onze tests willen vinden en gebruiken.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter App')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                key: const Key('counterText'),
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'),
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Je integratietest schrijven

Nu schrijven we de daadwerkelijke test in integration_test/app_test.dart. We gebruiken tester.pumpAndSettle() om te wachten op animaties en UI-updates, en tester.tap() om gebruikersinteractie te simuleren.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';

// Import your app's main file. 
// Replace 'my_app_name' with your actual package name.
import 'package:my_app_name/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('Counter App Integration Tests', () {
    testWidgets('Verify counter increments on button tap', (tester) async {
      app.main(); // Start the application
      await tester.pumpAndSettle(); // Wait for the UI to build

      // Find the counter text and verify its initial value
      final counterTextFinder = find.byKey(const Key('counterText'));
      expect(counterTextFinder, findsOneWidget);
      expect(tester.widget<Text>(counterTextFinder).data, '0');

      // Find and tap the increment button
      final incrementButtonFinder = find.byKey(const Key('incrementButton'));
      await tester.tap(incrementButtonFinder);
      await tester.pumpAndSettle(); // Wait for state change & UI update

      // Verify the counter text has updated to 1
      expect(tester.widget<Text>(counterTextFinder).data, '1');

      // Tap again and verify it updates to 2
      await tester.tap(incrementButtonFinder);
      await tester.pumpAndSettle();
      expect(tester.widget<Text>(counterTextFinder).data, '2');
    });
  });
}

Integratietests uitvoeren

Om je integratietests uit te voeren gebruik je de opdracht flutter drive vanuit de hoofdmap van je project. Zorg dat er een Android-emulator of -apparaat, of een iOS-simulator of -apparaat actief is.

Met deze opdracht geef je Flutter de instructie om je testdriver te gebruiken en de testsuite tegen je app uit te voeren.

flutter drive \
  --driver=test_driver/app_test.dart \
  --target=integration_test/app_test.dart

Geavanceerde interacties

Integratietests kunnen complexe gebruikersstromen over meerdere schermen simuleren. Je kunt:

  • Tekst invoeren: Gebruik tester.enterText(find.byType(TextField), 'Hello');
  • Scrollen: Gebruik tester.scrollUntilVisible() om widgets zichtbaar te maken.
  • Navigeren: Tik op knoppen die Navigator.push() of Navigator.pop() aanroepen en controleer of het scherm verandert.

Gebruik altijd Keys om widgets betrouwbaar te identificeren, vooral bij dynamische UI's of meerdere vergelijkbare widgets.

Korte controle

Wat zijn de belangrijkste voordelen van het gebruik van integratietests bij Flutter-ontwikkeling?

Samenvatting: integratietesten

Goed gedaan! Je hebt geleerd wat integratietesten in Flutter inhouden. We hebben behandeld:

  • Wat integratietests zijn en waarom ze essentieel zijn voor de stabiliteit van apps.
  • Hoe je het pakket integration_test instelt.
  • De structuur van integratietests en hoe je ze schrijft.
  • Hoe je tests uitvoert met flutter drive.

Integratests geven veel vertrouwen dat de functies van je app naadloos samenwerken, precies zoals een gebruiker dat ervaart.

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
22
Lessen
88

Veelgestelde vragen

Is de les “Integratietests” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Integratietests”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Integratietests”?

Voer integratietests uit om de interactie tussen meerdere widgets en volledige gebruikersflows binnen uw applicatie te valideren. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Integratietests”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Principes van widgettesting
  2. Integratietests
  3. Debuggingtools en -technieken
  4. Unit testing en mocking
← Terug naar Mobiele ontwikkeling met Flutter