Angular has just released version 11 of its remarkable framework, so let’s explore Angular’s latest features.

Component Test Harnesses

Component test harness allows tests to interact with components using supported APIs. This was first introduced in Angular 9. These APIs have the ability to interact with the components in a similar way to the end-users and tests can insulate themselves against the changes in the DOM.

At that time, this mechanism only supported Angular material. But with the latest release, a Component harness is available for all components.

The following example shows the usage of MatButtonHarness in Angular material:

import {MatButtonHarness} from '@angular/material/button/testing';

...

it('should work', async () => {
  const buttons = await loader.getAllHarnesses(MatButtonHarness); // length: 3
  const firstButton = await loader.getHarness(MatButtonHarness); // === buttons[0]
});

#angular #javascript #angular-11 #programming