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:

$3

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

#### Example

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

$3

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

#### Example

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

$3

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

#### Example

`ts
assertThat('.hello-world').hasInnerHtml('Hello World');
`

$3

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

#### Example

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

$3

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:

`ts
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.

$3

`ts
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.

$3

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

findElementBySelector()

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

$3

`ts
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.

$3

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

getElementBySelector()

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

$3

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