Major API changes

This release introduces compatibility with Angular 10 as well new ergonomics for working with @Input and @Output.

Breaking changes

• BasePage.setBoundValues has been renamed BasePage.setInputs for consistency with the new input binding feature.
• renderComponent no longer returns a promise, but instead requires to run in a fakeAsync context.
• renderComponent and BasePage both take an additional template parameter argument for the component bindings.

Because of the two breaking changes, the recommended pattern for page objects has changed.

Before:

class Page extends BasePage<MyComponent> {
    doStuff() { }
}
 
describe('MyComponent', () => {
    let page: Page;

    beforeEach(async () => {
        page = new Page(renderComponent(MyComponent, MyModule));
    });

    it('does stuff', fakeAsync(() => {
        page.doStuff();
    }));
});

New pattern:

class Page<T> extends BasePage<MyComponent, T> {
    doStuff() { }
}

describe('MyComponent', () => {
    function createPage() {
        return new Page(renderComponent(MyComponent, MyModule));
    }

    it('does stuff', fakeAsync(() => {
        const page = createPage();
        page.doStuff();
    }));
});

Note that it is no longer recommended to use beforeEach. Instead, a local variable const page is declared in each it block. This allows TypeScript to infer the type of input bindings, if any is provided.

New features

Passing input bindings

Input bindings can be provided in the call to renderComponent. Example:

const page = new Page(renderComponent(GreetingsComponent, GreetingsModule, {
    inputs: {
        userName: 'John'
    }
}));

Then, at any point in time, the bound values can be updated with setInputs:

page.setInputs({
    userName: 'Atul'
});

Testing emitted events

Values emitted on an @Output EventEmitter of the component can be captured via page.outputs. This object has a deceptively simple usage pattern:

const emittedEvents = page.outputs.codeChage.capture();

// Any event emitted on the `codeChange` output of the component from this point on is captured in the array `emittedEvents`.
// At any point in time, assert the history of emitted values like this:
expect(emittedEvents).toEqual(['foo', 'bar']); // Assert the component emitted 'foo' then 'bar'