在 Flutter 中测试时如何查找 Stack 的顺序？

Posted 2023-02-21

【中文标题】在 Flutter 中测试时如何查找 Stack 的顺序？

【英文标题】：How to find the order of a Stack during testing in Flutter?

【发布时间】：2019-04-29 21:40:27

【问题描述】：

假设我有一堆不同的小部件：

return Stack(
  children: <Widget>[
    Container(),
    Text('Hey'),
    Positioned(top: 300.0, child: CustomWidget()),
  ],
);

如何测试子小部件的顺序？我可以为每个项目分配键，但我怎么知道哪个项目出现在另一个项目的前面？

我可以为我的 Stack 分配一个密钥，将每个子项包装在 Positioned 中，然后使用 find.byKey(stackKey) 获取我的 Stack，然后使用 find.byType(Positioned) 获取其子项。这将返回一个Iterable，我可以将其转换为List。但是，find.byType() 是否保证每次返回相同的订单？

【问题讨论】：

最后一个的 z-index 最高。文本在容器之上，定位在文本之上。

在测试期间如何找到 z-index？

z-index 只是一个 web/css 术语，表示它在 z 平面上的高度。它不适用于颤振（我知道）。

对，在 Flutter 中属性是elevation。问题是，当我们在测试期间检索堆栈中的小部件列表时，我们如何知道相对高度的顺序？

【参考方案1】：

我在这里所做的是将 Keys 添加到 Stack 上的子项中，并带有预期顺序的编号。

Stack(
  children: [
    Container(
      key: Key('StackChildKey1'),
    ),
    Container(
      key: Key('StackChildKey2'),
    ),
    Container(
      key: Key('StackChildKey3'),
    ),
  ],
),

在测试脚本上，将所有匹配的键添加到列表中，以便我们稍后检查。

List<String> widgetOrderList = [];
tester.allWidgets.forEach((Widget element) 
  /// Only add the Widget Key with the expected tag 'StackChildKey'
  if (element.key.toString().contains('StackChildKey')) 
    widgetOrderList.add(element.key.toString());
  
);

使用String.compareTo(String) 验证小部件的顺序。

// This List<int> contains String.compareTo(String) results
/// https://api.flutter.dev/flutter/dart-core/String/compareTo.html
/// 0 − when the Strings are equal.
/// 1 − when the first String is greater than the second
/// -1 − when the first String is smaller than the second
List<int> sortCheck= [];
for (int i = 0; i < widgetOrderList.length; i++) 
  /// Compare current Widget Key with next while still within bounds
  if (i + 1 < widgetOrderList.length) 
    sortCheck.add(widgetOrderList[i].compareTo(widgetOrderList[i+1]));
  

然后使用expect 添加测试用例。这期望isWidgetStackSorted 的结果为真。

/// Flutter test expects that the [isWidgetStackSorted] to be true
/// if List<int> sortCheck contains either 0 or 1, this indicates
/// that a pair isn't in the correct order on Stack
var isWidgetStackSorted = !(sortCheck.contains(0) || sortCheck.contains(1));
expect(isWidgetStackSorted, true);

完成测试。

void main() 
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('Test Stack Order', (WidgetTester tester) async 
    // Build the app and trigger a frame.
    await tester.pumpWidget(MyApp());

    List<String> widgetOrderList = [];
    tester.allWidgets.forEach((Widget element) 
      /// Only add the Widget Key with the expected tag 'StackChildKey'
      if (element.key.toString().contains('StackChildKey')) 
        widgetOrderList.add(element.key.toString());
      
    );

    /// This List<int> contains String.compareTo(String) results
    /// https://api.flutter.dev/flutter/dart-core/String/compareTo.html
    /// 0 − when the Strings are equal.
    /// 1 − when the first String is greater than the second
    /// -1 − when the first String is smaller than the second
    List<int> sortCheck= [];
    for (int i = 0; i < widgetOrderList.length; i++) 
      /// Compare current Widget Key with next while still within bounds
      if (i + 1 < widgetOrderList.length) 
        sortCheck.add(widgetOrderList[i].compareTo(widgetOrderList[i+1]));
      
    

    /// Flutter test expects that the [isWidgetStackSorted] to be true
    /// if List<int> sortCheck contains either 0 or 1, this indicates
    /// that a pair isn't in the correct order on Stack
    var isWidgetStackSorted = !(sortCheck.contains(0) || sortCheck.contains(1));
    expect(isWidgetStackSorted, true);
  );