src/lib/routing-tester.ts
A thin wrapper around Angular RouterTestingHarness which helps testing routed components. It allows, based on a configured testing module where the router is provided, to initially navigate to a given route, then test the routed component. It's then possible to either navigate again with the wrapped harness, or to use the component to trigger navigation, and test that the URL has changed for example.
Properties |
|
Methods |
Accessors |
constructor(harness: RouterTestingHarness)
|
||||||
|
Defined in src/lib/routing-tester.ts:13
|
||||||
|
Parameters :
|
| Readonly fixture |
Type : ComponentFixture<C>
|
|
Inherited from
ComponentTester
|
|
Defined in
ComponentTester:27
|
|
The component fixture of the component |
| Readonly mode |
Type : "imperative" | "automatic"
|
|
Inherited from
ComponentTester
|
|
Defined in
ComponentTester:32
|
|
The mode used by the ComponentTester |
| Readonly testElement |
Type : TestElement<HTMLElement>
|
|
Inherited from
ComponentTester
|
|
Defined in
ComponentTester:22
|
|
The test element of the component |
| Static Async forUrl | ||||||||
forUrl(url: string)
|
||||||||
|
Defined in src/lib/routing-tester.ts:24
|
||||||||
|
Creates a RouterTestngHarness and uses it to navigate to the given URL and its fixture.
Parameters :
Returns :
unknown
a promise which resolves to a RoutingTester which wraps the harness and its fixture. |
| button | ||||||||
button(selector: string | Type
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:339
|
||||||||
|
Gets the first button matched by the given selector. Throws an Error if the matched element isn't actually a button.
Parameters :
Returns :
TestButton | null
the wrapped button, or null if no element was matched |
| Async change |
change()
|
|
Inherited from
ComponentTester
|
|
Defined in
ComponentTester:415
|
|
In imperative mode, runs change detection. In automatic mode, awaits stability.
Returns :
any
|
| component | ||||||||
component(selector: Type
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:347
|
||||||||
Type parameters :
|
||||||||
|
Gets the first directive matching the given component directive selector and returns its component instance
Parameters :
Returns :
R
|
| components | ||||||||
components(selector: Type
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:355
|
||||||||
Type parameters :
|
||||||||
|
Gets the directives matching the given component directive selector and returns their component instance
Parameters :
Returns :
Array<R>
|
| Static create | ||||||
create(componentType: Type
|
||||||
|
Inherited from
ComponentTester
|
||||||
|
Defined in
ComponentTester:37
|
||||||
Type parameters :
|
||||||
|
Creates a component fixture of the given type with the TestBed and wraps it into a ComponentTester
Parameters :
Returns :
ComponentTester<C>
|
| custom | ||||||||||||
custom(selector: string | Type
|
||||||||||||
|
Inherited from
ComponentTester
|
||||||||||||
|
Defined in
ComponentTester:384
|
||||||||||||
Type parameters :
|
||||||||||||
|
Gets the element matching the given selector, and if found, creates and returns a custom TestElement of the provided type. This is useful to create custom higher-level abstractions similar to TestInput, TestSelect, etc. for custom elements or components.
Parameters :
Returns :
E | null
|
| customs | ||||||||||||
customs(selector: string | Type
|
||||||||||||
|
Inherited from
ComponentTester
|
||||||||||||
|
Defined in
ComponentTester:395
|
||||||||||||
Type parameters :
|
||||||||||||
|
Gets the elements matching the given selector, and creates and returns custom TestElements of the provided type. This is useful to create custom higher-level abstractions similar to TestInput, TestSelect, etc. for custom elements or components.
Parameters :
Returns :
Array<E>
|
| detectChanges | ||||||
detectChanges(checkNoChanges?: boolean)
|
||||||
|
Inherited from
ComponentTester
|
||||||
|
Defined in
ComponentTester:404
|
||||||
|
Triggers a change detection using the wrapped fixture in imperative mode. Throws an error in autodetection mode. You should generally prever
Parameters :
Returns :
void
|
| element | ||||||||
element(selector: K)
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:93
|
||||||||
Type parameters :
|
||||||||
|
Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput. Usage:
const testElement: TestHtmlElement<HTMLDivElement> | null = tester.element('div');
Parameters :
Returns :
TestHtmlElement | null
the wrapped element, or null if no element matches the selector. |
| elements | ||||||||
elements(selector: K)
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:205
|
||||||||
Type parameters :
|
||||||||
|
Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput. Usage:
const testElements: Array<TestHtmlElement<HTMLDivElement>> = tester.elements('div');
Parameters :
Returns :
Array<TestHtmlElement<>>
the array of matched elements, empty if no element was matched |
| input | ||||||||
input(selector: string | Type
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:311
|
||||||||
|
Gets the first input matched by the given selector. Throws an Error if the matched element isn't actually an input.
Parameters :
Returns :
TestInput | null
the wrapped input, or null if no element was matched |
| select | ||||||||
select(selector: string | Type
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:320
|
||||||||
|
Gets the first select matched by the given selector. Throws an Error if the matched element isn't actually a select.
Parameters :
Returns :
TestSelect | null
the wrapped select, or null if no element was matched |
| Async stable |
stable()
|
|
Inherited from
ComponentTester
|
|
Defined in
ComponentTester:426
|
|
Delegates to the wrapped fixture whenStable and, in imperative mode, detect changes
Returns :
Promise<void>
|
| textarea | ||||||||
textarea(selector: string | Type
|
||||||||
|
Inherited from
ComponentTester
|
||||||||
|
Defined in
ComponentTester:330
|
||||||||
|
Gets the first textarea matched by the given selector
Parameters :
Returns :
TestTextArea | null
the wrapped textarea, or null if no element was matched. Throws an Error if the matched element isn't actually a textarea. |
| token | ||||||||||||
token(selector: string | Type
|
||||||||||||
|
Inherited from
ComponentTester
|
||||||||||||
|
Defined in
ComponentTester:364
|
||||||||||||
Type parameters :
|
||||||||||||
|
Gets the first element matching the given selector, then gets the given token from its injector, or null if there is no such token
Parameters :
Returns :
R | null
|
| tokens | ||||||||||||
tokens(selector: string | Type
|
||||||||||||
|
Inherited from
ComponentTester
|
||||||||||||
|
Defined in
ComponentTester:373
|
||||||||||||
Type parameters :
|
||||||||||||
|
Gets the elements matching the given selector, then gets their given token from their injector, or null if there is no such token
Parameters :
Returns :
Array<R | null>
|
| url |
geturl()
|
|
Defined in src/lib/routing-tester.ts:32
|
|
Gets the current URL of the Router service as a string
Returns :
string
|
| urlTree |
geturlTree()
|
|
Defined in src/lib/routing-tester.ts:41
|
|
Gets the current URL of the Router service as an UrlTree, to be able to test its elements (query params, etc.)
Returns :
UrlTree
|
import { ComponentTester } from './component-tester';
import { RouterTestingHarness } from '@angular/router/testing';
import { Router, UrlTree } from '@angular/router';
import { TestBed } from '@angular/core/testing';
/**
* A thin wrapper around Angular RouterTestingHarness which helps testing routed components.
* It allows, based on a configured testing module where the router is provided, to initially navigate
* to a given route, then test the routed component. It's then possible to either navigate again with
* the wrapped harness, or to use the component to trigger navigation, and test that the URL has changed
* for example.
*/
export class RoutingTester extends ComponentTester<unknown> {
constructor(readonly harness: RouterTestingHarness) {
super(harness.fixture);
}
/**
* Creates a RouterTestngHarness and uses it to navigate to the given URL
* @param url the URL to initially navigate to.
* @return a promise which resolves to a RoutingTester which wraps the harness
* and its fixture.
*/
static async forUrl(url: string) {
const harness = await RouterTestingHarness.create(url);
return new RoutingTester(harness);
}
/**
* Gets the current URL of the Router service as a string
*/
get url(): string {
const router = TestBed.inject(Router);
return router.url;
}
/**
* Gets the current URL of the Router service as an UrlTree, to be able to test its
* elements (query params, etc.)
*/
get urlTree(): UrlTree {
const router = TestBed.inject(Router);
return router.parseUrl(router.url);
}
}