Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# Component Testing: Simulating user action (DRAFT) 6.0

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

<?code-excerpt path-base=”examples/ng/doc”?>

## Click

Use the PageLoaderElement.click() method to simulate a user click on a given PO element. Here is an example for a back button:

<?code-excerpt “toh-5/test/hero_po.dart (back button)” title?>

      @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:

<?code-excerpt “toh-2/test/app_po.dart (selectHero)” title?>

      @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:

<?code-excerpt “toh-1/test/app_po.dart (AppPO input)” title?>

      @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:

<?code-excerpt “toh-1/test/app_test.dart (update name)” title?>

      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:

<?code-excerpt “toh-2/test/app_po.dart (clear)” title?>

      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()`:

<?code-excerpt “toh-6/test/heroes_po.dart (addHero)” title?>

      Future<void> addHero(String name) async {
        await _input.clear();
        await _input.type(name);
        await _add.click();
      }