ngx-speculoos

ngx-speculoos helps you write simpler, cleaner unit tests for your Angular components, based on the
page object pattern. It also provides utilities to make writing Angular unit tests.

The library simply wraps the standard Angular ComponentFixture, and you should thus be
able to understand and start using ngx-speculoos in just a few minutes if you already know
how to write Angular unit tests.

Why should you care?

If you've ever written tests like the following:

it('should display French cities when selecting the country France', () => {
const countrySelect = fixture.nativeElement.querySelector('#country'); // countrySelect is of type any
countrySelect.selectedIndex = 12; // what is at index 12?
countrySelect.dispatchEvent(new Event('change')); // why do I need to do that?
fixture.detectChanges();
const city = fixture.nativeElement.querySelector('#city'); // city is of type any
expect(city).toBeTruthy();
expect(city.options.length).toBe(3);
expect(city.options[0].value).toBe('');
expect(city.options[0].label).toBe('');
expect(city.options[1].value).toBe('PARIS');
expect(city.options[1].label).toBe('Paris');
expect(city.options[2].value).toBe('LYON');
expect(city.options[2].label).toBe('Lyon');
});
it('should hide cities when selecting the empty country option', () => {
const countrySelect = fixture.nativeElement.querySelector('#country'); // I did that previously. What about DRY?
countrySelect.selectedIndex = 0;
countrySelect.dispatchEvent(new Event('change')); // why do I need to do that?
fixture.detectChanges(); // why do I need to do that?
expect(fixture.nativeElement.querySelector('#city')).toBeFalsy(); // I did that previously. What about DRY?
});

Expose getters (or methods, if you prefer) returning the elements used in your tests, using
one of the ComponentTester methods (element, elements, input, select, textarea, button).
See the API documentation for details

Write your tests, as shown above, benefitting from the additional methods on the TestXxx classes.

If needed, you can always get the fixture, componentInstance, debugElement, nativeElement, etc.
from the ComponentTester, and the nativeElement from each TestXxx wrapper.

If you like our custom matchers, add them in a beforeEach block as shown above, and enjoy.

Issues, questions

Please, provide feedback by filing issues, or by submitting pull requests, to the Github Project.