Hi!

First of, thanks for an awesome testing framework 😃

I’m currently mocking some outputs using MockComponent. There seems to be an issue where all instances of the mock component share the same event emitter. Calling emit on a single instance will therefore call the bound method multiple times, once for each instance.

Here’s a test to demonstrate this:

import { Component, EventEmitter, Output } from "@angular/core";
import { createTestComponentFactory, MockComponent } from "@netbasal/spectator";

@Component({
    selector: "app-subcomponent-component",
    template: ``,
})
class SubcomponentDemoComponent {
    @Output()
    public emitter = new EventEmitter();
}

@Component({
    selector: "app-demo-component",
    template: `
        <app-subcomponent-demo (emitter)="boundMethod()"></app-subcomponent-demo>
        <app-subcomponent-demo (emitter)="boundMethod()"></app-subcomponent-demo>
    `,
})
class DemoComponent {
    public boundMethod() {}
}

describe("spectator", () => {
    const create = createTestComponentFactory({
        component: DemoComponent,
        shallow: true,
        declarations: [
            MockComponent({
                selector: "app-subcomponent-demo",
                identifier: SubcomponentDemoComponent,
                outputs: ["emitter"],
            }),
        ],
    });

    it("should differentiate between instances of event emitters", () => {
        const spectator = create({}, false);
        spyOn(spectator.component, "boundMethod");

        const instances = spectator.queryAll<SubcomponentDemoComponent>(SubcomponentDemoComponent);
        instances[0].emitter.emit();
        expect(spectator.component.boundMethod).toHaveBeenCalledTimes(1);
    });
});

The function, boundMethod should only be called once because only one value is emitted, however, it is called twice.

Could you have a look into this?

Thanks and cheers, Oliver