web-dev-qa-db-fra.com

Comment tester les widgets Flutter sur différentes tailles d'écran?

J'ai un widget Flutter qui affiche des données supplémentaires en fonction de la taille de l'écran. Quelqu'un connaît-il un moyen de tester ce widget sur plusieurs tailles d'écran différentes?

J'ai jeté un œil au code source widget_tester mais je ne trouve rien.

flutterflutter-test
14
Jordan Davies

Vous pouvez spécifier une taille de surface personnalisée en utilisant WidgetTester

Le code suivant exécutera un test avec une taille d'écran de 42x42

import 'package:flutter/widgets.Dart';
import 'package:flutter_test/flutter_test.Dart';

void main() {
  testWidgets("foo", (tester) async {
    tester.binding.window.physicalSizeTestValue = Size(42, 42);

    // resets the screen to its orinal size after the test end
    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);

    // TODO: do something
  });
}
18
Rémi Rousselet

Je ne sais pas pourquoi mais la solution de @ rémi-rousselet n'a pas fonctionné pour moi. J'ai dû spécifier la taille de l'écran à l'aide de binding.window.physicalSizeTestValue et binding.window.devicePixelRatioTestValue pour que la sortie soit entièrement déterministe

J'ai ajouté un peu plus de code pour les débutants comme moi. Vérifie ça:

void main() {

  final TestWidgetsFlutterBinding binding =
    TestWidgetsFlutterBinding.ensureInitialized();

  testWidgets("Basic layout test (mobile device)", (tester) async {
    binding.window.physicalSizeTestValue = Size(400, 200);
    binding.window.devicePixelRatioTestValue = 1.0;

    await tester.pumpWidget(new MyApp());

    expect(find.byType(MyHomePage), findsOneWidget);
    // etc.
  });
}
9
VizGhar

La solution de @ rémi-rousselet fonctionne parfaitement!

De plus, si vous souhaitez tester un changement d'orientation, essayez ceci:

const double PORTRAIT_WIDTH = 400.0;
const double PORTRAIT_HEIGHT = 800.0;
const double LANDSCAPE_WIDTH = PORTRAIT_HEIGHT;
const double LANDSCAPE_HEIGHT = PORTRAIT_WIDTH;

final TestWidgetsFlutterBinding binding = TestWidgetsFlutterBinding.ensureInitialized();

await binding.setSurfaceSize(Size(PORTRAIT_WIDTH, PORTRAIT_HEIGHT));
await tester.pumpWidget(MyWidget());

// test in portrait

await binding.setSurfaceSize(Size(LANDSCAPE_WIDTH, LANDSCAPE_HEIGHT));
await tester.pumpAndSettle();

// OrientationBuilder gets triggered

// test in landscape
3
Mark

Bien que la réponse de @ Rémi Rousselet ait été très utile, elle n'a pas complètement résolu mon problème. Il s'avère que je pouvais simplement envelopper mon widget sous test dans un widget MediaQuery et définir la taille.

import 'package:flutter/material.Dart';
import 'package:flutter_test/flutter_test.Dart';

void main() {
  Widget makeTestableWidget({Widget child, Size size}) {
    return MaterialApp(
      home: MediaQuery(
        data: MediaQueryData(size: size),
        child: child,
      ),
    );
  }

  testWidgets("tablet", (tester) async {
    final testableWidget = makeTestableWidget(
      child: WidgetUnderTest(),
      size: Size(1024, 768),
    );

    ...
  });

  testWidgets("phone", (tester) async {
    final testableWidget = makeTestableWidget(
      child: WidgetUnderTest(),
      size: Size(375, 812),
    );

    ...
  });
}
0
Jordan Davies