AngularDart Test banner

AngularDart Test

Testing utilities and helpers for AngularDart components.

Part of the AngularDart ecosystem.

Features

Component testing - Test AngularDart components in isolation
NgTestBed - Create and manage component test fixtures
Test fixtures - Interact with rendered components
Zone stabilization - Wait for async operations to complete
Change detection - Trigger and verify view updates

Installation

Add to your pubspec.yaml:

dev_dependencies:
  angulardart_test: ^5.0.0
  build_runner: ^2.4.0
  build_test: ^2.2.0
  build_web_compilers: ^4.0.0

Quick Start

import 'package:angulardart/angular.dart';
import 'package:angulardart_test/angulardart_test.dart';
import 'package:test/test.dart';

import 'my_component.dart';
import 'my_component.template.dart' as ng;

void main() {
  ng.initReflector();
  tearDown(disposeAnyRunningTest);

  test('should render greeting', () async {
    final testBed = NgTestBed<HelloComponent>();
    final fixture = await testBed.create();
    
    expect(fixture.text, contains('Hello'));
    
    await fixture.update((c) => c.name = 'World');
    expect(fixture.text, contains('Hello World'));
  });
}

Testing with NgTestBed

Create a test fixture

final testBed = NgTestBed<MyComponent>();
final fixture = await testBed.create();

Access component instance

final component = fixture.rootElement.componentInstance;

Update component state

await fixture.update((c) {
  c.name = 'New Value';
});

Query DOM elements

final element = fixture.rootElement.querySelector('.my-class');
expect(element.text, 'Expected text');

Trigger events

await fixture.update((c) {
  c.onButtonClick();
});

Testing with Dependencies

test('should work with services', () async {
  final testBed = NgTestBed<MyComponent>(
    beforeChangeDetection: (component) {
      component.service = MockService();
    },
  );
  
  final fixture = await testBed.create();
  expect(fixture.text, contains('Data from mock'));
});

Async Testing

AngularDart tests run in zones. Use tearDown to clean up:

import 'package:angulardart_test/angulardart_test.dart';

void main() {
  tearDown(disposeAnyRunningTest);
  
  test('async test', () async {
    final testBed = NgTestBed<MyComponent>();
    final fixture = await testBed.create();
    
    // Wait for async operations
    await fixture.update((c) {});
  });
}

Configuration