Bringing localization into your Widget testing

Reme Le Hane
Jul 20, 2020 · 3 min read

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.

About Wyzetalk
Founded in South Africa and headquartered in The Netherlands, Wyzetalk is a leading global employee experience company that offers a mobile-first digital solution connecting large organisations with their dispersed, frontline workforce to improve communication, unleash innovation, and boost business performance. Since launching in 2012, the company has grown in revenue by more than 100% per annum. With a presence in 18 countries across five continents, today there are 650 000 employees making use of the Wyzetalk platform through clients in the Mining, Retail, FMCG, Manufacturing, Energy, Automotive and Shipping sectors.

Website: https://www.wyzetalk.com/

Wyzetalk Tech

Hear what our development team has been up to in the tech space.

Reme Le Hane

Written by

MTBer, Runner, Developer, Gamer. | Front end Architect at Wyzetalk with 10 years Front-End Experience & ~2yrs Flutter. | React Flutter Javascript

Wyzetalk Tech

Hear what our development team has been up to in the tech space.

Reme Le Hane

Written by

MTBer, Runner, Developer, Gamer. | Front end Architect at Wyzetalk with 10 years Front-End Experience & ~2yrs Flutter. | React Flutter Javascript

Wyzetalk Tech

Hear what our development team has been up to in the tech space.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store