angular-testing-kit

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

Table of contents

• Angular version compatibility
• Installation
• assertThat()
  • .doesNotExist()
    • Example
  • .exists()
    • Example
  • .hasInnerHtml()
    • Example
  • .hasTextContent()
    • Example
  • .hasTextContentMatching()
    • Example:
• delayBy()
  • Example
• extractTextContent()
  • Example
• findElementBySelector()
  • Example
• fireEvent()
  • Example
• getElementBySelector()
  • Example

Angular version compatibility

• 16+

Installation

• npm

  npm i -S @lazycuh/angular-testing-kit

• pnpm

  pnpm i -S @lazycuh/angular-testing-kit

• yarn

  yarn add @lazycuh/angular-testing-kit

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:

• If it's a string, then it's treated as an HTML selector by which to find the target element to fire the event on. If no element is found for the provided selector, then an error will be thrown.
• If it's an EventTarget such as Element or window, then the event is fired directly on it.
• If it's a DebugElement, then its native element will be dispatched the event on.

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();