All right, maybe it's good to update the docs accordingly (and deprecate the Spectator one, and update the existing unit tests to properly demonstrate this compatibility).

from spectator.

New doc proposal for: https://netbasal.gitbook.io/spectator/components/untitled-1 (Mock Components).

Mock Components

Sometimes it's helpful to pass a mock implementation of other components. You can mock components using the ng-mocks library:

import { createHostComponentFactory } from '@netbasal/spectator';
import { MockComponent } from 'ng-mocks';

import { FooComponent } from './path/to/foo.component';

const createHost = createHostComponentFactory({
  component: SettingsPanelComponent,
   declarations: [
     MockComponent(FooComponent)
   ]
 });

For more info about mocking components, please take a look at the ng-mocks docs.

from spectator.

Hey all, thanks for the quick responses and the swift resolution and clarification! 🥇

from spectator.

I came across this lib after reading @NetanelBasal 's medium article. I'm stoked that you guys are going to pull in ng-mocks. Let me know if there is anything you guys need from me.

from spectator.

@ike18t Yes, we are using ng-mocks. Spectator and ng-mocks together are a win-win :)

from spectator.

I see what the problem. It's because it's on the prototype. I think we should move to the complete implementation of Mocks in Angular.

https://github.com/ike18t/ng-mocks

We're already using it actually in our code. It auto mocks the inputs, outputs, etc.

from spectator.

Yes, this is working as expected:

import { createTestComponentFactory } from '@netbasal/spectator';
import { MockComponentEmittersComponent } from './mock-component-emitters.component';
import { AppSubcomponentDemoComponent } from '../app-subcomponent-demo/app-subcomponent-demo.component';
import { MockComponent } from 'ng-mocks';

fdescribe('spectator', () => {
  const create = createTestComponentFactory({
    component: MockComponentEmittersComponent,
    shallow: true,
    detectChanges: false,
    declarations: [MockComponent(AppSubcomponentDemoComponent)]
  });

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

    const instances = spectator.queryAll<AppSubcomponentDemoComponent>(MockComponent(AppSubcomponentDemoComponent));

    instances[0].emitter.emit();
    expect(spectator.component.boundMethod).toHaveBeenCalledTimes(1);
  });
});

from spectator.

@dirkluijk for your knowledge.

from spectator.

Nice library @NetanelBasal. Maybe I have some time left the next days to submit a PR to integrate it. 😄

from spectator.

We need the Jest docs first :)

from spectator.

Of course. By the way, if ng-mocks is preferred over the Spectator MockComponent, does that mean that no integration is needed at all and that we just have to deprecate the current implementation in favour of the ng-mocks version of MockComponent? Or what do you suggest?

from spectator.

Yes, that's what we did in our application. We're using ng-mocks directly; it's much more comfortable.

from spectator.

I noticed in the spectator docs for mocking a component there is the following line
const instances = spectator.queryAll<SubComponent>(MockComponent(SubComponent));

That call to MockComponent isn't necessary since this commit:
help-me-mom/ng-mocks@7ccd3f5#diff-e618e42c87439e062f6fc60c40d0e5abR37

My bad for not representing that in the README, I just updated it.

It can be:
const instances = spectator.queryAll<SubComponent>(SubComponent);

That being said you can possibly update your method sig for the query methods from:
query<R>(directiveOrSelector: Type<any> to query<R>(directiveOrSelector: R
and get the usage down to:
const instances = spectator.queryAll(SubComponent);

from spectator.

Awesome!

from spectator.

Yes, we are using ng-mocks. Spectator and ng-mocks together are a win-win :)

This has been really useful but it's nowhere in the doc. It'd be a nice addition to the readme I think

from spectator.

@maxime1992 would love to see a PR.

from spectator.

👆 #206

from spectator.