Bringing localization into your Widget testing

Published in

Wyzetalk Tech

3 min readJul 20, 2020

The more accurate you make your test, the higher the quality of the test itself.

Many apps these days are built to be more accessible, one thing we do to ensure this is we localize our applications, allowing people who do not speak the same language as we do, to also use the application.

In our application, we have been using easy_localization, I know there are quite a few choices, but for us, this was one of the easier ones to implement and for us, the JSON support was a big win with how we manage our localization.

To ensure we have the most accurate widget tests, we rather use “real” localizations than having to mock the helper classes.

To do this we keep a local copy of the locale JSON files to keep them safe from external updates and have created a helper function createLocalizedWidgetFortesting which looks like:

Widget createLocalizedWidgetForTesting({Widget child}) {
  return EasyLocalization(
    path: '$TEST_MOCK_STORAGE/locale',
    useOnlyLangCode: true,
    assetLoader: FileAssetLoader(),
    fallbackLocale: const Locale('en'),
    supportedLocales: globals.supportedLocale,
    saveLocale: false,
    child: MaterialApp(
      home: Scaffold(
        body: child,
      ),
    ),
  );
}

As you will see, EasyLocatlizationrequires a path, that is simply a constant that we have defined a little higher in the file, as it is used as part of other mocks.

const TEST_MOCK_STORAGE = './test/fixtures/core';

Beyond that, everything else is pretty much how it is set up in main.dart .

Here is a simplified example of how a test would look with this implementation.

void main() {
  testWidgets(
    'Should render localized widget',
    (
      WidgetTester tester,
    ) async {
      await tester.pumpWidget(
        createLocalizedWidgetForTesting(
          child: SampleWidget(),
        ),
      );await tester.pumpAndSettle();// expectations to follow
    }
  );
}

Through this would be able to run proper expectations like:

expect(find.text("Sample localized text", findsOneWidget);

More importantly, if you have a language switcher that a user can select you can test for text changes through a setup flow.

I hope you found this useful, and if you have any questions, comments, or improvements, feel free to drop me a comment.

Thanks for reading.

If you wish to carry on with the subject of testing, why not take a look at:

Widget testing passed in function

In this post, we going to go through how, at least in my opinion, one would go about testing that a function is called…

medium.com

Widget testing when your app needs access to directories.

Many times in an application you would have a need to store files, temporarily or even permanently. For this, you are…