Highlights

New @angular/cdk/testing infrastructure and Angular Material test harnesses

Testing components has historically relied on using implementation details such as CSS selectors to
find components and to trigger events. This meant that whenever a component library changed its
implementation, all of the tests relying on those components would need to be updated.

In version 9, we are introducing component harnesses, which offer an alternative way to test
components. By abstracting away the implementation details, you can make sure your unit tests are
correctly scoped and less brittle.

Most of Angular Material's components can now be tested via harnesses, and we are making harnesses
available to any component author as part of the Component Dev Kit (CDK).

Here's an example test before harnesses:

 it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const selectTrigger = fixture.debugElement.query(By.css('.mat-select-trigger'));
    selectTrigger.triggerEventHandler('click', {});
    fixture.detectChanges();
    await fixture.whenStable();
    const options = document.querySelectorAll('.mat-select-panel mat-option');
    options[1].click(); // Click the second option, "Bug".
    fixture.detectChanges();
    await fixture.whenStable();
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });

And the same test with harnesses:

 it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const select = await loader.getHarness(MatSelect);
    await select.clickOptions({text: 'Bug'});
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });

Learn more about Angular Material's component harnesses or building your own with the CDK.

New @angular/google-maps package!

Earlier this year, we changed the name of this repo to "angular/components" to emphasize our goal
to provide more than Material Design components. The 9.0.0 release includes one of the next new
features in that regard- a new package that wraps the Google Maps JavaScript API in an easy-to-use Angular component.

You can see the documentation on GitHub for the time being.

Big thanks to @mbehrlich for contributing this!

New cdk/clipboard subpackage containing helpers for working with the clipboard.

This new capability for @angular/cdk provides some convenient helpers for dealing with
the clipboard. See the documentation for more information.

Big thanks to @xkxx for contributing this!

Breaking changes

We no longer have a direct depedency on tslib. Instead it is now listed a peerDependency.
This matches Angular framework.

Users not using the Angular CLI will need to manually install tslib via;

yarn add tslib
# or
npm install tslib --save

material

Deprecations:

• checkbox: MAT_CHECKBOX_CLICK_ACTION is deprecated, use MAT_CHECKBOX_DEFAULT_OPTIONS

cdk

youtube-player

google-maps

material-experimental

cdk-experimental