Home

Awesome

angular-testing-kit

A set of convenient utilities to make Angular testing with Jasmine and Karma simpler.

Table of contents

<!-- toc --> <!-- tocstop -->

Angular version compatibility

Installation

assertThat()

This assertion function accepts either a string or a DebugElement, it returns an assertion object that can be used to check for different conditions. The returned assertion object has the following methods:

.doesNotExist()

Will pass if no element with the provided class name exists in document.body.

Example

assertThat('.hello-world').doesNotExist();

.exists()

Will pass if an element with the provided class name exists in document.body.

Example

assertThat('.hello-world').exists();

.hasInnerHtml()

Will pass if an element with the provided class name has the provided inner HTML string.

Example

assertThat('.hello-world').hasInnerHtml('<span>Hello World</span>');

.hasTextContent()

Will pass if an element with the provided class name has the provided string as its text content.

Example

assertThat('.hello-world').hasTextContent('Hello World');

.hasTextContentMatching()

Will pass if an element with the provided class name whose text content matches the provided value. This function also accepts a RegExp to perform custom matching.

Example:

assertThat('.hello-world').hasTextContentMatching(/hello\s+world/i);

delayBy()

Returns a promise that will resolve after the provided milliseconds. Useful for when you need to wait for some asynchronous process to complete before proceeding.

Example

await delayBy(500);

extractTextContent()

Returns the text content of the element matched by the provided selector. It will throw an error if the matched element is a document or doctype node because these nodes' textContent will be null. If no element is matched, then an error will be thrown.

Example

expect(extractTextContent('.hello-world')).toEqual('Hello World');

findElementBySelector()

Returns the element matched by the provided selector. If nothing is matched, null is returned.

Example

expect(findElementBySelector('.hello-world')).not.toBeNull();

fireEvent()

Dispatch the given eventType DOM event on the target element matched by the provided selector. The selector argument accepts 3 different types of value:

Example

fireEvent('.hello-world', 'keyup', { key: 'Enter' });

getElementBySelector()

Returns the element matched by the provided selector. If nothing is matched, an error is thrown.

Example

expect(() => getElementBySelector('.hello-world')).not.toThrow();