@fronthouse/test

This library is for speeding up Karma tests/specs with Angular, and also provides short-hand functions for writing less code.

Be aware: One side-effect by using this package can be that state in services may not be reset completely between each test-run. Be sure to do this manually if needed.

Code scaffolding

Code scaffolding will be available later

How to use

In your test.ts file (next to your main.ts in the root of your app project), add the following:

import { setDefaultConf } from '@fronthouse/test';
setDefaultConf(); // on last line

Then in your test, instead of instantiating a testBed:

const fixture;
configureTestSuite(MyModule, MyComponent)
  .subscribe(_fixture => {
    fixture = _fixture; // if you feel you need to save a reference to your fixture
    detectChanges(); // Ooh.. no need to reference the last fixture...
  });

afterEach(() => resetState); // this is your own reset function to reset any state in services if needed

it('should create', () => {
  expect(fixture.component).toBeTruthy();
});

Short-hand functions

All short-hand functions have an optional parameter 'fixture', but by default the current fixture is used. Requires the use of configureTestSuite.

Retrieve the first matching debug element using css selector

q('.css-class')

Retrieve all matching debug element using css selector

qAll('.css-class')

Retrieve the first matching native element using css selector

qn('.css-class')

Retrieve all matching native element using css selector

qnAll('.css-class')

Retrieve the first matching debug element using css selector, which also contains given text

qT('.css-class', 'some text')

Retrieve the first matching native element using css selector, which also contains given text

qnT('.css-class', 'some text')

Set a value to a input field and trigger proper "input" event

setValue(htmlElement, 'new value')

Set a value to a input field and trigger proper "input" + "blur" events

setValueAndBlur(htmlElement, 'new value')

Retrieve an elements inner text (all whitespace reduced to single space and trimmed)

elmText(htmlElement?)

Exported dependencies

Instead of importing functionality from a number of libraries, you can import the most used functionality directly from @fronthouse/test

These are exported for you to use

export { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
export { HttpTestingController, HttpClientTestingModule, TestRequest } from '@angular/common/http/testing';
export { RouterTestingModule } from '@angular/router/testing';
export { NoopAnimationsModule } from '@angular/platform-browser/animations';

Setting more default configuration

Use setDefaultConf to inject a set of default modules and providers so you don't have to do it all over the place.

Providers can be services or configuration.

setDefaultConf({ imports: [MyMockModule] });
setDefaultConf(null, [MyProvider]);

With no parameters, these modules are imported as default:

NoopAnimationsModule, HttpClientTestingModule, RouterTestingModule

More information

Please visit https://fronthouse.no