web-dev-qa-db-ja.com

さまざまな画面サイズでFlutterウィジェットをテストするにはどうすればよいですか？

画面サイズに応じて追加のデータを表示するFlutterウィジェットがあります。誰かがこのウィジェットを複数の異なる画面サイズでテストする方法を知っていますか？

widget_tester ソースコードを確認しましたが、何も見つかりません。

flutterflutter-test
14
Jordan Davies

WidgetTester を使用して、カスタムサーフェスサイズを指定できます。

次のコードは、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

なぜだかわかりませんが、@rémi-rousseletの解決策がうまくいきませんでした。出力が完全に確定的になるように、binding.window.physicalSizeTestValueとbinding.window.devicePixelRatioTestValueを使用して画面サイズを指定する必要がありました

私のようなフラッター初心者のために、もう少しコードを追加しました。これをチェックして：

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

@rémi-rousseletのソリューションは完全に機能します！

さらに、向きの変更をテストする場合は、次のことを試してください。

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

@RémiRousseletの回答は非常に役に立ちましたが、私の問題を完全には解決しませんでした。テスト中のウィジェットをMediaQueryウィジェットにラップしてサイズを設定できることがわかりました。

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