ng-testing-library

Simple Angular testing utilities.

Table of Contents

• Installation
• Usage
  • configureEnvironment
• TextMatch

Installation

npm install --save-dev ng-testing-library

Usage

import { async, TestModuleMetadata } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';

import { configureEnvironment } from 'ng-testing-library';

import { FetchComponent } from './fetch.component';
import { FetchService } from './fetch.service';

describe('FetchComponent', () => {
  const metaData: TestModuleMetadata = {
    imports: [HttpClientModule],
    declarations: [FetchComponent],
    providers: [FetchService]
  };

  it('should create', () => {
    const { component } = configureEnvironment(FetchComponent, metaData);
    expect(component).toBeTruthy();
  });

  it('should fetch data on click', async(() => {
    const { getByText, fixture, component } = configureEnvironment(
      FetchComponent,
      metaData
    );
    const spy = spyOn(component.fetchService, 'queryData');
    getByText('Fetch').click();
    expect(spy).toHaveBeenCalledTimes(1);
  }));
});

configureEnvironment

The configureEnvironment method returns an object with the following properties:

fixture

Test harness for interacting with the created component and its corresponding element.

component

The instance of the root component class.

getByLabelText(text: TextMatch, options: {selector: string = '*'}): HTMLElement

This will search for the label that matches the given TextMatch, then find the element associated with that label.

getByPlaceholderText(text: TextMatch): HTMLElement

This will search for all elements with a placeholder attribute and find one that matches the given TextMatch.

getByText(text: TextMatch): HTMLElement

This will search for all elements that have a text node with textContent matching the given TextMatch.

getByAltText(text: TextMatch): HTMLElement

This will return the element (normally an <img>) that has the given alt text. Note that it only supports elements which accept an alt attribute: <img>, <input>, and <area> (intentionally excluding <applet> as it's deprecated).

getByTestId(text: TextMatch): HTMLElement

A shortcut to container.querySelector(`[data-testid="${yourId}"]`) (and it also accepts a TextMatch).

TextMatch

Several APIs accept a TextMatch which can be a string, regex or a function which returns true for a match and false for a mismatch.

See dom-testing-library#textmatch for options.