Component Testing: Simulating user action (DRAFT) 6.0
If you notice any issues with this page, please
report them.
- Component testing
- Running component tests
-
Writing component tests
- Basics: pubspec config, test API fundamentals
- Page objects: field annotation, initialization, and more
- Simulating user action: click, type, clear
- Services: local, external, mock, real
@Input()
and@Output()
- Routing components
- Appendices - coming soon
Click
Use the PageLoaderElement.click() method to simulate a user click on a given PO element. Here is an example for a back button:
toh-5/test/hero_po.dart (back button)
@ByTagName('button')
PageLoaderElement get _button;
// ···
Future<void> back() => _button.click();
Similarly, you might define a PO method for selecting a hero from a list as follows:
toh-2/test/app_po.dart (selectHero)
@ByTagName('li')
List<PageLoaderElement> get _heroes;
// ···
Future<void> selectHero(int index) => _heroes[index].click();
Input: add text
The Hero Editor allows a user to edit a hero’s name by means of
an <input>
element. Use the PageLoaderElement.type() method to
simulate adding text to the input element:
toh-1/test/app_po.dart (AppPO input)
@ByTagName('input')
PageLoaderElement get _input;
// ···
Future<void> type(String s) => _input.type(s);
Here is an example of how the type()
method might be used to update a hero’s name:
toh-1/test/app_test.dart (update name)
const nameSuffix = 'X';
test('update hero name', () async {
await appPO.type(nameSuffix);
expect(appPO.heroId, windstormData['id']);
expect(appPO.heroName, windstormData['name'] + nameSuffix);
});
Input: clear
You can clear an input using the PageLoaderElement.clear() method:
toh-2/test/app_po.dart (clear)
Future<void> clear() => _input.clear();
Here is an example of a PO method for adding a new hero. It makes use of both
clear()
and type()
:
toh-6/test/heroes_po.dart (addHero)
Future<void> addHero(String name) async {
await _input.clear();
await _input.type(name);
await _add.click();
}