Releases: Ninja-Squad/ngx-speculoos
12.0.0
⚠ BREAKING CHANGES
ngx-speculoosis now based on Angular 18.x. If you want to use it with an older version of Angular, then stick to a previous version of `ngx-speculoosTestSelect'sselectIndex,selectValueandselectLabelmethods now throw if an invalid index, value or label is passed, instead of ignoring it.- The deprecated
fakeRouteandfakeSnapshotfunctions have been dropped.
UsestubRoute, or theRoutingTesterinstead.
Features
11.1.0
v11.0.0
v10.0.0
v9.0.0
v8.0.1
v8.0.0
v7.2.0
v7.1.0
This new release brings some exciting improvements.
stubRoute
The fakeRoute() method was clumsy: the snapshot and the reactive elements of the routes were provided separately and thus weren't necessarily consistent. Simulating a navigation was not really supported.
This function has been deprecated in favor of a new stubRoute function, which is way better. The created stub route maintains the coherence between the snapshot and the reactive parts, and simulating a navigation is as easy as calling setParams(), setQueryParams(), or other similar methods. Check the API documentation for more information.
toHaveTrimmedText matcher
A new custom matcher toHaveTrimmedText() has been added, for cases where the markup looks like
<h1>
Some title
</h1>and the text thus contains spaces at the beginning and at the end. toHaveText('Some title') would fail on such a case, and toContainText('Some title') wouldn't really express the tester's intention. toHaveTrimmedText('Some title') is a better choice.
Simplified jasmine mock creation
Since Angular uses classes for most services, it's possible to do some introspection to create mocks of services. That's what the createMock function does. So, instead of using
const someService = jasmine.createSpyObj<SomeService>('SomeService', ['get', 'create']);we can simply use
const someService = createMock(SomeService);queries by type
Until now, ngx-speculoos only allowed querying its test elements using CSS queries. To query by directive, you had to fallback to using the DebugElement. Now, all queries allow using directive types. So, assuming for example that there is an <input> element with a Datepicker directive, we can for example now use
get datepicker() {
return this.input(Datepicker); // returns a TestInput just like the CSS query
}
queries for injection tokens
If you need to get the Datepicker directive instance itself, then use the token() method which takes a selector (CSS or type) as first argument, and the token as second argument:
get datepicker() {
return this.token('#birth-date', Datepicker); // returns a Datepicker instance
}
queries for component instances
You can also use the component() method to get a child component instance:
get childComponent() {
return this.component(ChildComponent); // returns the instance of ChildComponent
}
queries for custom TestElement instances
Finally, to promote the usage of custom TestElement classes (in addition to the provided TestInput, TestSelect, etc.), you can define yours and use the custom() or customs() methods to get them. For example, if you want to define a reusable TestDatepicker class, which allows querying and interacting with your custom datepicker component, you can define a custom TestElement subclass like the following:
class TestDatepicker extends TestHtmlElement<HTMLElement> {
constructor(tester: ComponentTester<unknown>, debugElement: DebugElement) {
super(tester, debugElement);
}
get inputField() {
return this.input('input');
}
setDate(year: number, month: number, day: number) {
this.inputField.fillWith(`${year}-${month}-${day}`);
}
toggleDropdown() {
this.button('button').click();
}
}then, to get an instance of this TestDatepicker:
get birthDate() {
return this.custom('#birth-date', TestDatepicker);
}
