Flutter golden testing - generating tester views sized to your mobile devices

Creating tests for various size viewports can help us look for wrapping and sizing regressions.  Our goal is to run the same test across several different-sized displays looking for regressions in the individual display sizes. We can do that by sizing the canvas just before loading the widget tree and running the golden test comparison. 

We need either the viewport size for the device or the raw size of the device in pixels and its DPR. So currently this test code accepts the raw size and the DPR.  The alternative is to just run the MediaQuery against the device and accept its width and height with a DPR of 1.0.  The test code below supports both.

Test Code



There are two tests, one for the Pixel 3a and the other for the Pixel 4XL.  Both tests pass in the raw pixel size and the Flutter DPR. The test 
  1. Sizes the canvas to the device geometry.
  2. Brings up the demo app
  3. Creates/validates a golden image snapshot of the viewport
The test app is the MediaQuery code listed in a previous blog article https://joe.blog.freemansoft.com/2023/08/better-golden-testing-understanding.html

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

/// Converts the size to a DPR 1.0 size and get the correct relative sizing
/// The test canvas / web is a DPR=1.0 device
/// This only provides the expected results if we load our fonts because the
/// Ahem font is much wider than our standard font
///
/// This can be used in two ways
/// 1. accept the device physical dimensions and the DPR as calculated by the Google viewport
/// 1. Accept the logical viewport dimensions and a DPR of 1.0
Future<void> configureTesterForSize(
    WidgetTester tester, Size canvasSize, double devicePixelRatio) async {
  Size convertedSize = Size(canvasSize.width / devicePixelRatio,
      canvasSize.height / devicePixelRatio);
  await tester.binding.setSurfaceSize(convertedSize);
  tester.view.physicalSize = convertedSize;
  tester.view.devicePixelRatio = 1.0;
}

void main() {
  /// Test the pixel 3a sized device
  testWidgets('Golden Test Pixel 3a', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await configureTesterForSize(tester, const Size(1080, 2220), 2.75);
    await tester.pumpWidget(const MyApp());
    await expectLater(
        find.byType(MyApp), matchesGoldenFile('main-pixel3a-actual.png'));
  });

  /// test the much larger 4XL sized device
  testWidgets('Golden Test Pixel 4XL', (WidgetTester tester) async {
    await configureTesterForSize(tester, const Size(1440, 3040), 2.75);
    // Build our app and trigger a frame.
    await tester.pumpWidget(const MyApp());
    await expectLater(
        find.byType(MyApp), matchesGoldenFile('main-pixel4XL-actual.png'));
  });
}


Font loader Code so we don't use the Ahem font

Must be located and named: test/flutter_test_config.dart. 

import 'dart:async';
import 'dart:io';

import 'package:golden_toolkit/golden_toolkit.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  return GoldenToolkit.runWithConfiguration(
    () async {
      await loadAppFonts();
      await testMain();
    },
    config: GoldenToolkitConfiguration(
      // Currently, goldens are not generated/validated in CI for this repo. We have settled on the goldens for this package
      // being captured/validated by developers running on MacOSX. We may revisit this in the future if there is a reason to invest
      // in more sophistication
      skipGoldenAssertion: () => !Platform.isMacOS,
    ),
  );
}


It assumes you have something like the following in your pubspec.yaml

flutter:
  uses-material-design: true
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto/Roboto-Regular.ttf

Related stuff by Joe

BlogBetter Flutter golden testing - how mobile logical sizing is different than the default golden size
BlogFlutter golden testing - generating tester views sized to your mobile devices
VideoFlutter Golden testing with views sized to your mobile devices
VideoFlutter golden testing - taking into account the Flutter logical resolution on mobile devices
Demonstration CodeFlutter media query example with tests

Resulting Pixel 3A golden image

This is the resulting golden image created and validated by the test after we loaded Roboto fonts into the test jig.

Note: The height is off compared to what is returned by MediaQuery on the device by about 25 pixels.

Resulting Pixel 4XL sized image

This is the resulting golden image created and validated by the test after we loaded Roboto fonts into the test jig.

Note: The height is off compared to what is returned by MediaQuery on the device by about 25pixels.






Comments

Post a Comment

Popular posts from this blog

Installing the RNDIS driver on Windows 11 to use USB Raspberry Pi as network attached

Image
I do a lot of my development and configuration via ssh into my Raspberry Pi Zero over the RNDIS connection. Some models of the Raspberry PIs can be configured with  gadget drivers  that let the Raspberry pi emulate different devices when plugged into computers via USB. My favorite gadget  is the network profile that makes a Raspberry Pi look like an RNDIS-attached network device.  All types of network services travel over an RNDIS device without knowing it is a USB hardware connection. A Raspberry Pi shows up as a Remote NDIS (RNDIS) device when you plug the Pi into a PC or Mac via a USB cable. The gadget  in the Windows Device Manager picture shows this RNDIS Gadget connectivity between a Windows machine and a Raspberry Pi. The Problem Windows 11 and Windows 10 no longer auto-installs the RNDIS driver that makes magic happen. Windows recognizes that the Raspberry Pi is some type of generic USB COM device. Manually running W indows Update  or  Upd...
Read more

Understanding your WSL2 RAM and swap - Changing the default 50%-25%

Image
The Windows Subsystem for Linux operates as a virtual machine that can dynamically grow the amount of RAM to a maximum set at startup time.  Microsoft sets a default maximum RAM available to 50% of the physical memory and a swap-space that is 1/4 of the maximum WSL RAM.  You can scale those numbers up or down to allocate more or less RAM to the Linux instance. The first drawing shows the default WSL memory and swap space sizing. The images below show a developer machine that is running a dev environment in WSL2 and Docker Desktop.  Docker Desktop has two of its own WSL modules that need to be accounted for.  You can see that the memory would actually be oversubscribed, 3 x 50% if every VM used its maximum memory.  The actual amount of memory used is significantly smaller allowing every piece to fit. Click to Enlarge The second drawing shows the memory allocation on my 64GB laptop. WSL Linux defaul...
Read more

Almost PaaS Document Parsing with Tika and AWS Elastic Beanstalk

Image
The Apache Tika project provides a  library capable of parsing and extracting data and meta data from over 1000 file types.  Tika is available as a single jar file that can be included inside applications or as a deployable jar file that runs Tika as a standalone service. This blog describes deploying the Tika jar as an auto-scale service in Amazon AWS Elastic Beanstalk.  I selected Elastic Beanstalk because it supports jar based deployments without any real Infrastructure configuration. Elastic Beanstalk auto-scale should take care of scaling up and down for for the number of requests you get. Tika parses documents and extracts their text completely in memory. Tika was deployed for this blog using EC2 t2.micro instances available in the AWS free tier. t2.micro VMs are 1GB which means that you are restricted in document complexity and size. You would size your instances appropriately for your largest documents.   Preconditions An AWS account. AWS ac...
Read more