Awesome
angular-testing-kit
A set of convenient utilities to make Angular testing with Jasmine and Karma simpler.
Table of contents
<!-- toc -->- Angular version compatibility
- Installation
assertThat()
delayBy()
extractTextContent()
findElementBySelector()
fireEvent()
getElementBySelector()
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 asElement
orwindow
, 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();