v8.0.0

⚠ BREAKING CHANGES

• ngx-speculoos is now based on Angular 14.x. It also needs RxJS v7.5+. If you want to use it with an older version of Angular, then stick to the previous version of ngx-speculoos.

v7.2.0

This release only adds the possibility to specify the routeConfig of a stub route (and its snapshot)

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

v7.0.0

⚠ BREAKING CHANGES

• ngx-speculoos is now based on Angular 13.x. It also needs RxJS v7.4+. If you want to use it with an older version of Angular, then stick to the previous version of ngx-speculoos.

v6.0.0

Features

• enable Ivy partial compilation (5731919)

⚠ BREAKING CHANGES

• ngx-speculoos now targets Angular 12.0.0 and Ivy only. If you want to use it with Angular 11.x or View Engine, stick to the previous version of ngx-speculoos. Partial Ivy compilation is now enabled, allowing ngcc to skip this package and you to have faster builds! 🚀

v5.0.0

⚠ BREAKING CHANGES

• ngx-speculoos is now built against Angular 11.0.0. If you want to use it with Angular 10.x, stick to the previous version of ngx-speculoos.

Features

• bump to Angular v11 (060449f)

v4.1.0

Features

• test if html element is visible + corresponding matcher (192a2bd)

v4.0.0

Features

• strict and better typings (822963d)

We now properly infer (if possible) the type of the queried element(s).
For example:

const testElement = tester.element('div'); // inferred as TestHtmlElement<HTMLDivElement> | null
const testLink = tester.element<HTMLAnchorElement>('.selector'); // inferred as TestHtmlElement<HTMLAnchorElement> | null
const testButtons = tester.elements<HTMLButtonElement>('.btn'); // inferred as Array<TestButton>
const testElements = tester.elements('div'); // inferred as Array<TestHtmlElement<HTMLDivElement>>
const testLinks = tester.elements<HTMLAnchorElement>('.selector'); // inferred as Array<TestHtmlElement<HTMLAnchorElement>>

⚠ BREAKING CHANGES

• ngx-speculoos is now built against Angular 10.0.0. If you want to use it with Angular 9.x, stick to the previous version of ngx-speculoos.