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.

# Running Component Tests (DRAFT) 6.0

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

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

Whether you’ve just started the tutorial, or finished the Get Started page, you are ready to run your first tests! If you haven’t worked through these projects recently, don’t worry. You can follow along by first setting up the tutorial’s Starter App.

The tutorial’s Starter App includes a few basic tests for its `AppComponent` in the following test file:

<?code-excerpt “toh-0/test/app_test.dart (excerpt)” region=”initial” title?>

      @TestOn('browser')

      import 'package:ngtest/ngtest.dart';
      import 'package:angular_tour_of_heroes/app_component.dart';
      import 'package:angular_tour_of_heroes/app_component.template.dart' as ng;
      import 'package:test/test.dart';

      void main() {
        final testBed = NgTestBed<AppComponent>(ng.AppComponentNgFactory);
        late NgTestFixture<AppComponent> fixture;

        setUp(() async {
          fixture = await testBed.create();
        });

        tearDown(disposeAnyRunningTest);

        test('Default greeting', () {
          expect(fixture.text, 'Hello Angular');
        });
        // ···
      }

If you’ve used modern testing frameworks, then you’ll recognize elements such as the test fixture, and setup and teardown functions.

The file contains a test named “Default greeting” that checks whether the app component template generates the text “Hello Angular”:

<?code-excerpt “toh-0/test/app_test.dart (default test)”?>

      test('Default greeting', () {
        expect(fixture.text, 'Hello Angular');
      });

To run tests, open a terminal, and from the project root issue the following command:

    $ pub run build_runner test --fail-on-severe -- -p chrome

The optional build_runner `test` flag `--fail-on-severe` prevents tests from being run if there is a severe build error. For a complete list of command line options run `pub run build_runner test -h`.

Arguments after `--` (like `-p chrome` above) are passed directly to the test package runner. To see all command-line options for the test runner, use this command: `pub run build_runner test -- -h`.

The first test run builds the entire app. Incremental compilation makes subsequent test runs much quicker.

      [INFO] Entrypoint: Generating build script completed, took 230ms
      [INFO] BuildDefinition: Reading cached asset graph completed, took 271ms
      [INFO] BuildDefinition: Checking for updates since last build completed, took 409ms
      [INFO] Build: Running build completed, took 65ms
      [INFO] Build: Caching finalized dependency graph completed, took 115ms
      [INFO] CreateOutputDir: Creating merged output dir `.../build_runner_testimEd04/` completed, took 1.7s
      [INFO] CreateOutputDir: Writing asset manifest completed, took 1ms
      [INFO] Build: Succeeded after 1.9s with 0 outputs
      Running tests...

      00:01 +3: All tests passed!