Component Testing: Simulating user action (DRAFT) 5.1


If you notice any issues with this page, please report them.

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();
}