Simulating user DOM interaction in Angular unit tests

Many components have complex interactions with the DOM elements described in their templates, causing HTML to appear and disappear as the component state changes, for example:

• autocomplete / typeahead,
• timepicker / datepicker,
• tables sorting / filtering / pagination.

I will test here the user DOM interaction with the sample search component - an enhanced version of the Angular Material Autocomplete. Check out this project on StackBlitz. Explanations of these tests can also be viewed on a live YouTube recording (currently only in Polish).

Table of contents

• Motivation
• Built With
• Getting Started
• License
• Credits

Motivation

Can class-only tests guarantee that a component in Angular works correctly?

Here is the answer from the Angular testing documentation:

But a component is more than just its class. A component interacts with the DOM and with other components. The class-only tests can tell you about class behavior. They cannot tell you if the component is going to render properly, respond to user input and gestures, or integrate with its parent and child components.

None of the class-only tests above can answer key questions about how the components actually behave on screen.

To answer the key questions about how the components actually behave on screen, you have to create the DOM elements associated with the components, you must examine the DOM to confirm that component state displays properly at the appropriate times, and you must simulate user interaction with the screen to determine whether those interactions cause the component to behave as expected.

-- Angular Testing Guide | Component DOM Testing

Built With

• Angular v. 10.0.14 - The web framework used
• Node.js v. 10.16.3 - JavaScript runtime built
• NPM v. 6.9.0 - Dependency Management
• Karma v. 5.0.0 - Test Runner
• Jasmine v. 3.5.0 - Testing Framework

Getting Started

Show instructions on how to get a copy of the project up and running on your local machine

Prerequisites

• VS Code or other IDE
• Node.js v. 10.16.3 or higher

Installing

1. Clone repo

   $ git clone https://github.com/crappylime/angular-test-typeahead.git

2. Go to the project root

   $ cd angular-test-typeahead

3. Install dependencies

   $ npm i

4. Run tests

   $ npm test

5. You can also run tests in the headless mode

   $ npm test:ci

6. Or run the app

   $ npm start

License

This project is licensed under the MIT License - see the LICENSE file for details

Credits

• Component Testing Scenarios from Angular Testing Guide
• Open Skills API from Data At Work
• test 'cases' pattern from Zack DeRose